HTML-Formularelemente

Dieses Kapitel beschreibt alle HTML-Formularelemente.

Das <input> Element

Der wichtigste Formularelement ist <input> Element.

Das <input> Element variiert je nach type Attribute können in verschiedene Formen umgewandelt werden.

Anmerkung:Das nächste Kapitel erläutert alle HTML-Eingabetypen.

<select> Element (Dropdown-Liste)

<select> Das Element definiertDropdown-Liste:

Beispiel

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

Versuchen Sie es selbst

<option> Das Element definiert die auswählbaren Optionen.

Die Liste zeigt normalerweise die erste Option als ausgewählt an.

Sie können die selected-Attribut hinzufügen, um vorgegebene Optionen zu definieren.

Beispiel

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

Versuchen Sie es selbst

<textarea> Element

<textarea> Das Element definiert ein mehrzeiliges Eingabefeld (Textfeld）：

Beispiel

<textarea name="message" rows="10" cols="30">
Der Katze spielte im Garten.
</textarea>

Versuchen Sie es selbst

Der obige HTML-Code wird im Browser wie folgt angezeigt:

Der Katze spielte im Garten.

<button>-Element

<button> Das Element definiert eine klickbareSchaltfläche:

Beispiel

<button type="button" onclick="alert('Hallo Welt!')">Klick mich!</button>

Versuchen Sie es selbst

Der obige HTML-Code wird im Browser wie folgt angezeigt:

HTML5 Formularelemente

HTML5 hat die folgenden Formularelemente hinzugefügt:

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

Anmerkung:Standardmäßig zeigen Browser unbekannte Elemente nicht an. Neue Elemente brechen Ihre Seite nicht.

HTML5 <datalist>-Element

<datalist> Element gibt eine Liste vorgegebener Optionen für das <input>-Element an.

Die Benutzer sehen eine Liste der vorgegebenen Optionen, wenn sie Daten eingeben.

des <input>-Elements referenzieren list Das Attribut muss auf den <datalist>-Elementen id Attribute.

Beispiel

Durch <datalist> festgelegte Eingabeoptionen für das <input>-Element festlegen:

<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>

Versuchen Sie es selbst