HTML-Eingabesteuerung

Einführung

Im HTML wird das <input>-Tag verwendet, um verschiedene Arten von Eingabefeldern zu erstellen. In diesem Lab wird gezeigt, wie man verschiedene Arten von Eingabefeldern in einem HTML-Formular mit dem <input>-Tag und dem entsprechenden type-Attribut erstellt.

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

Erstelle ein Text-Eingabefeld

Erstellen Sie eine neue HTML-Datei mit dem Namen index.html. Diese Datei wird den HTML-Code für das Eingabeformular enthalten.

Um ein Text-Eingabefeld zu erstellen, verwenden Sie folgenden HTML-Code:

<label for="username">Benutzername:</label><br />
<input type="text" id="username" name="username" /><br />

Im Code haben wir ein Label für das Eingabefeld erstellt, das type-Attribut auf "text" gesetzt und ein id- und ein name-Attribut zugewiesen. Dieser Code wird ein Text-Eingabefeld für den Benutzer erstellen, um seinen Benutzernamen einzugeben.

Erstelle ein Passwort-Eingabefeld

Um ein Passwort-Eingabefeld zu erstellen, verwenden Sie folgenden Code:

<label for="password">Passwort:</label><br />
<input type="password" id="password" name="password" /><br />

Im Code haben wir das type-Attribut auf "password" gesetzt, was die von dem Benutzer eingegebenen Passwortzeichen verbergen wird.

Erstelle ein Checkbox-Eingabefeld

Um ein Checkbox-Eingabefeld zu erstellen, verwenden Sie folgenden Code:

<label for="vehicle1">Ich habe ein Auto</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">Ich habe ein Fahrrad</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">Ich habe ein Boot</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />

Im Code haben wir drei Checkboxen für den Benutzer erstellt, von denen er auswählen kann. Beachten Sie, dass jede Checkbox ein unterschiedliches id, name und value-Attribut hat.

Erstelle ein Radio-Eingabefeld

Um ein Radio-Eingabefeld zu erstellen, verwenden Sie folgenden Code:

<label for="male">Männlich</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Weiblich</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Andere</label>
<input type="radio" id="other" name="gender" value="other" />

Im Code haben wir drei Radiobuttons für den Benutzer erstellt, um ihr Geschlecht auszuwählen. Beachten Sie, dass jeder Radiobutton ein unterschiedliches id, name und value-Attribut hat.

Erstelle eine Submit-Schaltfläche

Um eine Abschicken-Schaltfläche zu erstellen, verwenden Sie folgenden Code:

<input type="submit" value="Abschicken" />

Im Code haben wir eine Schaltfläche erstellt, die der Benutzer klicken wird, um das Formular abzuschicken.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man verschiedene Arten von Eingabefeldern in einem HTML-Formular mit der <input>-Tag und dem entsprechenden type-Attribut erstellt. Wir haben Text-Eingabefelder, Passwort-Eingabefelder, Checkbox-Eingabefelder, Radio-Eingabefelder und eine Abschicken-Schaltfläche erstellt. Sie können diese Beispiele als Ausgangspunkt für die Erstellung komplexerer HTML-Formulare verwenden, die Benutzer-Eingaben sammeln.