Tag HTML <form>

Definizione e uso

<form> Il tag viene utilizzato per creare form HTML per accettare input utente.

<form> Gli elementi possono contenere uno o più elementi di modulo seguenti:

Vedi anche:

Tutorial HTML:Formulari e input HTML

Manuale di riferimento HTML DOM:Oggetto Form

Tutorial CSS: Impostazione dello stile del modulo

Esempio

Esempio 1

Formulario HTML con due campi di input e un pulsante di invio:

<form action="/action_page.php" method="get">
  <label for="fname">Nome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Cognome:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Invia">
</form>

Prova tu stesso

Esempio 2

Formulario HTML con caselle di selezione:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1">Ho una bicicletta</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2">Ho una macchina</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3">Ho una nave</label><br><br>
  <input type="submit" value="Invia">
</form>

Prova tu stesso

Esempio 3

Modulo HTML con caselle di selezione:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Invia">
</form>

Prova tu stesso

Proprietà

Proprietà Valore Descrizione
accept-charset Set di caratteri Stabilisce il set di caratteri utilizzato per la presentazione del modulo.
action URL Stabilisce dove inviare i dati del modulo quando viene presentato il modulo.
autocomplete
  • on
  • off
 Stabilisce se il modulo dovrebbe abilitare la funzione di completamento automatico.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Stabilisce come i dati del modulo devono essere codificati quando vengono inviati al server.
method
  • get
  • post
 Stabilisce il metodo HTTP utilizzato per inviare i dati del modulo.
name Testo Stabilisce il nome del modulo.
novalidate novalidate Stabilisce che il modulo non dovrebbe essere verificato durante la presentazione del modulo.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Stabilisce il rapporto tra la risorsa del link e il documento corrente.
target
  • _blank
  • _self
  • _parent
  • _top
 Stabilisce dove visualizzare la risposta ricevuta dopo la presentazione del modulo.

Proprietà globali

<form> Il tag supporta anche Proprietà globali HTML。

Proprietà degli eventi

<form> Il tag supporta anche Proprietà degli eventi HTML。

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <form> Elemento:

form {
  display: block;
  margin-top: 0em;
}

Prova tu stesso

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto