Form in html

Form in html

Oggi vedremo come creare un semplice form in html, ovvero un modulo che consente all’utente di inviare dei dati.

Per intenderci un form in html è qualcosa del tipo:

form html

Quindi ci sono degli spazi dove inserire i dati, ad esempio il nome, il cognome, il telefono, il messaggio, ecc…

Questi dati vengono poi inviati quando si clicca il pulsante invia.
Dove vengono inviati? Vengono inviati al server web che poi provvederà a interpretarli ed inviarli a chi è stato programmato l’invio.

Innanzitutto perché creare un form in html?

Perché magari abbiamo bisogno di interagire con l’utente in qualche modo, creando un semplice form di contatto o una newsletter o ancora un form per raccogliere dati statistici.

Ecco allora come predisporre la pagina html che da sola non basterà per inviare dati attraverso un form. Infatti avremo bisogno anche di linguaggi di scripting come ad esempio PHP.


Tag form in html

Un form in html si indica col il tag <form>….</form>.

In genere si aggiungono gli attributi name, action, method e enctype.

<form action=”” method=”” name=”” enctype=””>….</form>


Attributo action del tag form

L’attributo action serve a specificare l’azione che il browser deve effettuare quando il form viene sottomesso, ovvero quando si fa clic sul pulsante invia.

L’attributo action può avere come valore un URL oppure un indirizzo mail e come attributo di default ha la pagina stessa.

Per intenderci l’URL (Universal Resource Locator) è una stringa di caratteri che identifica in maniera univoca una pagina all’interno della rete.

Ad esempio, un URL può avere una forma del tipo:

https://www.codingcreativo.it/tag-form/

Dove https è il protocollo, in questo caso è https ma potrebbe anche essere diverso;

www.codingcreativo.it convenzionalmente è il nome di dominio, più precisamente definito Authority.

/tag-form/ è il path ovvero il cammino per raggiungere la pagina.

<form action=”URL_personalizzata“>…</form>


Oppure si può indicare un indirizzo mail usando mailto, come da esempio:

<form action=”mailto:nomecognome@gmail.com“>


Attributo method del tag form in html

L’attributo method determina il modo in cui i dati vengono mandati al server e può assumere due valori:

get – valore di default che passa i parametri che saranno visibili in alto nell’url della barra degli indirizzi.

post – invia i dati in modo che non possono essere tracciati nella barra degli indirizzi del browser.

Rinvio la spiegazione più tecnica di quanto avviene dopo avervi spiegato cosa sono le query string e le CGI.

Adesso mi preme solo farvi capire che dunque post è il metodo più sicuro se si vogliono inviare dati di un form di registrazione.

Quindi ad esempio indico come specificato sotto:

<form action=”URL_personalizzatamethod=”post”>…</form>


Attributo name del tag form in html

L’attributo name è il nome che si vuole assegnare al form, ad esempio:

<form name=”invio_dati” action=”URL_personalizzata” method=”post”>…</form>


Attributo enctype del tag form html

L’attributo enctype indica il tipo di codifica da utilizzare.

Questo attributo di default è impostato su questo valore: “application/x-www-form-urlencoded”, che sta ad indicare che tutti i caratteri vengono codificati e i caratteri speciali vengono convertiti. Quindi se vogliamo trasmettere solo dati questo attributo può essere omesso.

Nel momento in cui invece dobbiamo trasmettere un file, come ad esempio un’immagine allora dobbiamo modificarlo nel valore: “multipart/form-data“.

<form method="URL_personalizzata" method="post" enctype="multipart/form-data">
...
</form>

C’è anche un altro valore da poter inserire: “text/plain”, il quale indica che i caratteri non devono essere codificati ma è usato molto più raramente.


Tag input per i form in html

Continuiamo a costruire il nostro form html utilizzando il tag <input> si inserisce sotto il tag <form> prima della sua chiusura </form>.

Il tag <input> non ha il tag di chiusura e permette l’inserimento da parte dell’utente di un determinato valore.

Viene utilizzato con vari attributi, tra cui type, name, value, e placeholder.


Attributo name

L’attributo name serve a specificare il nome del campo e in genere si scrive un nome identificativo per quel tipo di dato. È un dato importante perché in questo modo si identificano i dati da inviare.

Ecco alcuni esempi:

<input name=”cognome”>

<input name=”mail”>

<input name=”invia”>


Attributo placeholder

L’attributo palceholder è stato introdotto con l’HTML5 ed è molto utile, infatti consente di visualizzare un suggerimento all’interno del campo da compilare.

Ad esempio inserendo semplicemente questo codice:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
</form>

Visualizzo i campi del form html come in figura sotto:

placeholder

Attributo type

L’attributo type può assumere questi valori:

text – di default, se omesso infatti il campo input è una casella di testo semplice;

submit – indica un pulsante (ad esempio può essere utilizzato per il tasto invia);

button – indica un semplice bottone da inserire nel form e su di esso è possibile attivare ad esempio alcuni eventi come onClick;

checkbox – è utilizzato per selezionare più caselle contemporaneamente in un elenco di voci accanto a dei piccoli riquadri;

radio – è indicato per effettuare una scelta da un elenco di voci indicate da caselle che sono dei piccoli cerchi. L’eventuale elemento preselezionato si indica con checked. Tutti gli elementi devono avere lo stesso valore per l’attributo name;

reset – il pulsante reset serve a svuotare il form;

image – permette ad esempio di impostare un’immagine per un pulsante di invio;

hidden – viene utilizzato per i campi nascosti.

Vediamo alcuni esempi di form html:

Primo esempio che include i radio button:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="sesso" type="radio" value="maschio" checked> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input name="invia" type="submit"></p>
</form>
Esempio con i radio button

Secondo esempio con i checkbox:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input name="invia" type="submit"></p>
</form>
checkbox

Terzo esempio con il tasto reset:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input name="invia" type="submit"></p>
</form>
reset html

Quarto esempio con i button:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input type="button" value="saluto" onClick="alert('Ciao da Coding Creativo');" />
</p>
</form>
button in html

Il campo hidden è un campo non visibile necessario quando occorre memorizzare dei dati per poi inviarli, ma al tempo stesso non devono essere visibili nella pagina web.

<p><input name="pw" type="hidden"></p>


Tag textarea

Continuaimo a costruire il form in html utilizzando il tag textarea che permette di creare un’area nella quale inserire del testo, specificando l’attributo name, il numero di righe con l’attributo rows e il numero di colonne con l’attributo cols. In pratica rows e cols non sono altro che la larghezza e l’altezza di una textarea.

Un esempio di form in html:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<textarea name="messaggio" rows="5" cols="50" placeholder="inserisci un messaggio"></textarea></p>
<p>
<input name="invia" type="submit">
</p>
</form>
textarea in html


Tag select e option

Il tag select si inserisce all’interno del form e consente di effettuare una scelta da un elenco di voci specificate dal tag option.

Tag select

Il tag select in genere ha l’attributo name, come da esempio:

<select name=””> … </select>

Tag option

Il tag option si inserisce all’interno del tag select e ha in genere l’attributo name che specifica il nome, l’attributo value che specifica il valore che deve essere inviato e l’attributo selected che specifica la voce preselezionata.

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<select name="regione"> 
     <option value="1" selected>Abruzzo</option>
     <option value="2">Basilicata</option>
     <option value="2">Calabria</option>
     <option value="3">Campania</option>
     <option value="4">Emilia-Romagna</option>
     <option value="5">Friuli-Venezia Giulia</option>
     <option value="6">Lazio</option>
     <option value="7">Liguria</option>
     <option value="8">Lombardia</option>
     <option value="9">Marche</option>
     <option value="10">Molise</option>
     <option value="11">Piemonte</option>
     <option value="12">Puglia</option>
     <option value="13">Sardegna</option>
     <option value="14">Sicilia</option>
     <option value="15">Toscana</option>
     <option value="16">Trentino-Alto Adige</option>
     <option value="17">Umbria</option>
     <option value="18">Valle d'Aosta</option>
     <option value="19">Veneto</option>
</select>
<p>
<textarea name="messaggio" rows="5" cols="50" placeholder="inserisci un messaggio"></textarea></p>
<p>
<input name="invia" type="submit">
</p>
</form>
select option

Label

I dati da inserire possono essere descritti da un’etichetta rappresentata dal tag label. L’attributo che si specifica all’interno è for ed ha lo stesso valore dell’attributo name che abbiamo visto sopra per gli altri tag.

La label è importante perché gli screen reader possono leggerla.

Vediamo un esempio:

<p>
<label for="nome">Nome </label> 
<input name="nome" placeholder="Nome"></p>
<p>
<label for="nome">Email </label> 
<input name="mail" placeholder="Email"></p>
label form

Questi sono solo degli esempi di form in html, in base alle vostre esigenze potete creare il vostro form personalizzato.

Prossimamente vedremo altri esempi di form in html e come gestirne l’invio.


Alcuni link utili:

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Inserire immagini in una pagina web

Paragrafi in html

Tabelle in html

Elenchi in html

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Gioco indovina numero in C

Gioco indovina numero in C

Il gioco indovina numero, che di seguito verrà sviluppato in C, è un gioco molto semplice che consiste nel cercare di indovinare un determinato numero generato a caso dal programma.

Procedimento

Il procedimento che ho intrapreso per lo sviluppo dell’algoritmo consiste in pochi semplici passi:

Primo passo – Facciamo generare un numero random a caso in un intervallo di tempo (si veda la spiegazione sui numeri random che ho spiegato in questo articolo), ad esempio tra 1 e 10. Memorizziamo il numero nella variabile n.

Secondo passo – Stabiliamo il numero dei tentativi massimi per indovinare il numero generato casualmente. Memorizziamo i tentativi in una variabile che chiamiamo tentativi.

Terzo passo – Generiamo il ciclo che si fermerà ad esempio dopo aver effettuato un certo numero di tentativi. Chiaramente si può impostare un numero a piacere.

Quarto passo – Facciamo inserire un numero all’utente e lo memorizziamo nella variabile x.

Quinto passo: Confrontiamo n con x:

se x è maggiore di n, diciamo di inserire un numero più piccolo;

se x è minore di n, diciamo di inserirne un numero più grande;

invece, se x è uguale ad n, i numeri sono uguali e abbiamo vinto per cui usiamo la funzione break per uscire dal programma.

 

Esempio del gioco indovina numero:

Il computer genera un numero random x. Ad esempio supponiamo che generi x=6.

Il programma dà tre possibilità per indovinare il numero.

Supponiamo che l’utente inserisca come prima possibilità il numero 8 quindi n=8. Il numero n è maggiore di x, allora il programma suggerisce all’utente di inserire un numero più basso.

All’utente viene chiesta una seconda possibilità e inserisce un numero più basso come da suggerimento, ad esempio 5 quindi n=5. Il numero n è minore di x e il programma gli suggerisce di inserire un numero più alto.

A questo punto l’utente ha due possibilità di indovinare il numero: o inserire il numero 6 oppure il numero 7.

Nel caso in cui l’utente deciderà di inserire il numero 6 il programma gli restituirà il messaggio “Hai vinto!“. Se invece deciderà di inserire il numero 7, il programma gli restituirà il messaggio “Hai perso!

Chiaramente ci possono essere tanti procedimenti per la risoluzione del gioco indovina numero in C. Proponete la vostra.

Allego il codice di seguito.

#include <stdio.h>
#include <stdlib.h>
#include <time.h>

int main(void)
{    
    int i,n,x, tentativi=0;
    srand( time (NULL) ); /* cambia il seme in base al tempo */ 
    n=1+(rand() %10);  /* genera un numero casuale compreso tra 1 e 10 */
    printf("Indovina un numero tra 1 e 10, hai tre tentativi\n");
    while(tentativi<3) {
        printf("Inserisci un numero: ");
        scanf("%d", &x);
        if (x>n) 	
          if(tentativi!=2)
              printf("Inserisci un numero piu' piccolo\n", tentativi);
          else printf("Hai perso, il numero da indovinare era %d\n" , n );
            	
       else if (x<n) 
            if(tentativi!=2)
                printf("Inserisci un numero piu' grande\n", tentativi);
            else printf("Hai perso, il numero da indovinare era %d\n" , n );
       else {
            printf("Hai vinto\n" );
            break;           
        }
        tentativi=tentativi+1;
    }

    return 0;
}

Alcuni link utili:

Ricerca di un elemento in una matrice

Prodotto tra matrici

Somma tra due matrici in C

Array multidimensionali

Tavola pitagorica in C

Array o vettori in linguaggio C

Media dei numeri in un array in linguaggio C

Esempio di array con numeri random in C

Quick sort in C

Selection sort in C

Merge sort in C

Insertion Sort in C

Olimpiadi di informatica con Scratch

Olimpiadi di informatica con Scratch

Realizziamo un semplice quiz su un esercizio delle olimpiadi di informatica con Scratch.

Abbiamo il seguente quesito:

La media aritmetica dei quattro numeri 5, 9, X e Y vale 12. Quanto vale la media aritmetica dei due numeri X+7 e Y-3 ?

Vogliamo proporre questo quesito con Scratch e chiedere all’utente la risposta. Se coincide con quella calcolata dal sistema allora vince, altrimenti avrà un messaggio di esortazione a ragionare ancora.

Olimpiadi di informatica con Scratch – risoluzione

Ragioniamo sul problema:

Se la media dei quattro numeri è uguale a 12, vuol dire che (5+9+ X+Y)/4=12

Ovvero risolvendola avremo che X+Y=48-14=34

Bene adesso dobbiamo trovare la media dei due numeri X+7 e Y-3, ovvero M=((X+7)+(Y-3))/2, cioè risolvendola M=(X+Y+4)/2.

Facilmente si ottiene il risultato, infatti basta sostituire a X+Y il valore di 34.

Si avrà che M=(34+4)/2=38/2=19

Realizzazione del quiz

Bene, proviamo a fare un semplice quiz sul quesito proposto alle olimpiadi di informatica con Scratch. Per farlo uso le seguenti variabili:

somma – che è la variabile che contiene la somma di X+Y;

media – che calcola la media in base alla formula detta prima (X+Y+4)/2;

m – che contiene la risposta dell’utente.

Uso questo procedimento perché con opportuni cambiamenti si può generalizzare l’algoritmo e chiedere in input quanto vale la somma di X+Y ad esempio, per poi risolvere il problema.

E anche per presentarvi un semplice uso dei blocchi.

Ho scelto questi sprite e questo sfondo:

Ho inserito questo script, dove chiedo la risposta, la memorizzo nella variabile m e avvio il blocco media. Nel blocco media semplicemente calcolo la media in base a quanto detto prima.

Come vi dicevo si può generalizzare l’algoritmo chiedendo in input quanto vale la somma e mettendo delle variabili anche nell’equazione che calcola la media.

Script completo del quesito proposto alle olimpiadi di informatica.

script olimpiadi di informatica

Dunque il programma controlla se la variabile m che contiene la risposta dell’utente è uguale alla media calcolata dal blocco media. Se è vero, invia un messaggio alla ciambella che prima era nascosta, così da comparire al cagnolino.

script olimpiadi

Questo vuole essere solo un esempio di semplice quiz sulle olimpiadi di informatica con Scratch.


Alcuni link utili

Morra cinese con scratch

Giochi matematici autunno 2018

Esempi di giochi matematici Bocconi

Gioco della tabellina con scratch

Gioco indovina numero con scratch

Frazioni con scratch

Equazioni di primo grado con scratch

Disegnare poligoni regolari con scratch

Numeri primi in Scratch

La successione di Fibonacci in Scratch

Massimo fra tre numeri in Scratch

Minimo tra 3 numeri in Scratch

Numeri perfetti con algobuild

Numeri amicabili

Selecion sort in Scratch