<form>: l'elemento "modulo"
L' elemento HTML <form>
rappresenta una sezione del documento contenente controlli interattivi per l'invio delle informazioni.
È possibile utilizzare le pseudo-classi CSS :valid
e :invalid
per definire lo stile di un elemento <form>
in base alla validità o meno degli elementi all'interno del form.
Attributi
accept
Tipi di contenuti, separati da virgole, accettati dal server.
accept-charset
Codifiche di caratteri separati da uno spazio accettate dal server. Il browser li utilizza nell'ordine in cui sono elencati. Il valore predefinito indica la stessa codifica della pagina . (Nelle versioni precedenti di HTML, le codifiche dei caratteri potevano anche essere delimitate da virgole.)
autocapitalize
Un attributo non standard utilizzato da iOS Safari che controlla come gli elementi del modulo testuale devono essere automaticamente scritti in maiuscolo. Gli attributi autocapitalize
su un modulo gli elementi lo sovrascrivono su <form>
. Possibili valori:
-
none
: nessuna capitalizzazione automatica -
sentences
(predefinito): metti in maiuscolo la prima lettera di ogni frase -
words
: metti in maiuscolo la prima lettera di ogni parola. -
characters
: capitalizza tutti i caratteri, ovvero maiuscolo.
autocomplete
Indica se per impostazione predefinita gli elementi di input possono avere i loro valori completati automaticamente dal browser. Gli attributi autocomplete
sugli elementi del modulo lo sovrascrivono su <form>
. Possibili valori:
-
off
: Il browser potrebbe non completare automaticamente le voci. -
on
: Il browser potrebbe completare automaticamente le voci.
name
Il nome del modulo. Il valore non deve essere la stringa vuota e deve essere univoco tra gli elementi del <form>
nella raccolta di moduli in cui si trova, se presente.
rel
Crea un collegamento ipertestuale o un'annotazione a seconda del valore, vedere l'attributo rel
per i dettagli.
Attributi per l'invio del modulo
Gli attributi seguenti controllano il comportamento durante l'invio del modulo.
action
L'URL che elabora l'invio del modulo. Questo valore può essere sovrascritto da un attributo formaction
su un elemento <button>
, <input type="submit">
o <input type="image">
. Questo attributo viene ignorato quando è impostato method="dialog"
.
enctype
Se il valore dell'attributo method
è post
, enctype
è il tipo MIME dell'invio del modulo. Possibili valori:
-
application/x-www-form-urlencoded
: il valore predefinito -
multipart/form-data
: Usalo se il modulo contiene elementi<input>
contype=file
. -
text/plain
: Introdotto da HTML5 a scopo di debug.
Questo valore può essere sovrascritto da attributi formenctype
su elementi <button>
, <input type="submit">
o <input type="image">
.
method
Il metodo HTTP con cui inviare il modulo. Valori possibili (senza distinzione tra maiuscole e minuscole):
-
post
-
get
-
dialog
Questo valore può essere sovrascritto da attributi formenctype
su elementi <button>
, <input type="submit">
o <input type="image">
.
novalidate
Questo attributo booleano indica che il modulo non deve essere convalidato una volta inviato. Se questo attributo non è impostato (e quindi il modulo è convalidato), può essere sovrascritto da un formnovalidateattributo su un elemento <button>
, <input type="submit">
o <input type="image">
appartenente al modulo.
target
Indica dove visualizzare la risposta dopo aver inviato il modulo. In HTML 4, questo è il nome/parola chiave di un frame. In HTML5, è un nome/parola chiave per un contesto di navigazione (ad esempio tab, finestra o iframe). Le seguenti parole chiave hanno significati speciali:
-
_self
(predefinito): carica nello stesso contesto di navigazione di quello corrente. -
_blank
: Carica in un nuovo contesto di navigazione senza nome. -
_parent
: Carica nel contesto di navigazione principale di quello corrente. Se nessun genitore, si comporta come_self
. -
_top
: Carica nel contesto di navigazione di primo livello (ovvero, il contesto di navigazione che è un antenato di quello attuale e non ha un genitore). Se nessun genitore, si comporta come_self
.Questo valore può essere sovrascritto da un formtargetattributo su un elemento
<button>
,<input type="submit">
o<input type="image">
.
Esempi
HTML
<!-- Form che invia una richiesta con metodo GET all'URL corrente -->
<form method="get">
<label>Nome:
<input name="aubmitted-name" autocomplete="nome">
</label>
<button>Salva</label>
</form>
<!-- Form che invia una richiesta con metodo POST all'URL corrente -->
<form method="post">
<label>Nome:
<input name="aubmitted-name" autocomplete="nome">
</label>
<button>Salva</label>
</form>
<!-- Form con fieldset, legend e un label -->
<form method="post">
<fieldset>
<legend>Titolo</legend>
<label><input type="radio" name="radio">Selezionami</label>
</fieldset>
</form>