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>

NOME:
COGNOME:

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>

SESSO
M
F



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>

Disponibilità
Apprendistato
Stage
Determinato
Indeterminato
A chiamata

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>

seleziona il tuo colore preferito:

TYPE DATE

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

Data di nascita:

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>

Data e ora di nascita:

TYPE DATETIME-LOCAL

<html>
<body>
<form>
 Email: <input type=”email”>
 <input type=”submit” value=”Invia” >
</form>
</body>
</html>


Email:

TYPE-FILE

<html>
<body>
<form>
Seleziona file : <input type=”email”>
 <input type=”file”>
</form>
</body>
</html>

Seleziona file :

TYPE-PASSWORD


<!DOCTYPE html>
<html>
<body>
<form>
 Password: <br><input type=”password”>
</form>
</body>
</html>

Password:

Continua a leggere


Lascia un commento