HTML-Formularelemente

Dieses Kapitel beschreibt alle HTML-Formularelemente.

Das <input>-Element

Der wichtigste Formularelement ist <input> Elementen.

Das <input>-Element basiert auf verschiedenen type Attribute können in verschiedene Formen umgewandelt werden.

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

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

Listen zeigen in der Regel die erste Option als ausgewählt an.

Sie können die selected-Attribut hinzufügen, um eine vordefinierte Option zu definieren.

Beispiel

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

Versuchen Sie es selbst!

Das <textarea>-Element

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

Beispiel

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

Versuchen Sie es selbst!

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

Der Katze wurde im Garten gespielt.

Das <button>-Element

<button> Das Element definiert einen klickbarenKnopf:

Beispiel

<button type="button" onclick="alert('Hello World!')">Klicke 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 werden unbekannte Elemente von Browsern nicht angezeigt. Neue Elemente zerstören nicht Ihre Seite.

HTML5 <datalist>-Element

<datalist> Element legt eine Liste voreingestellter Optionen für das <input>-Element fest.

Der Benutzer sieht eine Liste der voreingestellten Optionen, wenn er Daten eingibt.

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

Beispiel

Mit <datalist> voreingestellte Werte für das <input>-Element setzen:

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