Attributi form* di input HTML

Corso consigliato: <input> Questa sezione introduce HTML Differenze tra l'elemento form* Attributi.

Attributo form

proprietà di input form L'attributo specifica <input> Il modulo a cui appartiene l'elemento.

Il valore di questo attributo deve essere uguale all'attributo id dell'elemento <form> a cui appartiene.

Esempio

Campo di input situato al di fuori del modulo HTML (ma ancora parte del modulo):

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

Prova da solo

Attributo formaction

proprietà di input formaction L'attributo specifica l'URL del file che gestisce l'input (dati) quando si invia il modulo.

Nota:Copia l'attributo <form> L'attributo azione dell'elemento Attributi.

formaction L'attributo si applica ai seguenti tipi di input: submit e image.

Esempio

Form HTML con due pulsanti di invio, che hanno azioni diverse (action):

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

Prova da solo

Attributo formenctype

proprietà di input formenctype L'attributo specifica come codificare i dati del modulo al momento dell'invio (aplica solo ai moduli con method="post").

Nota:Questa proprietà sovrascriverà <form> l'attributo enctype dell'elemento.

formenctype L'attributo si applica ai seguenti tipi di input: submit e image.

Esempio

Modulo con due pulsanti di invio. Il primo invia i dati del modulo con la codifica predefinita, il secondo invia i dati del modulo con la codifica "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">Nome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Invia">
  <input type="submit" formenctype="multipart/form-data"
  value="Invia con codifica Multipart/form-data">
</form>

Prova da solo

Attributo formmethod

proprietà di input formmethod L'attributo definisce il metodo HTTP utilizzato per inviare i dati del modulo all'URL dell'azione.

Nota:Questa proprietà sovrascriverà <form> l'attributo method dell'elemento.

formmethod L'attributo si applica ai seguenti tipi di input: submit e image.

I dati del modulo possono essere inviati come variabili URL (method="get") o come transazione HTTP POST (method="post").

Attenzioni riguardanti GET:

  • Aggiungere i dati del modulo alla fine dell'URL sotto forma di coppia nome/valore
  • Non utilizzare mai GET per inviare dati sensibili!(I dati del modulo presentati sono visibili nell'URL!)
  • La lunghezza dell'URL è limitata (2048 caratteri)
  • Utile per le presentazioni di modulo in cui l'utente desidera aggiungere i risultati come segnalibro
  • GET è adatto per dati non sicuri, come le stringhe di ricerca di Google

Attenzioni riguardanti POST:

  • Aggiungere i dati del modulo alla parte del corpo della richiesta HTTP (non visualizzati nell'URL)
  • POST non ha limiti di dimensione, può essere utilizzato per inviare grandi quantità di dati.
  • La presentazione del modulo con POST non può essere aggiunta come segnalibro

Suggerimento:Se i dati del modulo contengono informazioni sensibili o personali, è assolutamente necessario utilizzare POST!

Esempio

Modulo con due pulsanti di invio. Il primo invia i dati del modulo utilizzando method="get". Il secondo invia i dati del modulo utilizzando method="post":

<form action="/action_page.php" method="get">
  <label for="fname">Cognome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nome:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Inviare con GET">
  <input type="submit" formmethod="post" value="Inviare con POST">
</form>

Prova da solo

proprietà formtarget

proprietà di input formtarget L'attributo specifica un nome o una chiave di parola, che determina dove visualizzare la risposta ricevuta dopo la presentazione del modulo.

Nota:Questa proprietà sovrascriverà <form> proprietà target dell'elemento.

formtarget L'attributo si applica ai seguenti tipi di input: submit e image.

Esempio

Modulo con due pulsanti di invio e finestre di destinazione diverse:

<form action="/action_page.php">
  <label for="fname">Cognome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nome:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Invia">
  <input type="submit" formtarget="_blank" value="Inviare in una nuova finestra/scheda">
</form>

Prova da solo

proprietà formnovalidate

proprietà di input formnovalidate Le proprietà stabilisce che non deve essere verificato l'elemento <input> al momento della presentazione.

Nota:Questa proprietà sovrascriverà <form> Attributo novalidate dell'elemento.

formnovalidate L'attributo si applica ai seguenti tipi di input: submit.

Esempio

Modulo con due pulsanti di submit (con e senza validazione):

<form action="/action_page.php">
  <label for="email">Inserisci la tua email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Invia">
  <input type="submit" formnovalidate="formnovalidate">
  value="Invia senza validazione">
</form>

Prova da solo

Attributo novalidate

novalidate L'attributo è <form> Attributi.

Se impostato, l'attributo novalidate stabilisce che non venga verificato alcun dati del modulo al momento del submit.

Esempio

Stabilisce che non venga verificata alcuna dati del modulo al momento del submit:

<form action="/action_page.php" novalidate>
  <label for="email">Inserisci la tua email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Invia">
</form>

Prova da solo

Elementi Form e Input HTML

Etichetta Descrizione
<form> Definire l'input HTML per gli utenti per il modulo.
<input> Definire il controllo di input.

Per ottenere l'elenco completo di tutti i tag HTML disponibili, visitare il nostro Manuale di riferimento delle etichette HTML.