FORM in HTML5

(ultima modifica 13-09-2022)

Tag <form>
● Il tag <form> permette di creare dei moduli usati per collezionare i dati degli
utenti ed inviarli ad un server per l’elaborazione
● il tag <form> è un elemento di blocco
● Una form può contenere diversi tipi di elementi:
○ campi di testo
○ checkbox
○ radio button
○ bottoni
Una semplice form

Nota: gli attributi name, method, target e action risultano di fondamentale

importanza nella programmazione server side (ad. esempio PHP).
Sono decisamente meno usati nella programmazione client side (ad esempio JS).
Una semplice form - L'attributo action
● Definisce l’azione da eseguire alla pressione del pulsante per l’invio
(identificato dall’attributo submit)
● Normalmente i dati vengono inviati ad una pagina scritta in un linguaggio
server-side (ad es. php) che provvede ad elaborarli.
● Nel nostro esempio i dati vengono inviati alla pagina “miaPagina.php”
● Se viene omesso i dati vengono inviati alla pagina corrente
Una semplice form - L’attributo target
● Specifica dove sarà mostrata la risposta ricevuta dall'elaborazione della form,
dopo la pressione del pulsante di submit
● I valori più usati sono (come per il tag <a>)
○ _self : stessa pagina
○ _blank : nuova pagina o scheda
● Se omesso assume il valore di default “_self”
Una semplice form - L’attributo method
● Specifica il metodo http da usare quando si inviano i dati di una form
● Se non specificato il metodo di default è GET
● Il metodo GET:
○ invia i dati della form in chiaro sulla barra degli indirizzi dopo l’URL (query string in modalità
coppia chiave-valore)
○ la lunghezza della stringa è limitata a 2048 caratteri
○ va usato quando si prevede di salvare la query string (ad es. in un segnalibro)
○ MAI usarlo per inviare dati sensibili
● Il metodo POST:
○ invia i dati in maniera separata e nascosta
○ non ha limitazioni sulla quantità di dati inviati
○ non è possibile salvare la query string in un segnalibro
Una semplice form - L’attributo name
● Ogni campo di input deve avere l’attributo “name” per essere inviato ed
elaborato
● Se omesso, i dati del campo relativo non vengono inviati
● Da non confondere col l’attributo id che ha comunque la funzione di
identificare il tag ma valido solo in CSS e JavaScript
Il tag “input”
● È il tag più usato nella costruzione della form
● Il suo aspetto varia in base al valore dell’attributo type
● I valori più comuni dell'attributo type per l’inserimento dati sono:
○ campi di testo: type=”text”
○ campi di testo: type=”password”
○ radio button: type=”radio”
○ check box: type=”checkbox”
● Spesso è possibile specificare un valore predefinito mediante l’attributo
value o uno stato predefinito medianti opportuni attributi (ad es. checked)
Tag input type=”text” (inline)
● Definisce un campo di testo di una riga di massimo 20 caratteri
● Dopo l’inserimento dati da parte dell’utente il valore del campo verrà usato
come valore per l’attributo value
● L’attributo value (inserito dallo sviluppatore) permette anche di specificare un
valore di default per il campo (che potrà essere cancellato e ridefinito)
● Spesso al posto di value si usa l’attributo placeholder per assegnare un
testo di esempio visualizzato in maniera diversa dal testo normale
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name viene usato per identificare il campo lato server
Tag input type=”password” (inline)
● Definisce un campo di testo di una riga di tipo specifico per l’inserimento delle
password, infatti maschera il testo inserito con asterischi o altri simboli
● il mascheramento è solo “visivo”, JavaScript vede la password in chiaro e la
può manipolare
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name viene usato per identificare il campo lato server

IMPORTANTE: con questo tipo di campo usare sempre il metodo http POST
Tag input type=”submit” (inline)
● Definisce un bottone per inviare i dati della form al “gestore della form”
● Generalmente il gestore della form è una pagina php con uno script atto a
processare i dati
● L’attributo value specifica il testo del pulsante, se omesso il browser scriverà
un testo di default
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name viene usato per identificare il campo lato server
Tag input type=”reset” (inline)
● Definisce un pulsante che azzera il valore di tutti gli altri campi presenti nella
form
● L’attributo value specifica il testo del pulsante, se omesso il browser scriverà
un testo di default
Tag input type=”hidden”
● è un tag di input ma non viene mostrato nella form (anche se sarà presente se
si richiede di visualizzare il sorgente della pagina html)
● viene comunque inviato al gestore della form come un dato a se stante.
● il suo valore va specificato dallo sviluppatore o via JS valorizzando l’attributo
value
● L’attributo id viene usato per identificare il campo lato client
● l’attributo name viene usato per identificare il campo lato server
● utile per workaround in javascript o php

Attenzione: se usato col metodo http GET sarà comunque visibile nella query
string nella barra degli indirizzi
Input type=”radio” (inline)
● Definisce un selettore di tipo radio button
● L’attributo value specifica la scelta effettuata (e che verrà inviata al server)
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name viene usato per identificare il campo lato server
● L’attributo name DEVE essere uguale per tutti i radio button che identificano un
range di opzioni (stesso contenitore padre)
● Viene permessa soltanto UNA scelta
● L’attributo booleano checked specifica una scelta iniziale
tag input type=”checkbox” (inline)
● Definisce un selettore di tipo checkbox
● L’attributo value specifica la scelta effettuata (che verrà inviata al server)
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name viene usato per identificare il campo lato server
● Permette scelte multiple o anche nessuna scelta
● L’attributo booleano checked specifica una scelta iniziale
Tag label
● Specifica dal punto di vista semantico (utile anche agli screen reader) la
descrizione (etichetta) di un tag input
● Se cliccata attiva il tag di input automaticamente (ad es. radio button)
● Il collegamento della label con il tag di input viene definito dall'attributo for
(sia per il l’attributo name che per id)
● In alternativa è possibile racchiudere il tag interessato all’interno del tag label
Attributi utili dei tag di input
Alcuni tag hanno degli attributi specifici per definire il valore di un tag o per
limitare l’inserimento ad un range di valori o per definire il passo di incremento,
come ad esempio:

● value : valorizzato dall’utente o dallo sviluppatore imposta il valore del tag

● size : specifica la larghezza in caratteri dei tag di input che lo supportano
● maxlenght : specifica il massimo numero di caratteri inseribili in un campo
● max e min : specifica il massimo valore numerico inseribile in un campo
● pattern : specifica un’espressione regolare da usare in fase di validazione
● step : specifica il valore del passo (o di incremento) di un campo ( ad es.
<number> o <range>)
Altri tag input di uso frequente
● type=”date”
● type=”datetime”
● type=”number”
● type=”range”
● type=”email”
● type=”tel”
● type=”url”
● type=”color”
● type=”file”
Tag select e option (inline)
● Il tag select definisce un elenco a discesa e il tag option permette di
visualizzare le possibili scelte
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name del tag select viene usato per identificare il campo lato
server
● L’attributo booleano multiple nel tag select permette scelte multiple
● L’attributo value del tag “option” specifica la scelta effettuata (e che verrà
inviata al server)
● L’attributo booleano selected nel tag option specifica una scelta iniziale.
Se assente, il primo elemento visibile del tag option coincide col primo
inserito.
Tag select e option (alternativa a list e datalist)
● L’attributo size specifica l’altezza del menu evitando l’effetto “tendina” (se
omesso equivale a size=1)
● HTML 5 ha introdotto come alternativa il tag <list> (e <datalist>) che
permette anche di inserire un nuovo valore nella lista delle scelte
Tag textarea
● definisce un’area rettangolare in grado di accettare grandi quantità di testo
● dato che risente di ogni spazio bianco dopo il tag di apertura, assicurarsi di
non avere spazi tra il tag di apertura e quello di chiusura
● è possibile specificare, mediante gli attributi rows e cols, il numero di righe
e di colonne
● l’attributo resize definisce o limita il ridimensionamento da parte dell’utente
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name viene usato per identificare il campo lato server
Tag FieldSet
● Usato per raggruppare visivamente diversi tag input in un rettangolo
● Tramite il tag legend è possibile specificare un testo che rappresenta il nome
del raggruppamento
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name viene usato per identificare il campo lato server
Tag button
● il tag button definisce un bottone cliccabile
● a differenza del tag input=”submit” non ha un comportamento predefinito
● il suo comportamento è solitamente definito via JavaScript
● è spesso associato ad un evento (si vedrà più avanti)
● L’attributo id viene usato per identificare il campo lato client
● L’attributo name viene usato per identificare il campo lato server
Tag input auto-validanti
● Novità introdotta da HTML 5
● Sono speciali input tag che permettono di validare in maniera automatica il
testo inserito dall’utente
● l’attributo novalidate, applicato al singolo tag input, farà ignorare
l’autovalidazione
● In combinazione spesso con l’attributo pattern e con le “espressioni
regolari”

I più comuni tag autovalidanti: email, url, date, number, time, ecc

IMPORTANTE: la validazione client-side NON DEVE assolutamente escludere

quella server-side
Gli attributi autocomplete e novalidate
autocomplete

● specifica se l’autocompletamento della form da parte del browser è attivo o

meno; se attivo il browser proporrà una serie di dati inseriti precedentemente

novalidate

● specifica se l'autovalutazione della form da parte del browser è attiva o meno;

se attiva il browser, alla pressione del pulsante di submit, segnalerà la
presenza di errori ed impedirà l’invio dei dati alla pagina di elaborazione

NOTA: entrambi i tag possono essere inseriti come attributi del tag <form> o
singolarmente a livello del singolo tag di input
Attributi utili (booleani)
Di seguito, alcuni utilissimi attributi booleani (se presenti = true, se assenti = false)

● required : rende il campo di input obbligatorio

● disabled : disabilita il campo
● focus : assegna il focus al campo
● checked : seleziona con un flag il campo (ad es. radio button e check
box)
● selected : selezione il campo (ad esempio select)
● readonly : rende il campo non sola lettura (non modificabile)
● e molti altri

Per approfondimenti consultare la relativa documentazione sul sito w3school

Form override con attributi del tag input
● In casi particolari è possibile effettuare l’override di alcuni attributi presenti
all’interno del tag <form>, come gli attributi:
○ action
○ method
○ target
● Si usano alcuni dei seguenti attributi inseriti dei tag <input>
○ formaction
○ formmethod
○ formtarget

Ad ogni modo è una pratica poco frequente.

Fonti
● W3school