FORM HTML

Attraverso il linguaggio html è possibile creare dei form (moduli volti a raccogliere gli input degli utenti), che ad oggi rappresentano il maggior strumento di interazione tra i visitatori ed un sito web.

E’ utile precisare fin da subito , che il solo utilizzo del form html , permette la sola realizzazione dell’ interfaccia del form e che non sono in grado di eseguire alcuna elaborazione dei dati raccolti.

La realizzazione di un form , avviene attraverso il tag <form>

Gli attributi più importanti del tag form sono (che non approfondiremmo in quanto inutili nel corso di questa guida) :

action :specifica dove inviare i dati raccolti attraverso il form
method : specifica il metodo di invio dei dati
target : specifica in che finestra verrà mostrato il frutto dell’ elaborazione

Per generare le parti che compongono il post si utilizza il tag input che a seconda del type utilizzato produce diversi elementi del form esaminiamoli insieme.

TYPE TEXT

<!DOCTYPE html>
<html>
<body>
<form>
NOME: <input type=”text” value=””><br>
COGNOME: <input type=”text” value=””><br>
<input type=”submit” value=”Conferma”>
</form>
</body>
</html>

TYPE RADIO

<html>
<body>
<form>
SESSO<br>
<input type=”radio” value=”M”> M<br>
<input type=”radio” value=”F”> F<br>
<input type=”submit” value=”Conferma”>
</form>
</body>
</html>

TYPE CHECKBOX

<!DOCTYPE html>
<html>
<body>
<form>
Disponibilità <br><input type=”checkbox” value=””> Apprendistato<br>
<input type=”checkbox” value=””> Stage <br>
<input type=”checkbox” value=”” checked> Determinato<br>
<input type=”checkbox” value=””> Indeterminato <br>
<input type=”checkbox” value=”” checked> A chiamata<br>
</form>
</body>
</html>

TYPE COLOR

<!DOCTYPE html>
<html>
<body>
<form>
seleziona il tuo colore preferito: <input type=”color” value=”#ff00ff”><br><br>
<input type=”submit”>
</form>
</body>
</html>

TYPE DATE

<!DOCTYPE html>
<html>
<body>
<form>
Data di nascita: <input type=”date”>
<input type=”submit” value=”Invia” >
</form>
</body>
</html>

TYPE DATETIME-LOCAL

<!DOCTYPE html>
<html>
<body>
<form>
Data e ora di nascita: <input type=”datetime-local”>
<input type=”submit” value=”Invia” >
</form>
</body>
</html>