HTML elementi del modulo
form HTML in una pagina web consente agli utenti di inserire i dati che vengono inviati a un server per l'elaborazione. I moduli possono assomigliare di carta o di database forme perché gli utenti di Internet compilare i moduli che utilizzano caselle di controllo, pulsanti di opzione, o campi di testo.
Ad esempio, i moduli possono essere utilizzati per inserire i dati di spedizione o di carta di credito per ordinare un prodotto, oppure può essere utilizzato per recuperare i risultati di ricerca da un motore di ricerca.
Questo capitolo descrive tutti gli elementi form HTML.
Il <input> Element
Il più importante elemento forma è il <input> elemento.
Il <input> elemento può variare in molti modi, a seconda del type di attributo.
Tutti i tipi di input HTML sono coperti nel prossimo capitolo.
Il <select> Element (Drop-Down List)
Il <select> elemento definisce un elenco a discesa:
Esempio
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Prova tu stesso " Il <option> elementi definisce le opzioni tra cui scegliere.
La lista mostra normalmente il primo elemento come selezionato.
È possibile aggiungere un attributo selezionato per definire l'opzione predefinita.
Il <textarea> Element
Il <textarea> elemento definisce un campo di input multi-linea ( a text area ) :
Esempio
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea> Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
Il <button> Element
Il <button> elemento definisce un pulsante cliccabile:
Questo è come il codice HTML sopra verrà visualizzato in un browser:
HTML5 Form Elements
HTML5 aggiunti i seguenti elementi del modulo:
- <datalist>
- <keygen>
- <output>
Per impostazione predefinita, i browser non visualizzano elementi sconosciuti. Nuovi elementi non distruggere la vostra pagina.
HTML5 <datalist> Element
Il <datalist> elemento specifica un elenco di opzioni predefinite per un <input> elemento.
Gli utenti vedranno un elenco a discesa di opzioni predefinite come dati di input essi.
L' list attributo del <input> elemento, deve riferirsi al id attributo del <datalist> elemento.
Esempio
Un <input> elemento con valori predefiniti in un <datalist> :
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> Prova tu stesso " HTML5 <keygen> Element
Lo scopo del <keygen> elemento è quello di fornire un modo sicuro per autenticare gli utenti.
Il <keygen> elemento specifica un campo generatore coppia di chiavi in un modulo.
Quando il modulo viene inviato, due chiavi vengono generate, una privata e una pubblica.
La chiave privata viene memorizzato localmente, e la chiave pubblica viene inviata al server.
La chiave pubblica può essere utilizzata per generare un certificato client per autenticare l'utente in futuro.
Esempio
Un modulo con un campo keygen:
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form> Prova tu stesso " HTML5 <output> Element
Il <output> elemento rappresenta il risultato di un calcolo (come quello eseguito da uno script).
Esempio
Eseguire un calcolo e mostrare il risultato in un <output> elemento:
<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form> Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 »
HTML elementi del modulo
= New in HTML5.
| Etichetta | Descrizione |
|---|---|
| <form> | Definisce un modulo HTML per l'input dell'utente |
| <input> | Definisce un controllo di input |
| <textarea> | Definisce un controllo di input multilinea (text area) |
| <label> | Definisce un'etichetta per un <input> elemento |
| <fieldset> | Gruppi relativi elementi in una forma |
| <legend> | Definisce una didascalia per un <fieldset> elemento |
| <select> | Definisce un elenco a discesa |
| <optgroup> | Definisce un gruppo di opzioni correlate in un elenco a discesa |
| <option> | Definisce un'opzione in un elenco a discesa |
| <button> | Definisce un pulsante cliccabile |
| <datalist> | Specifica un elenco di opzioni predefinite per i controlli di input |
| <keygen> | Definisce un campo del generatore coppia di chiavi (for forms) |
| <output> | Definisce il risultato di un calcolo |