<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

Gli attributi di questo elemento includono gli attributi globali.

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> con type=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>

Liste utili