HTML Formular und Eingabe

HTML-Formular sammelt Benutzereingabeinformationen

HTML-Formular stellt einen Bereich im Dokument dar, der interaktive Steuerelemente enthält, und sendet die gesammelten Benutzerinformationen an den Webserver.

HTML-Formular enthält normalerweise verschiedene Eingabefelder, Kontrollkästchen, Optionsfelder und Dropdown-Listen.

Hier ist ein Beispiel für ein einfaches HTML-Formular:

  • <form>Element wird verwendet, um ein Formular zu erstellen,actionAttribut definiert die URL des Ziels für die Übermittlung der Formulardaten,methodAttribut definiert die HTTP-Methode (hier wird "post" verwendet) zum Übermitteln der Daten.
  • <label>Element wird verwendet, um Formularelementen Beschriftungen hinzuzufügen, was die Barrierefreiheit verbessert.
  • <input>Element ist eines der am häufigsten verwendeten Formularelemente und kann Texteingabefelder, Passwortfelder, Optionsfelder und Kontrollkästchen erstellen.typeAttribut definiert den Typ des Eingabefelds,idAttribut wird verwendet, um zuzuordnen<label>Element,nameDas Attribut wird verwendet, um das Formularfeld zu identifizieren.
  • <select>Element wird verwendet, um eine Dropdown-Liste zu erstellen,<option>Element wird verwendet, um die Optionen in der Dropdown-Liste zu definieren.

Beispiel

<form action="/" method="post">
    <!-- Texteingabefeld -->
    <label for="name">Benutzername:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- Passworteingabefeld -->
    <label for="password">Passwort:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- Optionsfeld -->
    <label>Geschlecht:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">Männlich</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Weiblich</label>

    <br>

    <!-- Kontrollkästchen -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">Push-Benachrichtigungen abonnieren</label>

    <br>

    <!-- Dropdown-Liste -->
    <label for="country">Land:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- Absenden-Button -->
    <input type="submit" value="Submit">
</Form>

Ausprobieren »
Examples

Online-Beispiel

Beispiel

Hier ist ein Beispiel für ein Formular, das zwei Eingabefelder enthält:

<form action="">
Vorname: <input type="text" name="firstname"><br>
Nachname: <input type="text" name="lastname">
</Form>

Ausprobieren »

Beispiel

Hier ist ein Beispiel für ein Formular, das ein normales Eingabefeld und ein Passwort-Eingabefeld enthält:

<form action="">
Benutzername: <input type="text" name="user"><br>
Passwort: <input type="password" name="password">
</Form>

Ausprobieren »

(Weitere Beispiele finden Sie unten auf dieser Seite.)

HTML-Formular

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

Formularelemente sind Elemente, die es Benutzern ermöglichen, Inhalte einzugeben, wie Textfelder (textarea), Dropdown-Listen (select), Radiobuttons (radio-buttons) und Kontrollkästchen (checkbox).

Wir können das<form>-Tag verwenden, um ein Formular zu erstellen:

Beispiel

<Form>
.
input-Element
.
</Form>

HTML-Formular - Eingabeelemente

Am häufigsten verwendete Formular-Tags sind Input-Tags<input>。

Der Input-Typ wird durch dastypeAttribut definiert.

Wir werden einige häufig verwendete Eingabetypen vorstellen.

Textfeld (Textfelder)

Ein Textfeld wird durch das<input type="text">-Tag definiert. Wenn Benutzer Buchstaben, Zahlen usw. eingeben müssen, verwenden sie das Textfeld.

Beispiel

<Form>
Vorname: <input type="text" name="firstname"><br>
Nachname: <input type="text" name="lastname">
</Form>

Der Browser zeigt Folgendes an:

Vorname:
Nachname:

Hinweis:Das Formular selbst ist nicht sichtbar. In den meisten Browsern beträgt die Standardbreite des Textfelds 20 Zeichen.

Passwortfeld

Ein Passwortfeld wird durch das<input type="password">-Tag definiert:

Beispiel

<Form>
Passwort: <input type="password" name="pwd">
</Form>

Der Browser zeigt Folgendes an:

Passwort:

Hinweis:Passwortfeld-Zeichen werden nicht im Klartext angezeigt, sondern durch Sternchen oder Punkte ersetzt.*Optionsfeld (Optionsfelder).Tag definiert die Optionen für die Optionsfelder:

Optionsfeld (Optionsfelder)

<input type="radio">Der Browser zeigt Folgendes an:

Beispiel

<form action="">
<input type="radio" name="sex" value="male">Männlich<br>
<input type="radio" name="sex" value="female">Weiblich
</Form>

Definieren Sie die Kontrollkästchen.

Male
Female

Kontrollkästchen (Checkboxen)

<input type="checkbox">Der Browser zeigt Folgendes an:

Kontrollkästchen (Checkboxen)

Beispiel

<Form>
<input type="checkbox" name="vehicle[]" value="Bike">Ich mag Fahrräder<br>
<input type="checkbox" name="vehicle[]" value="Car">Ich mag kleine Autos
</Form>

Der Browser zeigt Folgendes an:

Ich mag Fahrräder
Ich mag kleine Autos

Absenden-Schaltfläche (Submit)

<input type="submit">Definiert die Absenden-Schaltfläche.

Wenn der Benutzer auf die Bestätigungsschaltfläche klickt, wird der Inhalt des Formulars an den Server gesendet. Das action-Attribut des FormularsactionDefiniert den Dateinamen auf dem Server.

action-Attribut wird auf die empfangenen Benutzereingabedaten angewendet:

Beispiel

<form name="input" action="html_form_action.php" method="get">
Benutzername: <input type="text" name="user">
<input type="submit" value="Submit">
</Form>

Der Browser zeigt Folgendes an:

Benutzername:

Wenn Sie mehrere Buchstaben in das Textfeld oben eingeben und auf die Bestätigungsschaltfläche klicken, werden die Eingabedaten an diehtml_form_action.php-Datei gesendet, und die Seite zeigt die Eingabeergebnisse an.

Im obigen Beispiel gibt es ein method-Attribut, das verwendet wird, um die Übermittlungsmethode der Formulardaten zu definieren; es kann einen der folgenden Werte annehmen:

  • post: HTTP-POST-Methode, die Formulardaten werden in den Formular-Body aufgenommen und an den Server gesendet, wird verwendet, um sensible Daten wie Benutzername und Passwort zu übermitteln.

  • get: Standardwert, HTTP-GET-Methode, die Formulardaten werden an dieaction-Attribut-URL angehängt und durch?getrennt, wird im Allgemeinen für nicht sensible Informationen wie Paginierung usw. verwendet. Zum Beispiel: https://www.example.com/?page=1, die Seitennummer "1" sind die per get-Methode übermittelten Daten.

Beispiel

<!-- Unten ist ein Formular, das eine GET-Anfrage verwendet, um Daten an die aktuelle URL zu senden; die Methode ist standardmäßig GET. -->
<Form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Speichern</button>
</Form>

<!-- Unten ist ein Formular, das eine POST-Anfrage verwendet, um Daten an die aktuelle URL zu senden. -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Speichern</button>
</Form>

<!-- Formular verwendet fieldset-, legend- und label-Tags -->
<form method="post">
  <fieldset>
    <legend>Titel</legend>
    <label><input type="radio" name="radio"> Wähle mich</label>
  </fieldset>
</Form>

Try itWeitere Beispiele

Optionsfeld (Optionsfelder)
Dieses Beispiel zeigt, wie man Radio-Buttons in HTML erstellt.

Kontrollkästchen (Checkboxen)
Dieses Beispiel zeigt, wie man Kontrollkästchen in einer HTML-Seite erstellt. Benutzer können Kontrollkästchen auswählen oder abwählen.

Einfache Dropdown-Liste
Dieses Beispiel zeigt, wie man ein einfaches Dropdown-Listenfeld erstellt. Das Dropdown-Listenfeld ist eine optionale Liste.

Einfache Dropdown-Liste mit vorausgewählten Werten
Dieses Beispiel zeigt, wie man eine einfache Dropdown-Liste mit vorausgewählten Werten erstellt.

Textbereich (Textarea)
Dieses Beispiel zeigt, wie man einen Textbereich (mehrzeiliges Eingabesteuerelement) erstellt. Benutzer können Text in den Textbereich schreiben. Die Anzahl der Zeichen, die geschrieben werden können, ist nicht begrenzt.

Schaltfläche erstellen
Dieses Beispiel zeigt, wie man eine Schaltfläche erstellt. Sie können den Text auf der Schaltfläche anpassen.

Try itFormularbeispiel

Formular mit Rahmen
Dieses Beispiel zeigt, wie man ein Formular mit einem Titel um die Daten herum zeichnet.

Formular mit Eingabefeldern und Bestätigungsbutton
Dieses Beispiel zeigt, wie man ein Formular zur Seite hinzufügt. Dieses Formular enthält zwei Eingabefelder und einen Bestätigungsbutton.

Formular mit Kontrollkästchen
Dieses Formular enthält zwei Kontrollkästchen und einen Bestätigungsbutton.

Formular mit Optionsfeldern
Dieses Formular enthält zwei Optionsfelder und einen Bestätigungsbutton.

E-Mail aus Formular senden
Dieses Beispiel zeigt, wie man eine E-Mail aus einem Formular sendet.

HTML-Formular-Label

Neu: HTML5 Neue Tags

Tag Beschreibung
<form> Definiert das Formular, in dem Benutzer Daten eingeben können
<input> Definiert das Eingabefeld
<textarea> Definiert das Textfeld (ein mehrzeiliges Eingabesteuerelement)
<label> Definiert das Tag des <input>-Elements, normalerweise der Titel des Eingabefelds
<fieldset> Definiert eine Gruppe verwandter Formularelemente und umschließt sie mit einem äußeren Rahmen
<legend> Definiert den Titel des <fieldset>-Elements
<select> Definiert die Optionen der Dropdown-Liste
<optgroup> Definiert die Optionsgruppe
<option> Definiert die Optionen der Dropdown-Liste
<button> Definiert eine Schaltfläche zum Klicken
<datalist>Neu Gibt eine vordefinierte Optionsliste für Eingabesteuerelemente an
<keygen>Neu Definiert das Schlüsselgeneratorfeld für das Formular
<output>Neu Definiert ein Berechnungsergebnis
Weitere Erweiterungen