Elementi del modulo HTML
Questo capitolo descrive tutti i diversi elementi del modulo HTML.
Gli elementi HTML <form>
L'elemento HTML <form>può contenere uno o più dei seguenti elementi del modulo:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
L'elemento <input>
Uno degli elementi del form più utilizzati è l' <input>elemento.
L' <input>elemento può essere visualizzato in diversi modi, a seconda type
dell'attributo.
Esempio
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Tutti i diversi valori type
dell'attributo sono trattati nel capitolo successivo:
Tipi di input HTML .
L'elemento <etichetta>
L' <label>elemento definisce un'etichetta per diversi elementi del modulo.
L' <label>elemento è utile per gli utenti di screen reader, perché lo screen reader leggerà ad alta voce l'etichetta quando l'utente si concentra sull'elemento di input.
L' <label>elemento aiuta anche gli utenti che hanno difficoltà a fare clic su regioni molto piccole (come pulsanti di opzione o caselle di controllo), perché quando l'utente <label>fa clic sul testo all'interno dell'elemento, attiva o disattiva il pulsante di opzione/casella di controllo.
L' forattributo del <label>tag dovrebbe essere uguale idall'attributo <input>
dell'elemento per legarli insieme.
L'elemento <seleziona>
L' <select>elemento definisce un elenco a discesa:
Esempio
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Gli <option>elementi definiscono un'opzione che può essere selezionata.
Per impostazione predefinita, è selezionato il primo elemento nell'elenco a discesa.
Per definire un'opzione preselezionata, aggiungi l' selectedattributo all'opzione:
Esempio
<option value="fiat" selected>Fiat</option>
Valori visibili:
Utilizzare l' sizeattributo per specificare il numero di valori visibili:
Esempio
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Consenti selezioni multiple:
Utilizzare l' multipleattributo per consentire all'utente di selezionare più di un valore:
Esempio
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
L'elemento <textarea>
L' <textarea>elemento definisce un campo di input su più righe (un'area di testo):
Esempio
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
L' rowsattributo specifica il numero visibile di righe in un'area di testo.
L' colsattributo specifica la larghezza visibile di un'area di testo.
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Puoi anche definire la dimensione dell'area di testo usando i CSS:
Esempio
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
L'elemento <pulsante>
L' <button>elemento definisce un pulsante cliccabile:
Esempio
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Nota: specificare sempre l' typeattributo per l'elemento pulsante. Browser diversi possono utilizzare tipi predefiniti diversi per l'elemento pulsante.
Gli elementi <fieldset> e <legend>
L' <fieldset>elemento viene utilizzato per raggruppare i dati correlati in un modulo.
L' <legend>elemento definisce una didascalia per l'
<fieldset>
elemento.
Esempio
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
L'elemento <datalist>
L' <datalist>elemento specifica un elenco di opzioni predefinite per un <input>elemento.
Gli utenti vedranno un elenco a discesa delle opzioni predefinite mentre inseriscono i dati.
L' listattributo <input>dell'elemento, deve fare riferimento
idall'attributo <datalist>dell'elemento.
Esempio
<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>
L'elemento <output>
L' <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.php"
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>
Esercizi HTML
Elementi del modulo HTML
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .