Elementi del modulo HTML

Questo capitolo descrive tutti gli elementi di modulo HTML.

L'elemento <input>

Il più importante elemento di modulo è <input> elemento.

L'elemento <input> può variare a seconda del type L'attributo, può variare in molte forme.

Nota:Il capitolo successivo spiega tutti i tipi di input HTML.

L'elemento <select> (elenco a discesa)

<select> L'elemento <select> definisceElenco 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 personalmente

<option> L'elemento <option> definisce le opzioni da selezionare.

Di solito, la prima opzione viene visualizzata come selezionata.

Puoi definire un'opzione predefinita aggiungendo l'attributo selected.

Esempio

<option value="fiat" selected>Fiat</option>

Prova personalmente

L'elemento <textarea>

<textarea> L'elemento <textarea> definisce un campo di input multi-linea (Area di testo):

Esempio

<textarea name="message" rows="10" cols="30">
Il gatto stava giocando nel giardino.
</textarea>

Prova personalmente

Il codice HTML sopra viene visualizzato nel browser come:

Il gatto stava giocando nel giardino.

L'elemento <button>

<button> L'elemento definisce un pulsantePulsante:

Esempio

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Prova personalmente

Il codice HTML sopra viene visualizzato nel browser come:

Elementi di modulo HTML5

HTML5 ha aggiunto gli elementi di seguito nella tabella:

  • <datalist>
  • <keygen>
  • <output>

Nota:Per impostazione predefinita, i browser non mostrano gli elementi sconosciuti. Gli elementi nuovi non danneggiano le tue pagine.

Elemento <datalist> HTML5

<datalist> L'elemento specifica una lista di opzioni predefinite per l'elemento

L'utente vedrà una lista a discesa con opzioni predefinite mentre inserisce i dati.

dell'elemento list L'attributo deve riferirsi all'elemento id Proprietà.

Esempio

Impostare valori predefiniti per l'elemento <input> tramite <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 personalmente