close

Einführung Form in HTML: Struktur, Eingabetypen und Beispiele

HTML form ist ein entscheidender Bestandteil der Webentwicklung, der es Benutzern ermöglicht, mit einer Website zu interagieren und Daten an einen Server zu übermitteln. Form werden für eine Vielzahl von Zwecken verwendet, beispielsweise zum Sammeln von Benutzerinformationen form, zum Verarbeiten von Benutzereingaben und zum Ermöglichen von Benutzeraktionen auf einer Website. In diesem Artikel werden wir die Attribute und verschiedenen Arten von Eingabefeldern, Auswahlelementen, Textbereichen und Schaltflächen untersuchen, die häufig in HTML verwendet werden form.

Eingabefelder

  • <input type="text">: Erstellt ein Texteingabefeld, in das Benutzer alphanumerische Zeichen eingeben können.
  • <input type="password">: Zeigt ein Passwort-Eingabefeld an, das die eingegebenen Zeichen maskiert.
  • <input type="email">: Bietet E-Mail-Validierung für Eingabefelder, die eine gültige E-Mail-Adresse erfordern.
  • <input type="number">: Beschränkt die Eingabe nur auf numerische Werte.
  • <input type="checkbox">: Stellt ein Kontrollkästchen dar, das Benutzer aktivieren oder deaktivieren können.
  • <input type="radio">: Stellt ein Optionsfeld dar, mit dem Benutzer eine Option aus einer Gruppe von Optionen auswählen können.
  • <input type="file">: Ermöglicht Benutzern das Auswählen und Hochladen von Dateien.
  • <input type="submit">: Zeigt eine Schaltfläche an, die form beim Klicken sendet.
  • <input type="reset">: Zeigt eine Schaltfläche an, die den auf seinen ursprünglichen Zustand zurücksetzt form.
  • <input type="date">: Bietet eine Datumsauswahl zum Auswählen von Daten.
  • <input type="time">: Ermöglicht Benutzern die Eingabe von Zeitwerten.

Wählen Sie Elemente aus

  • <select>: Erstellt ein Dropdown-Menü mit auswählbaren Optionen.
  • <option>: Definiert eine Option im Dropdown-Menü, platziert im <select> Tag.
  • <optgroup>: Gruppiert verwandte Optionen im Dropdown-Menü.
  • <select multiple>: Ermöglicht Benutzern die gleichzeitige Auswahl mehrerer Optionen, indem sie beim Klicken die Strg-Taste(oder die Befehlstaste auf dem Mac) gedrückt halten.

Textbereiche

<textarea>: Erstellt ein mehrzeiliges Texteingabefeld, in das Benutzer längere Textblöcke eingeben und bearbeiten können. Die Größe kann geändert und mit Attributen wie rows und konfiguriert werden cols, um seine Abmessungen zu definieren.

Tasten

<button>: Stellt eine Schaltfläche dar, die verschiedene Aktionen innerhalb einer auslösen kann form. Es kann verwendet werden, um eine form, per form JavaScript-Funktion zu übermitteln oder zu einer anderen Seite zu navigieren.

Beispielverwendung:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Dieses Beispiel zeigt die Verwendung verschiedener form Elemente, darunter input Felder, textarea, und eine Schaltfläche. Sie können die Elemente und Attribute jederzeit an Ihre spezifischen Anforderungen anpassen. checkbox select dropdown submit form