Uno dei tag fondamentali dell’HTML è sicuramente il form, tanto è importante quanto poco conosciuto rispetto ad altri tag.
Un forma (in italiano potremmo tradurre con modulo) è uno dei principali sistemi di interazione tra utente e sito, infatti selezionando da una tendina, scrivendo qualcosa dentro un campo di testo, spuntando un checkbox e premendo “invio” possiamo mandare dei dati al server che li elabora e ci da una risposta attinente alla nostra domanda.
Da questo ne deriva che per stabilire un interazione tra utente e pagina è auspicabile conoscere e saper usare i form.

Ora andremo a vedere un form nella sua versione “atomica”, ma prima notiamo che un form sensato non esiste da solo, ma accoppiato ad un’altra pagina che elabora i dati che le abbiamo inviato.
Tutto quello che vogliamo passare da una pagina all’altra deve essere contentuto tra i due tag from (aperto e chiuso)

...

In questo esempio sono stati inseriti i due attributi action e method, l’attributo action deve contener il rifermento alla pagina che riceverà i dati, il metodo invece indica in quale modo vengono trasferiti i dati, se si usa il metodo get i dati verranno accodati all’url e potremo leggerli sulla barra degli indirizzi, con il metodo post i dati passerano ma non saranno visibili dopo l’indirizzo. Questa è una semplificazione ma per ora va bene così.

Ora vediamo come inserire una casella di testo e un bottone per l’invio dei dati.

Abbiamo compilato action e method, e abbiamo aggiunto due tag input. Il primo

Produrrà un campo di testo (ossia quel campo dove è possibile scrivere una linea di testo), questo avviene assegnando il valore text all’attributo type.
Inoltre abbiamo assegnato all’attributo name il valore campoTesto, questo attributo è fondamentale infatti sarà mediante il valore assegnato all’attributo name che saremo in grado di utilizzare quello che viene scritto nel campo di testo.

Questo codice:

crea un bottone che se premuto passa i dati da una pagina all’altra, per ottenerlo abbiamo assegnato il valore submit all’attributo type, inoltre assegnado Invia all’attributo value otteniamo un etichetta sul bottone stesso.

Il risultato che si otterrà (otticamente) sarà il seguente: