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> TYPE DATETIME-LOCAL
<html>
<body>
<form>
Email: <input type="email">
<input type="submit" value="Invia" >
</form>
</body>
</html>
TYPE-FILE
<html>
<body>
<form>
Seleziona file : <input type="email">
<input type="file">
</form>
</body>
</html>TYPE-PASSWORD
<!DOCTYPE html>
<html>
<body>
<form>
Password: <br><input type="password">
</form>
</body>
</html>