Formularelemente verschiedener Typen

7.1 Textfeld

HTML bietet viele Eingabetypen für Formularelemente, die es den Benutzern ermöglichen, Daten in verschiedenen Formaten einzugeben, wie z.B. Text, E-Mail, Datumsangaben und vieles mehr. Schauen wir uns die verschiedenen Eingabetypen und ihre Verwendung genauer an.

Das Element <input type="text"> wird für die Eingabe von einzeiligem Text verwendet. Dies ist der grundlegendste und am häufigsten verwendete Eingabetyp.

Nutzungsbeispiel:

    
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
    
  

Attribute

• maxlength: begrenzt die maximale Anzahl an Zeichen
• placeholder: Platzhaltertext, der im Eingabefeld angezeigt wird, bis der Benutzer beginnt, Daten einzugeben
• required: gibt an, dass das Feld ausgefüllt werden muss

Beispiel mit Attributen:

    
      <label for="username">Benutzername:</label>
      <input type="text" id="username" name="username" maxlength="20" placeholder="Benutzername eingeben" required>
    
  

7.2 Zahlenfelder

Das Element <input type="number"> wird zur Eingabe numerischer Werte verwendet. Es ermöglicht, die Eingabe auf Zahlen zu beschränken und kann Pfeile zur Erhöhung oder Verringerung des Wertes enthalten.

Nutzungsbeispiel:

    
      <label for="quantity">Menge:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    
  

Attribute

• min: legt den minimal zulässigen Wert fest
• max: legt den maximal zulässigen Wert fest
• step: definiert die Schrittweite der Wertänderung
• value: legt den Anfangswert fest

7.3 Felder für E-Mail-Adressen

Das Element <input type="email"> ist für die Eingabe von E-Mail-Adressen vorgesehen. Es überprüft, ob der eingegebene Text dem E-Mail-Format entspricht.

Nutzungsbeispiel:

    
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="example@example.com">
    
  

Attribute

• multiple: erlaubt die Eingabe mehrerer E-Mail-Adressen, getrennt durch Kommata
• pattern: legt ein reguläres Ausdrucksmuster zur zusätzlichen Überprüfung der eingegebenen Daten fest

Beispiel mit Attributen:

    
      <label for="emails">Email-Adressen (kommagetrennt):</label>
      <input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
    
  

7.4 Felder für Telefonnummern

Das Element <input type="tel"> wird für die Eingabe von Telefonnummern verwendet. Es überprüft nicht das Format der Nummer, ermöglicht jedoch die Eingabe von Muster für die Formatüberprüfung mittels des Attributs pattern.

Nutzungsbeispiel:

    
      <label for="phone">Telefon:</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
    
  

Attribute

pattern: legt ein reguläres Ausdrucksmuster zur Überprüfung des eingegebenen Nummernformats fest.

Beispiel mit Attributen:

    
      <label for="phone">Telefon:</label>
      <input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
    
  

7.5 Felder für Datumsangaben

Das Element <input type="date"> wird zur Eingabe von Datumsangaben verwendet. In unterstützenden Browsern erscheint ein Kalender-Widget zur bequemen Datumsauswahl.

Nutzungsbeispiel:

    
      <label for="birthday">Geburtsdatum:</label>
      <input type="date" id="birthday" name="birthday">
    
  

Attribute

• min: legt das minimal zulässige Datum fest
• max: legt das maximal zulässige Datum fest

Beispiel mit Attributen:

    
      <label for="appointment">Termin:</label>
      <input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
    
  

7.6 Felder für Zeiteingabe

Das Element <input type="time"> wird zur Eingabe von Uhrzeiten verwendet. In unterstützenden Browsern erscheint ein Zeit-Widget zur Auswahl.

Nutzungsbeispiel:

    
      <label for="meeting_time">Besprechungszeit:</label>
      <input type="time" id="meeting_time" name="meeting_time">
    
  

Attribute

• min: legt die minimal zulässige Zeit fest
• max: legt die maximal zulässige Zeit fest
• step: definiert die Schrittweite der Zeitänderung

Beispiel mit Attributen:

    
      <label for="alarm">Wecker:</label>
      <input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
    
  

7.7 Felder für URL-Eingabe

Das Element <input type="url"> wird zur Eingabe von Webadressen (URLs) verwendet. Es überprüft, ob der eingegebene Text dem URL-Format entspricht.

Nutzungsbeispiel:

    
      <label for="website">Webseite:</label>
      <input type="url" id="website" name="website" placeholder="https://example.com">
    
  

Attribute

pattern: legt ein reguläres Ausdrucksmuster zur zusätzlichen Überprüfung der eingegebenen Daten fest.

Beispiel mit Attributen:

    
      <label for="personal_website">Persönliche Webseite:</label>
      <input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
    
  

7.8 Felder für Passworteingabe

Das Element <input type="password"> wird zur Eingabe von Passwörtern verwendet. Die eingegebenen Daten werden verborgen, indem sie durch Zeichen (z.B. Sternchen oder Punkte) ersetzt werden.

Nutzungsbeispiel:

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

Attribute

• maxlength: begrenzt die maximale Anzahl an Zeichen
• placeholder: Platzhaltertext
• required: gibt an, dass das Feld ausgefüllt werden muss

Beispiel mit Attributen:

    
      <label for="new-password">Neues Passwort:</label>
      <input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Passwort eingeben" required>
    
  

7.9 Felder für Wertbereiche

Das Element <input type="range"> wird zur Eingabe von Werten in einem bestimmten Bereich verwendet. Es wird als Schieberegler angezeigt.

Nutzungsbeispiel:

    
      <label for="volume">Lautstärke:</label>
      <input type="range" id="volume" name="volume">
    
  

Attribute

• min: legt den minimal zulässigen Wert fest
• max: legt den maximal zulässigen Wert fest
• step: definiert die Schrittweite der Wertänderung
• value: legt den Anfangswert fest

Beispiel mit Attributen:

    
      <label for="brightness">Helligkeit:</label>
      <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
    
  

7.10 Felder für Farbauswahl

Das Element <input type="color"> wird zur Farbauswahl verwendet. In unterstützenden Browsern erscheint ein Farbwahl-Widget.

Nutzungsbeispiel:

    
      <label for="favcolor">Wähle deine Lieblingsfarbe:</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
  

Attribute

• value: legt die Startfarbe fest.

7.11 Felder für Sucheingaben

Das Element <input type="search"> wird für die Eingabe von Suchanfragen verwendet. In den meisten Browsern verfügt es über integrierte Styles und Funktionen zum Löschen des eingegebenen Textes.

Nutzungsbeispiel:

    
      <label for="search">Suche:</label>
      <input type="search" id="search" name="search" placeholder="Suchanfrage eingeben">