HTML-Formularelemente
HTML-Formular auf einer Webseite kann ein Benutzer Daten eingeben, die an einen Server zur Verarbeitung gesendet wird. Formulare können Papier oder Datenbankformulare ähneln, weil Web-Benutzer die Formulare mit Kontrollkästchen ausfüllen, Optionsfelder oder Textfelder.
Zum Beispiel können Formen verwendet werden Versand- oder Kreditkartendaten eingeben, um ein Produkt zu bestellen, oder kann verwendet werden, um die Suchergebnisse von einer Suchmaschine abzurufen.
Dieses Kapitel beschreibt alle HTML-Formularelemente.
Das <input> Element
Das wichtigste Form Element ist das <input> Element.
Das <input> Element kann auf vielfältige Weise variieren, je nach type Attribute.
Alle HTML-Input-Typen werden im nächsten Kapitel behandelt.
Die <select> Element (Drop-Down List)
Das <select> Element definiert eine Dropdown-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> Versuch es selber " Die <option> Elemente definiert die Optionen auszuwählen.
In der Liste wird normalerweise das erste Element als ausgewählt.
Sie können ein ausgewähltes Attribut hinzufügen eine vordefinierte Option zu definieren.
Das <textarea> Element
Das <textarea> Element definiert ein mehrzeiligen Eingabefeld ( a text area ) :
Beispiel
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea> Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
Das <button> Element
Die <button> Element definiert einen anklickbaren Button:
Beispiel
<button type="button" onclick="alert('Hello World!')">Click Me!</button> Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
HTML5 Formularelemente
HTML5 addierten folgende Formelemente:
- <datalist>
- <keygen>
- <output>
In der Standardeinstellung nicht unbekannte Elemente angezeigt werden Browser. Neue Elemente werden Ihre Seite nicht zerstören.
HTML5 <datalist> Element
Das <datalist> Element gibt eine Liste von vordefinierten Optionen für ein <input> Element.
Die Benutzer eine Dropdown-Liste von vordefinierten Optionen wie sie Eingangsdaten sehen.
Die list Attribut des <input> Element, verweisen auf das id - Attribut des <datalist> Element.
Beispiel
Ein <input> Element mit vordefinierten Werten in einem <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> Versuch es selber " HTML5 <keygen> Element
Der Zweck des <keygen> Elements ist eine sichere Methode , um Benutzer zu authentifizieren.
Das <keygen> Element gibt ein Schlüsselpaar - Generator - Feld in einem Formular.
Wenn das Formular abgeschickt wird, werden zwei Schlüssel erzeugt, einer privaten und einer öffentlichen.
Der private Schlüssel wird lokal gespeichert, und der öffentliche Schlüssel wird an den Server gesendet.
Der öffentliche Schlüssel könnte verwendet werden, um ein Client-Zertifikat zu erzeugen, um den Benutzer in der Zukunft zu authentifizieren.
Beispiel
Ein Formular mit einem Feld keygen:
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form> Versuch es selber " HTML5 <output> Element
Der <output> Element repräsentiert das Ergebnis einer Berechnung (wie man von einem Skript ausgeführt).
Beispiel
Führen Sie eine Berechnung und zeigt das Ergebnis in einem <output> Elemente:
<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form> Versuch es selber " Testen Sie sich mit Übungen!
HTML-Formularelemente
= New in HTML5.
| Etikett | Beschreibung |
|---|---|
| <form> | Definiert ein HTML-Formular für die Benutzereingabe |
| <input> | Definiert eine Eingangssteuer |
| <textarea> | Definiert ein mehrzeiliges Eingabesteuerung (text area) |
| <label> | Definiert ein Label für ein <input> Element |
| <fieldset> | Gruppen verwandte Elemente in einer Form |
| <legend> | Definiert eine Beschriftung für ein <fieldset> Element |
| <select> | Definiert eine Dropdown-Liste |
| <optgroup> | Definiert eine Gruppe von verwandten Optionen in einer Dropdown-Liste |
| <option> | Definiert eine Option in einer Dropdown-Liste |
| <button> | Definiert eine anklickbare Schaltfläche |
| <datalist> | Gibt eine Liste von vordefinierten Optionen für die Eingabesteuerungen |
| <keygen> | Definiert ein Schlüsselpaar - Generator - Feld (for forms) |
| <output> | Legt das Ergebnis einer Berechnung |