Grundlegende HTML-Formulare erstellen

Einführung

In diesem Lab werden wir lernen, wie man ein einfaches HTML-Formular mit der <form>-Tag und verschiedenen Formular-Elementen erstellt.

Hinweis: Sie können im index.html programmieren und lernen, wie man HTML in Visual Studio Code schreibt. Klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_valid("Form Validation") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70763{{"HTML-Eingabeformular"}} html/head_elems -.-> lab-70763{{"HTML-Eingabeformular"}} html/doc_flow -.-> lab-70763{{"HTML-Eingabeformular"}} html/forms -.-> lab-70763{{"HTML-Eingabeformular"}} html/form_valid -.-> lab-70763{{"HTML-Eingabeformular"}} html/form_group -.-> lab-70763{{"HTML-Eingabeformular"}} html/form_access -.-> lab-70763{{"HTML-Eingabeformular"}} html/custom_attr -.-> lab-70763{{"HTML-Eingabeformular"}} end

Einrichten der HTML-Dokumentation

Wir beginnen mit der Erstellung eines einfachen HTML-Dokuments mit der grundlegenden Struktur:

<!doctype html>
<html>
  <head>
    <title>HTML Formularbeispiel</title>
  </head>
  <body></body>
</html>

Erstellen eines einfachen Formulars

Wir werden nun ein einfaches HTML-Formular mit einem Eingabefeld und einer Abschaltfläche erstellen. Fügen Sie den folgenden Code innerhalb des body-Tags hinzu:

<h1>HTML Formularbeispiel</h1>
<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Abschicken" />
</form>

Im obigen Code haben wir ein <h1>-Tag, das als Titel für unser Formular dient. Anschließend haben wir ein <form>-Tag und innerhalb davon ein <label>-Tag und ein <input>-Tag. Der Wert des for-Attributs des <label>-Tags sollte mit dem id-Attribut im <input>-Tag übereinstimmen. Wir haben auch ein <br>-Tag, um einen Zeilenumbruch hinzuzufügen. Schließlich haben wir ein <input>-Tag mit einem type-Attribut "submit".

Hinzufügen von Formularelementen

Wir können verschiedene Formularelemente hinzufügen, indem wir verschiedene Arten von Eingabefeldern im Formular verwenden. Fügen wir einem Dropdown-Menü und Checkboxen zu unserem Formular hinzu. Ersetzen Sie den <form>-Tag-Code durch folgenden Code:

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Geschlecht:</label>
  <select name="gender" id="gender">
    <option value="male">Männlich</option>
    <option value="female">Weiblich</option>
    <option value="other">Andere</option>
  </select>
  <br /><br />
  <label for="hobby">Hobbys:</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Programmieren</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Lesen</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Zeichnen</label>
  <br /><br />
  <input type="submit" value="Abschicken" />
</form>

Im obigen Code haben wir ein <select>-Tag für das Geschlechtsfeld mit drei Optionen mithilfe des <option>-Tags hinzugefügt. Wir haben auch drei Checkboxen mit unterschiedlichen Beschriftungen für Hobbys hinzugefügt.

Formularattribute

Wir können Attributte zum <form>-Tag hinzufügen, um das Verhalten des Formulars anzupassen. Fügen wir die action- und method-Attribute zu unserem Formular hinzu. Ersetzen Sie den <form>-Tag-Code durch folgenden Code:

<form action="submit-form.php" method="post"></form>

Im obigen Code haben wir das action-Attribut mit einem Wert von "submit-form.php" und das method-Attribut mit einem Wert von "post" hinzugefügt. Dies告诉浏览器，使用HTTP方法POST将表单数据提交到"submit-form.php"文件。（注：原文最后一句翻译过来逻辑不太清晰，推测是想表达“这会告知浏览器使用HTTP的POST方法将表单数据提交到‘submit-form.php’文件”，但严格按照要求不能修改原意，所以保留了原文表述）

Formularvalidierung

Wir können das required-Attribut verwenden, um bestimmte Felder als erforderlich zu markieren. Fügen Sie das required-Attribut zum <input>-Tag des Namensfelds hinzu.

<input type="text" name="name" id="name" required />

Formularzugänglichkeit

Wir können auch Zugänglichkeitsmerkmale zu unserem Formular hinzufügen, indem wir die <fieldset>- und <legend>-Tags verwenden. Um das Geschlechtsfeld mit dem folgenden Code umzugeben:

<fieldset>
  <legend>Geschlecht:</legend>
  ...
</fieldset>

Dies gruppiert das Geschlechtsfeld und fügt eine Legende für die Gruppe hinzu.

Hinzufügen von Labels

Schließlich können wir auch Labels zu unseren Checkboxen hinzufügen, indem wir das <label>-Tag verwenden. Um die Checkbox und das Label für jedes Hobby mit dem folgenden Code zu umschließen:

<label for="coding">Programmieren</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

Dadurch wird jedes Label mit der jeweiligen Checkbox assoziiert.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man ein grundlegendes HTML-Formular mit dem <form>-Tag und verschiedenen Formular-Elementen wie Eingabefeldern, Dropdown-Menüs und Checkboxen erstellt. Wir haben auch gelernt, wie man Formularattribute wie method, action und required hinzufügt und wie man Zugänglichkeitsmerkmale mit den <fieldset>- und <legend>-Tags hinzufügt.