FormGiorgio Piccardo

Cosa è?Una form è un modulo per l’immissione di dati per l’utente.

Vengono utilizzati per inviare dati ad un database server oppure per inviare e-mail.

In HTML viene rappresentato con l’elemento .

Inserisce contenuti interattivi per l'utente nella pagina web o in un'applicazione web inserendosi nel contesto del web dinamico.

Esempio di Form

Per creare una pagina con dei moduli, bisogna utilizzare l’apposito tag . Si tratta di un elemento di blocco.

…

name serve per indicare il nome del form

action indica l’URL del programma o della pagina di risposta che processerà i dati, ovvero dove verranno inviati

Inviare una form via mailGrazie all’attributo action è anche possibile far sì che i dati vengano inviati in e-mail al webmaster. In generale action indica l’indirizzo dove verranno processati i dati.

MetodoQuando creiamo una form possiamo scegliere due metodi di invio: GET e POST.

Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Ha alcune limitazioni e i dati viaggiano in chiaro direttamente nell’URL (massimo 255 caratteri). Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare.

Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Da utilizzare quando la form contiene dati sensibili.

e I moduli tendono a ingigantirsi e diventare lunghissimi.

Grazie al tag possiamo creare delle macro-aree all’interno dei form, e grazie al tag possiamo indicare il nome di ciascuna macro-area.

Dati Anagrafici : …

e

è l’elemento più utilizzato per quel che riguarda i campi delle form.

E’ senza chiusura.

Per specificare un determinato tipo di campo è sufficiente indicare il tipo di input.

crea un campo di testo

crea un bottone

Può essere rappresentato in vari modi a seconda dell’attributo type.

Campi di testo definisce una linea di input per inserire del testo.

Nome:

Cognome:

Area di testoL’elemento viene utilizzato per specificare un’area di input di testo.

Inserisci qui i tuoi commenti

Password definisce un campo di input per password. Il testo viene nascosto.

username:

password:

Radio Button definisce i pulsanti di opzione (radio button). Possono essere viste come risposte multiple a scelta unica. L’attributo value contiene il vero valore del campo e non quello che viene mostrato all’utente.

Maschile
Femminile
Altro

Checkbox definisce i pulsanti checkbox. Possono essere viste come risposte multiple a scelta multipla.

Pane
Uova

Select definisce una lista a discesa di scelte. Con si aggiungono tutte le possibili scelte.

HTML CSS Javascript Altro

Bottoni definisce un bottone.

HTML5 - Tipi di inputCon l’arrivo dell’HTML 5 sono stati introdotti tipi nuovi:

colordatedatetime-localemailmonthnumberrangesearchteltimeurlweek

Reset definisce un bottone che ripristina tutti i campi della form al valore originale.

Nome:

Cognome:

Invio definisce un bottone che invia i dati della form ad un gestore dei dati, che tipicamente può essere un server.

Il gestore della form è specificato nell’attributo action del form.

Nome:

Cognome:

Validazione automatica HTMLE’ possibile validare una forma utilizzando l’HTML, richiedendo ad ogni input i requisiti minimi per essere valido utilizzando gli attributi.

nome:

Validazione automatica HTML

Puoi trovare una guida dettagliata sulla validazione dei form a questo indirizzo

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

Grazie