English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il modulo HTML viene utilizzato per raccogliere diversi tipi di input utente, tutti i browser supportano il tag <form>. Definizione e uso Il tag <form> viene utilizzato per creare moduli HTML per l'input utente. I moduli possono contenere elementi input come campi di testo, caselle di controllo, caselle di selezione, pulsanti di invio e altri.
Creazione di un campo di testo
Questo esempio dimostra come creare un campo di testo in una pagina HTML. Gli utenti possono scrivere testo nel campo di testo.
Creazione di un campo di testo di password
Questo esempio dimostra come creare un campo di testo di password in HTML.
Il modulo è una zona che contiene elementi di modulo.
Gli elementi del modulo consentono agli utenti di inserire contenuti nel modulo, ad esempio: campo di testo (textarea), elenco a discesa, caselle di selection (radio-buttons), caselle di controllo (checkboxes) e altri.
Il modulo viene impostato utilizzando il tag di modulo <form>:
<form>
.
Elemento input
.
</form>
La tag di modulo più utilizzata è il tag di input (<input>).
Il tipo di input è definito dall'attributo di tipo (type). Tra i tipi di input più comunemente utilizzati ci sono:
Il campo di testo viene definito tramite il tag<input type="text"> quando l'utente deve inserire lettere, numeri e altri contenuti nel modulo.
<form action="/run/demo-form.php">
Nome:<input type="text" name="firstname" size="20"/><br/>Cognome:<input type="text" name="lastname" size="20"/><br/><input type="submit" value="Invia"/> </form>
Il browser visualizza come segue:
Attenzione:Il modulo in sé non è visibile. Allo stesso tempo, nella maggior parte dei browser, la larghezza predefinita del campo di testo è di 20 caratteri.
Il campo della password viene definito tramite l'etichetta<input type="password">:
<form action="/run/demo-form.php">
Password:<input type="password" name="pwd"/><input type="submit" value="Invia"/> </form>
L'effetto di visualizzazione del browser è il seguente:
Attenzione:Il campo della password non viene visualizzato in chiaro, ma viene sostituito da asterischi o punti.
<input type="radio"> etichetta definisce l'opzione di casella di riepilogo del modulo
<form action="/run/demo-form.php">
<input type="radio" name="sex" value="male"/>Maschio<br/><input type="radio" name="sex" value="female"/>Femmina<input type="submit" value="Invia"/> </form>
L'effetto di visualizzazione del browser è il seguente:
<input type="checkbox"> definisce la casella di controllo. L'utente deve selezionare una o più opzioni tra quelle date.
<form action="/run/demo-form.php">
<input type="checkbox" name="vehicle" value="Bike"/>Ho una bicicletta<br/><input type="checkbox" name="vehicle" value="Car"/>Ho una macchina<input type="submit" value="Invia"/> </form>
L'effetto di visualizzazione del browser è il seguente:
<input type="submit"> definisce il pulsante di invio.
Quando l'utente fa clic sul pulsante di conferma, il contenuto del modulo viene inviato a un altro file. L'attributo di azione del modulo definisce il nome del file di destinazione. Il file definito dall'attributo di azione di solito elabora i dati di input ricevuti.:
<form name="input" action="/run/demo-form.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
L'effetto di visualizzazione del browser è il seguente:
Se scrivi alcune lettere nel campo di testo sopra e clicchi sul pulsante di conferma, i dati di input saranno inviati alla pagina "html_form_action.php". Questa pagina mostrerà i risultati di input.
Pulsante di selezione singola (Radio buttons)
Questo esempio dimostra come creare un pulsante di selezione singola in HTML.
Casella di selezione (Checkboxes)
Questo esempio dimostra come creare una casella di selezione in una pagina HTML. Gli utenti possono selezionare o deselezionare la casella di selezione.
Lista a discesa semplice
Questo esempio dimostra come creare una casella di lista a discesa semplice in una pagina HTML. La casella di lista a discesa è una lista opzionale.
Lista a discesa preselezionata
Questo esempio dimostra come creare una lista a discesa preselezionata semplice.
Campo di testo (Textarea)
Questo esempio dimostra come creare un campo di testo (un controllo di input di testo a più righe). Gli utenti possono scrivere testo nel campo di testo. Il numero di caratteri che possono essere scritti non è limitato.
Creare un pulsante
Creare un pulsante. Puoi personalizzare il testo sul pulsante.
Modulo con bordi
Questo esempio dimostra come disegnare una casella con titolo intorno ai dati.
Modulo con caselle di input e pulsante di conferma
Questo esempio dimostra come aggiungere un modulo alla pagina. Questo modulo contiene due caselle di input e un pulsante di conferma.
Modulo con caselle di selezione multiple
Questo modulo contiene due caselle di selezione multiple e un pulsante di conferma.
Modulo con caselle di selezione singole
Questo modulo contiene due caselle di selezione singole e un pulsante di conferma.
Inviare un'e-mail dal modulo
Questo esempio dimostra come inviare un'e-mail dal modulo.
New: Nuovi tag HTML5
| Etichetta | Descrizione |
| <form> | Definire un modulo di input fornito dall'utente |
| <input> | Definire un campo di input |
| <textarea> | Definire un campo di testo (un controllo di input a più righe) |
| <label> | Definire l'etichetta dell'elemento <input>, generalmente il titolo di input |
| <fieldset> | Definire un gruppo di elementi di modulo correlati, utilizzando un riquadro esterno per contenerli |
| <legend> | Definire il titolo dell'elemento <fieldset> |
| <select> | Definire un elenco di opzioni a discesa |
| <optgroup> | Definire un gruppo di opzioni |
| <option> | Definire le opzioni nella lista a discesa |
| <button> | Definire un pulsante di clic |
| <datalist>HTML5 | Specificare un elenco di opzioni di controllo di input predefinito |
| <keygen>HTML5 | Definisce il campo generatore di chiave del modulo |
| <output>HTML5 | Definire un risultato di calcolo |