Formularbezogene Tags

Dieser Artikel erklärt formbezogene Tags.

Dies erklärt verschiedene Formularfelder wie Texteingaben und Dropdown-Menüs.

YouTube Video

Formularbezogene Tags

<form>-Tag

1<form action="/submit" method="post">...</form>

• Das <form>-Tag wird verwendet, um das gesamte Formular zu definieren.
• Das action-Attribut gibt das Ziel an und das method-Attribut die Methode (GET oder POST).
• Sie können auch das Attribut target angeben, ähnlich wie beim <a>-Tag.

<input>-Tag (Text-Eingabefeld)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> erstellt ein einzeiliges Texteingabefeld. Benutzer können beliebigen Text eingeben.

• Das Attribut placeholder gibt einen beschreibenden Text an, der erscheint, wenn das Eingabefeld leer ist. Dies hilft den Benutzern, die erwartete Eingabe leicht zu verstehen. Dieser Text verschwindet automatisch, sobald die Eingabe beginnt.

  • placeholder eignet sich, um ergänzende Informationen bereitzustellen, und ist nicht geeignet für wichtige Anweisungen wie erforderliche Eingaben. In solchen Fällen sollten Sie ein Label verwenden.

<input>-Tag (Passwort-Eingabefeld)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> erstellt ein Feld zur Eingabe eines Passworts. Die eingegebenen Zeichen werden verborgen und maskiert, um Sicherheit zu gewährleisten.

<input>-Tag (E-Mail-Adresse Eingabefeld)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> erstellt ein Feld zur Eingabe einer E-Mail-Adresse und enthält eine Validierung, um das korrekte E-Mail-Format sicherzustellen.

<input>-Tag (Kontrollkästchen)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> erstellt ein Kontrollkästchen. Wenn mehrere Optionen verfügbar sind, können Benutzer mehrere Elemente auswählen.

<input>-Tag (Optionsfeld)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> erstellt eine Optionsschaltfläche, die es Benutzern erlaubt, nur eine Option aus einem Satz auszuwählen.

<input>-Tag (Absenden-Button)

1<input type="submit" value="Submit">

• <input type="submit"> erstellt eine Schaltfläche zum Absenden der Daten im Formular.
• Der Wert des value-Attributs wird in die Formulardaten aufgenommen, wenn das Formular abgesendet wird.

<input>-Tag (Reset-Schaltfläche)

1<input type="reset" value="Reset">

• <input type="reset"> erzeugt einen Button, der alle Eingabewerte im Formular zurücksetzt.

<input>-Tag (verstecktes Feld)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> erstellt ein verstecktes Feld, das nicht auf dem Bildschirm angezeigt wird und verwendet wird, um Daten an das Backend zu senden, wenn das Formular abgeschickt wird.

<input>-Tag (Farbwähler)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> zeigt einen Farbwähler an und erstellt ein Eingabefeld, in dem Benutzer eine Farbe auswählen können.

<input>-Tag (Datumseingabefeld)

1<input type="date" name="birthday">

• <input type="date"> erstellt ein Datumseingabefeld, das einen Kalender zur Auswahl eines Datums anzeigt.

<input>-Tag (Zeiteingabefeld)

1<input type="time" name="appointment_time">

• <input type="time"> erstellt ein Feld zur Eingabe der Uhrzeit, und ein Zeitwähler wird angezeigt.

<input>-Tag (Dateieingabefeld)

1<input type="file" name="resume">

• <input type="file"> erstellt ein Eingabefeld, in dem Benutzer Dateien auswählen und hochladen können.
• Das enctype-Attribut des form-Tags muss auf multipart/form-data gesetzt werden.

<input>-Tag (Zahl)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> erzeugt ein Zahlen-Eingabefeld, das das Festlegen des Minimalwerts, Maximalwerts und Schritts (Erhöhungs-/Verringerungsbetrag) ermöglicht.

<input>-Tag (Bereichauswahlfeld für Zahlen)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> erzeugt ein Eingabefeld, in dem Nutzer einen Wert innerhalb eines Bereichs mit einem Schieberegler auswählen können.

<textarea>-Tag

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• Das <textarea>-Tag erzeugt ein mehrzeiliges Texteingabefeld. Es ist geeignet für die Eingabe von langen Texten oder Kommentaren.

<select>-Tag

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• Das <select>-Tag erzeugt ein Dropdown-Menü, und Optionen werden mit dem <option>-Tag definiert. Nutzer können ein oder mehrere Elemente auswählen.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Um Mehrfachauswahlen zu ermöglichen, fügen Sie das Attribut multiple hinzu. Das Angeben dieses Attributs zeigt die Optionen als Listenfeld an.

<optgroup>-Tag

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• Das <optgroup>-Tag wird verwendet, um verwandte Elemente zusammen zu gruppieren. Das label-Attribut ermöglicht es Ihnen, einen Gruppennamen festzulegen, um den Benutzern klare Optionen zu bieten, selbst wenn die Liste lang ist.

<label>-Tag

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• Das <label>-Tag definiert Bezeichnungen für Eingabefelder, Kontrollkästchen und Optionsknöpfe und verbessert dadurch die Benutzerfreundlichkeit und Zugänglichkeit.
• Zum Beispiel kann ein Klick auf ein Label ein Eingabefeld fokussieren oder eine Checkbox umschalten.

<fieldset>-Tag

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• Das <fieldset>-Tag gruppiert verwandte Formularelemente, und das <legend>-Tag bietet einen Titel für die Gruppe.

<button>-Tag

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• Das <button>-Tag definiert einen klickbaren Button, der Formularübermittlungen oder andere Aktionen auslöst.

  Wenn type="button" angegeben ist, fungiert es als regulärer Button. Ein Klick darauf reicht das Formular nicht ein und löst keine anderen Standardaktionen aus. Es wird verwendet, wenn Sie benutzerdefinierte Aktionen mit JavaScript festlegen möchten.

  Wenn type="submit" angegeben ist, fungiert es als Übermittlungsbutton für das Formular. Wenn dieser Button geklickt wird, wird das ihn enthaltende Formular übermittelt.

  Wenn type="reset" angegeben ist, funktioniert es als Zurücksetzen-Button für das Formular. Ein Klick darauf setzt alle Eingabefelder im Formular zurück und stellt ihren ursprünglichen Zustand wieder her.

  Wenn das type-Attribut nicht angegeben ist, können einige Browser es als type="submit" behandeln, daher wird empfohlen, den Typ explizit anzugeben, um das beabsichtigte Verhalten zu gewährleisten.

• Das <button>-Tag kann anderen HTML-Inhalt zwischen den öffnenden und schließenden Tags enthalten, wodurch es möglich ist, Schaltflächen mit Symbolen oder komplexem Text zu erstellen.

• Bei einem Absende-Button, der das <input>-Tag verwendet, wird der Wert des value-Attributs in die Formulardaten aufgenommen, aber bei einem <button>-Tag wird er standardmäßig nicht gesendet.

  Durch Festlegen von name- und value-Attributen für ein <button>-Tag kann dessen Wert als Formulardaten gesendet werden.

<datalist>-Tag

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• Das <datalist>-Tag bietet eine Liste von wählbaren Optionen für das <input>-Element. Benutzer können entweder aus der Liste wählen oder einen eigenen Wert eingeben.

<output>-Tag

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• Das <output>-Tag zeigt das Ergebnis von Berechnungen oder Benutzerinteraktionen an. Es wird verwendet, um Berechnungsergebnisse dynamisch innerhalb von Formularen oder Skripten anzuzeigen.
• Für das for-Attribut geben Sie die IDs der Formularfelder, die Sie verknüpfen möchten, durch Leerzeichen getrennt an.

<progress>-Tag

1<progress value="70" max="100">70%</progress>

• Das <progress>-Tag zeigt den Benutzern den Fortschritt einer Aufgabe an. Es kann beispielsweise den Fortschritt eines Dateidownloads oder einer Installation visuell anzeigen.

<meter>-Tag

1<meter value="0.6">60%</meter>

• Das <meter>-Tag stellt eine numerische Messung innerhalb eines bekannten Bereichs dar. Es wird verwendet, um Messungen wie die Festplattennutzung oder eine Tankanzeige innerhalb eines bestimmten Bereichs anzuzeigen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video