# 1.7 Eingabebereiche (textarea)

Ein mehrzeiliges Eingabefeld für Text wird durch das HTML-Element `<textarea>` beschrieben.

Beispiel

Ein Formular für Nutzerfeedback mit einem `textarea`-Feld könnte folgendermaßen aussehen:

    1
    2
    3
    4
    5
    6
    7
    <form action="datenverarbeitung.php" method="post">
      <label for="feedback">Schreiben Sie uns Ihre Meinung:<br>
        <textarea name="feedback" cols="50" rows="10" id="feedback">
          Ihre Nachricht...
        </textarea>
      </label>
    </form>

Zum Element `<textarea>` werden normalerweise die Zeilen- und Spaltenanzahl über die Attribute `rows` und `cols` angegeben. Auch der Eingabebereich kann mit Text gefüllt werden, dazu können Sie zwischen das Anfangs- und End-Tag einen Text schreiben. Geben Sie jedoch keine dieser Eigenschaften an, so erhalten Sie ein leeres, zweizeiliges Textfeld.

## Best Practices

Beim Einsatz von `<textarea>` in Ihren Formularen sollten Sie folgende Best Practices beachten:

- Platzhaltertext verwenden: Das `placeholder`-Attribut bietet einen Hinweistext, der verschwindet, sobald die Nutzer:innen mit der Eingabe beginnt. Dies kann besonders nützlich sein, um Beispiele oder Erwartungen an die Eingabe zu kommunizieren. Beispiel: `placeholder="Ihre Nachricht..."`.

- Autofokus: Das `autofocus`-Attribut setzt beim Laden der Seite automatisch den Fokus auf das `<textarea>`-Element. Dies verbessert die Usability, indem es die Interaktion mit dem Formular erleichtert.

- Zugänglichkeit durch Label: Jede `<textarea>` sollte eindeutig mit einem `<label>` verknüpft sein, wobei die `for`- und `id`-Attribute zur Verknüpfung verwendet werden. Dies erleichtert die Navigation für Nutzer:innen mit Screenreadern und verbessert die allgemeine Zugänglichkeit (Accessibility) des Formulars.

- Erforderliche Eingaben markieren: Das `required`-Attribut stellt sicher, dass das Formular nicht abgesendet werden kann, ohne dass dieses Feld ausgefüllt wurde. Dies trägt dazu bei, dass alle notwendigen Informationen gesammelt werden, bevor das Formular verarbeitet wird.

## Aufgabe: Erstellung eines verbesserten Feedback-Formulars

Aufgabe

Erstellen Sie unter Verwendung der oben genannten Best Practices ein HTML-Formular mit einem `textarea`-Feld für Feedback. Das Formular soll zudem ein Feld für den Namen und einen Absenden-Button enthalten.

Lösung

    1
    2
    3
    4
    5
    6
    7
    <form action="submit_feedback.php" method="post">
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name" required><br>
      <label for="feedback">Feedback:</label><br>
      <textarea id="feedback" name="feedback" rows="10" cols="50" placeholder="Teilen Sie uns Ihre Gedanken mit..." autofocus required></textarea><br>
      <input type="submit" value="Absenden">
    </form>