HTML Formulier Elementen

Dit hoofdstuk beschrijft alle HTML formulierelementen.

<input> element

De belangrijkste formulierelement is <input> elementen.

Het <input> element volgens verschillende type Eigenschappen kunnen veranderen in verschillende vormen.

Opmerking:Het volgende hoofdstuk bespreekt alle HTML invoertypes.

<select> element (dalenlijst)

<select> Het element definieertD下拉列表:

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 regels invoerveld (Tekstvak）：

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('Hello World!')">Klik me!</button>

Probeer het zelf

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

HTML5 formulierelementen

HTML5 heeft de volgende formulierelementen toegevoegd:

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

Opmerking:Standaard toont de browser onbekende elementen niet weer. Nieuwe elementen breken uw pagina niet.

HTML5 <datalist> element

<datalist> Element definieert een lijst met vooraf ingestelde opties voor het <input> element.

Gebruikers zullen een dorpel met vooraf ingestelde opties zien wanneer ze gegevens invoeren.

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

Voorbeeld

Stel de <input> element met vooraf ingestelde waarden in 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