HTML-Formular

HTML-Formulare werden verwendet, um verschiedene Arten von Benutzerinput zu sammeln, und alle Browser unterstützen das <form>-Tag. Definition und Verwendung Das <form>-Tag wird verwendet, um HTML-Formulare für Benutzerinput zu erstellen. Formulare können Eingabe-Elemente wie Textfelder, Kontrollkästchen, Radio-Buttons und Submit-Buttons enthalten.

Online-Beispiel

Textfeld-Eingabefeld erstellen
Dieses Beispiel zeigt, wie man Textfelder in einer HTML-Seite erstellt. Der Benutzer kann Text im Textfeld eingeben.

Passwortfeld-Eingabefeld erstellen
Dieses Beispiel zeigt, wie man ein Passwortfeld in HTML erstellt.

HTML-Formular

Ein Formular ist ein Bereich, der Formularelemente enthält.

Formularelemente erlauben es dem Benutzer, Inhalte in ein Formular einzugeben, z.B.: Textfelder (textarea), Dropdown-Listen, Radio-Buttons (radio)-Knöpfe)、Kontrollkästchen (checkboxes) usw.

Formulare werden mit dem Formular-Tag <form> eingerichtet:

<form>
.
input-Elemente
.
</form>

HTML-Formular - Eingabe-Elemente

Die häufigsten Formularelemente sind die Eingabe-Elemente (<input>).

Der Eingabetyp wird durch das Attribut "type" definiert. Die häufigsten Eingabetypen sind wie folgt:

Textfelder (Text Fields)

Textfelder werden durch das <input type="text">-Tag definiert. Sie werden verwendet, wenn der Benutzer Buchstaben, Zahlen und andere Inhalte in ein Formular eingeben möchte.

<form action="/run/demo-form.php"> 　　
Vorname:<input type="text" name="firstname" size="20"/><br/>Nachname:<input type="text" name="lastname" size="20"/><br/><input type="submit" value="Submit"/> </form>

Der Browser zeigt wie folgt an:

Beachten Sie:Das Formular ist selbst nicht sichtbar. Gleichzeitig ist die Standardbreite der Textfelder in den meisten Browsern 20 Zeichen.

Passwortfeld

Das Passwortfeld wird durch das Label <input type="password"> definiert:

<form action="/run/demo-form.php"> 　　
Passwort:<input type="password" name="pwd"/><input type="submit" value="Submit"/> </form>

浏览器显示效果如下:

Beachten Sie:Der Inhalt des Passwortfelds wird nicht im Klartext angezeigt, sondern durch Sternchen oder Punkte ersetzt.

Radio-Buttons (Radio Buttons)

Das <input type="radio">-Tag definiert die Optionen des Formulars.

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Male<br/><input type="radio" name="sex" value="female"/>Female<input type="submit" value="Submit"/> </form>

浏览器显示效果如下:

Kontrollkästchen (Checkboxes)

<input type="checkbox"> definiert das Kontrollkästchen. Der Benutzer muss eine oder mehrere Optionen aus einer Reihe von gegebenen Optionen auswählen.

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br/><input type="checkbox" name="vehicle" value="Car"/>I have a car<input type="submit" value="Submit"/> </form>

浏览器显示效果如下:

Übermittlungsbutton (Submit Button)

<input type="submit"> definiert den Übermittlungsbutton.

Wenn der Benutzer auf die Bestätigungstaste klickt, wird der Inhalt des Formulars an eine andere Datei gesendet. Das "action"-Attribut des Formulars definiert den Dateinamen des Zieldateis.

<form name="input" action="/run/demo-form.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

更多在线示例

单选按钮(Radio buttons)
本示例演示如何在 HTML 中创建单选按钮。

复选框(Checkboxes)
本示例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。

简单的下拉列表
本示例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

预选下拉列表
本示例演示如何创建一个简单的带有预选值的下拉列表。

文本域(Textarea)
本示例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

创建按钮
本示例演示如何创建按钮。你可以对按钮上的文字进行自定义。

表单示例

带边框的表单
本示例演示如何在数据周围绘制一个带标题的框。

带有输入框和确认按钮的表单
本示例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。

带有复选框的表单
此表单包含两个复选框和一个确认按钮。

带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。

从表单发送电子邮件
此例演示如何从表单发送电子邮件。

HTML 表单标签

New : HTML5新标签