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:

Lascia un commento