HTML Formulier Elementen

Dit hoofdstuk beschrijft alle HTML formulierelementen.

<input> element

De belangrijkste formulierelement is <input> Het element.

Het <input> element kan variëren afhankelijk van type Eigenschappen kunnen in verschillende vormen verschijnen.

Opmerking:Het volgende hoofdstuk bespreekt alle HTML invoertypen.

<select> element (keuzelijst)

<select> Het element definieertKeuzelijst:

Voorbeeld

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Probeer het zelf

<option> Het element definieert de te kiezen opties.

Lijsten tonen meestal de eerste optie als geselecteerd.

U kunt de selected eigenschap toevoegen om een vooraf gedefinieerde optie te definiëren.

Voorbeeld

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

Probeer het zelf

<textarea> element

<textarea> Het element definieert een meerdere regel invoerveld (Tekstveld）：

Voorbeeld

<textarea name="message" rows="10" cols="30">
De kat speelde in de tuin.
</textarea>

Probeer het zelf

De bovenstaande HTML-code wordt in de browser weergegeven als:

De kat speelde in de tuin.

<button> Element

<button> Element definieert een klikbareKnop:

Voorbeeld

<button type="button" onclick="alert('Hallo Wereld!')">Klik mij!</button>

Probeer het zelf

De bovenstaande HTML-code wordt in de browser weergegeven als:

HTML5 Formulier Elementen

HTML5 heeft de volgende formulierelementen toegevoegd:

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

Opmerking:Standaard zal de browser onbekende elementen niet weergeven. Nieuwe elementen zullen uw pagina niet beschadigen.

HTML5 <datalist> Element

<datalist> Element definieert een vooraf gedefinieerde optielijst voor het <input> element.

Gebruikers zullen een daling van vooraf gedefinieerde opties zien wanneer ze gegevens invoeren.

van het <input> element's list Eigenschappen moeten verwijzen naar de <datalist> element's id Eigenschappen.

Voorbeeld

Stel een vooraf ingestelde waarde in voor de <input> element via <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>

Probeer het zelf