HTML-Formular
HTML-Formulare werden verwendet, um verschiedene Arten von Benutzereingaben zu sammeln.
Online Beispiele
Erstellen Sie ein Textfeld (Textfeld)
Dieses Beispiel zeigt, wie ein Textfeld in der HTML-Seite zu erstellen. Der Benutzer kann Text in einem Textfeld schreiben.
Erstellen Sie ein Passwort - Feld
Dieses Beispiel zeigt, wie ein HTML-Passwort-Feld zu erstellen.
(Am Ende der Seite Sie weitere Beispiele finden.)
HTML-Formular
Die Form ist eine Region, die Formularelemente enthält.
Formelement ist der Benutzer eingeben Inhalte in Form zu ermöglichen, zum Beispiel: Textfelder (Textfeld), Dropdown-Listen, Optionsfelder (Radio-Buttons), Kontrollkästchen (Checkbox) und so weiter.
Formular verwendet Formular-Tags <form> set:
.
input 元素
.
</form>
HTML-Formulare - Eingabeelemente
In den meisten Fällen sind gebrauchte Form-Tag ist ein Input-Tag (<input>).
Der Eingabetyp ist der Typ-Attribut (Typ) Definitionen. Am häufigsten verwendete Eingabetypen sind wie folgt:
Textfeld (Textfelder)
Durch Textfeld <input type = "text"> Tag zu setzen, wenn der Benutzer Buchstaben, Zahlen zu schreiben und andere Inhalte in einer Form, wird das Textfeld verwendet werden.
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Der Browser zeigt die folgende:
Anmerkung: Die Form selbst nicht sichtbar ist.Auch in den meisten Browsern, die Standardbreite des Textfeldes beträgt 20 Zeichen.
Passwort-Feld
Kennwort Felder vom Tag <input type = "password"> zu definieren:
Password: <input type="password" name="pwd">
</form>
Der Browser zeigt die folgenden Effekte:
Hinweis: Die Passwort - Feld Zeichen werden nicht im Klartext angezeigt, aber mit einem Sternchen oder Punkte statt.
Radioknopf (Radiobuttons)
<Input type = "radio"> Tag definiert allein Tabelle Feldoptionen
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Der Browser zeigt die folgenden Effekte:
Kontrollkästchen (Checkboxen)
<Input type = "checkbox"> definiert eine Checkbox. Die Benutzer müssen eine oder mehrere Optionen aus mehreren gegebenen Möglichkeiten zu wählen.
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Der Browser zeigt die folgenden Effekte:
Schaltfläche Senden (Senden-Schaltfläche)
<Input type = "submit"> definiert den Absenden-Button.
Wenn der Benutzer auf die Schaltfläche OK klickt, wird der Inhalt der Form auf eine andere Datei übertragen werden. Formular action-Attribut definiert den Dateinamen der Zieldatei. Definiert durch die action-Attribut der Datei normalerweise erhalten haben, die Dateneingabe Zusammenhang mit der Behandlung. :
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Der Browser zeigt die folgenden Effekte:
Wenn Sie ein paar Buchstaben in der obigen Textfeld eingeben, und klicken Sie dann auf die OK-Taste und dann die Eingangsdaten auf "html_form_action.php" Seite übertragen wird. Diese Seite zeigt die eingegebenen Ergebnisse.
Weitere Beispiele
Radioknopf (Radio - Buttons)
Dieses Beispiel zeigt, wie Radio-Buttons in HTML zu erstellen.
Kontrollkästchen (Checkboxen)
Dieses Beispiel zeigt, wie ein Kontrollkästchen in einer HTML-Seite zu erstellen. Der Benutzer kann das Kontrollkästchen aktivieren oder deaktivieren.
Einfache Dropdown-Liste
Dieses Beispiel zeigt, wie ein einfaches Dropdown-Listenfeld in einer HTML-Seite zu erstellen. Dropdown-Listenfeld ist eine optionale Liste.
Vorselektion Dropdown-Liste
Dieses Beispiel zeigt, wie ein einfaches Dropdown-Liste mit einem vorgewählten Wert zu schaffen.
Textfelder (Textarea)
Dieses Beispiel zeigt, wie ein Textfeld zu erstellen (ein mehrzeiliges Texteingabesteuerung). Der Benutzer kann Text in einem Textfeld schreiben. Beschreibbare Charakter der Worte ist nicht begrenzt.
Schaltfläche erstellen
Dieses Beispiel zeigt, wie eine Schaltfläche zu erstellen. Sie können auf die Schaltfläche Text kann angepasst werden.
Formularinstanz
Form mit Rand
Dieses Beispiel zeigt, wie mit einem Titel einen Rahmen um die Daten zu ziehen.
Eingabefeld ein und bestätigen Sie das Formular mit den Tasten
Dieses Beispiel zeigt, wie ein Formular Seite hinzuzufügen. Dieses Formular enthält zwei Eingabefelder und eine Bestätigungstaste.
Formular mit Kontrollkästchen
Dieses Formular enthält zwei Kontrollkästchen und eine Bestätigungstaste.
Formular mit Radio - Buttons
Dieses Formular enthält zwei Boxen und eine Bestätigungstaste.
E-Mail von einem Formular
Dieses Beispiel zeigt, wie E-Mail von einem Formular zu senden.
HTML-Formular-Tags
Neu: HTML5 neues Label
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist> New | 指定一个预先定义的输入控件选项列表 |
| <keygen> New | 定义了表单的密钥对生成器字段 |
| <output> New | 定义一个计算结果 |