Dienst-Tags

8.1 Tag <datalist>

Der Tag <datalist> wird verwendet, um eine Liste vordefinierter Optionen für <input>-Elemente bereitzustellen. Dies ermöglicht es den Benutzern, Werte aus einer Liste vorgeschlagener Optionen auszuwählen, was die Dateneingabe erleichtert und eine genauere und vorhersehbare Eingabe gewährleistet.

Syntax

    
      <datalist id="list-id">
        <option value="Option 1">
        <option value="Option 2">
        <option value="Option 3">
      </datalist>
      <input list="list-id">
    
  

Der Tag <datalist> hat keine spezifischen Attribute, aber ein wichtiger Aspekt ist die Verbindung mit dem <input>-Element über das Attribut list des Letzteren. Das id-Attribut des <datalist>-Tags muss mit dem Wert des list-Attributs des <input>-Elements übereinstimmen.

Beispielverwendung:

    
      <form>
        <label for="browser">Wähle einen Browser:</label>
        <input list="browsers" id="browser" name="browser">
        <datalist id="browsers">
          <option value="Chrome">
          <option value="Firefox">
          <option value="Safari">
          <option value="Opera">
          <option value="Edge">
        </datalist>
        <button type="submit">Absenden</button>
      </form>
    
  

Erklärung

• Element <datalist>: enthaltet eine Liste möglicher Eingabewerte
• Element <input>: enthält das Attribut list, welches es mit dem <datalist>-Element über die ID browsers verbindet

Vorteile der Verwendung von <datalist>

• Benutzerfreundlichkeit: vordefinierte Optionen ermöglichen es Benutzern, Daten schneller und genauer einzugeben
• Reduzierung von Eingabefehlern: durch angebotene vordefinierte Optionen kann die Anzahl der Eingabefehler verringert werden
• Verbesserung der Benutzererfahrung: Benutzer können leicht aus den vorgeschlagenen Optionen auswählen, was das Formular interaktiver und benutzerfreundlicher macht

Beschränkungen von <datalist>

• Begrenzte Stilunterstützung: Optionen innerhalb des <datalist> können nicht so flexibel gestaltet werden wie normale Elemente
• Unterschiede bei der Implementierung: verschiedene Browser können die Optionen unterschiedlich anzeigen, was die Einheitlichkeit der Benutzererfahrung beeinflussen kann

8.2 Tag <output>

Der Tag <output> wird verwendet, um das Ergebnis von Berechnungen oder Aktionen anzuzeigen, die mit JavaScript durchgeführt wurden. Dieser Tag eignet sich perfekt zur Anzeige dynamisch veränderlicher Inhalte, wie z.B. Berechnungsergebnisse, Formulardaten oder andere Werte, die sich in Echtzeit ändern können.

Syntax

    
      <output name="result" for="input-id-1 input-id-2">Ergebnis</output>
    
  

Attribute

• name: definiert den Namen des <output>-Elements, der in JavaScript verwendet werden kann, um den Wert zu erhalten oder zu ändern
• for: enthält eine Liste von IDs der Elemente, mit denen der aktuelle Wert des <output>-Elements verbunden ist. Dies ist nützlich, um die Ausgabe mit mehreren Eingabeelementen zu verknüpfen

Beispielverwendung:

    
      <form oninput="calculateSum()">
        <label for="num1">Zahl 1:</label>
        <input type="number" id="num1" name="num1">
        <br>
        <label for="num2">Zahl 2:</label>
        <input type="number" id="num2" name="num2">
        <br>
        <output id="result" name="result" for="num1 num2">0</output>
      </form>
    
  

    
      function calculateSum() {
        const num1 = parseFloat(document.getElementById('num1').value) || 0;
        const num2 = parseFloat(document.getElementById('num2').value) || 0;
        const sum = num1 + num2;
        document.getElementById('result').value = sum;
      }
    
  

Erklärung

• Element <output>: wird verwendet, um das Ergebnis von Berechnungen anzuzeigen
• Attribute for und name: verbinden das <output>-Element mit den Eingabeelementen und ermöglichen eine einfache Identifizierung in JavaScript
• Funktion calculateSum(): wird aufgerufen, wenn sich die Werte der Eingabeelemente ändern, und aktualisiert den Wert des <output>

Vorteile der Verwendung von <output>

• Einfachheit der Ergebnisanzeige: der Tag <output> bietet eine semantisch korrekte Möglichkeit zur Anzeige von Berechnungsergebnissen oder anderen dynamischen Daten
• Einfache Integration mit JavaScript: es ist einfach, Werte von <output> mit JavaScript zu erhalten und zu ändern, was es ideal für dynamische Webanwendungen macht
• Sauberer Code: die Verwendung von <output> hilft, den HTML-Code sauber und semantisch korrekt zu halten, was die Unterstützung und Lesbarkeit des Codes verbessert

Beschränkungen von <output>

• Begrenzte Stilunterstützung: wie bei <datalist> kann die Stilgestaltung des <output>-Elements im Vergleich zu anderen Elementen eingeschränkt sein
• Abhängigkeit von JavaScript: in den meisten Fällen wird <output> in Kombination mit JavaScript verwendet, was nicht für alle Szenarien geeignet sein könnte

8.3 Tag <label>

Der Tag <label> wird verwendet, um eine Textbeschriftung für ein Formularelement zu erstellen. Er kann mit dem Formularelement auf zwei Arten verbunden werden: über das Attribut for oder indem das Formularelement innerhalb des <label>-Tags eingebettet wird. Diese Methoden ermöglichen es, die Zugänglichkeit von Formularen für Benutzer mit Einschränkungen zu verbessern, z.B. für diejenigen, die Bildschirmleseprogramme verwenden.

Das Attribut for verbindet das Label mit einem Formularelement, indem es die ID des Elements (den Wert des Attributs id) verwendet. Dies ermöglicht es den Benutzern, auf das Label zu klicken, um das verbundene Formularelement zu fokussieren oder zu aktivieren.

Beispielverwendung des for-Attributs:

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

Eingebettetes Formularelement

Ein Formularelement kann innerhalb des <label>-Tags eingebettet werden, was sie ebenfalls miteinander verbindet. In diesem Fall ist das Attribut for nicht erforderlich.

Beispielverwendung eines eingebetteten Formularelements:

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

Vorteile der Verwendung des <label>-Tags

1. Verbesserung der Barrierefreiheit: Labels helfen Benutzern, die Bildschirmleseprogramme verwenden, zu verstehen, welche Daten für jedes Formularelement benötigt werden. Bildschirmleseprogramme lesen Labels zusammen mit den Formularelementen, wodurch das Formular zugänglicher wird.
2. Benutzerfreundlichkeit: Benutzer können auf das Label klicken, um das entsprechende Formularelement zu fokussieren oder zu aktivieren. Dies ist besonders nützlich bei kleinen Elementen wie Kontrollkästchen und Radio-Buttons.
3. Erhöhung der Klarheit: Labels helfen den Benutzern, besser zu verstehen, welche Daten für jedes Formularelement benötigt werden, was die Anzahl der Eingabefehler reduziert.