HTML5 Textarea-Attribute: Das sollten Sie wissen

admin

Wofür wird <textarea> verwendet?

Die meisten HTML-Formulare bestehen aus einem übergeordneten Formularelement, einer Handvoll von Eingabeelementen (von denen mindestens eines vom Typ „Submit“ ist) und einem oder mehreren Textbereichen. Wenn Sie Formularfelder benötigen, um E-Mail-Adressen, Telefonnummern und andere leicht zu definierende Inhalte aufzunehmen, verwenden Sie den entsprechenden Eingabetyp. Wenn Sie jedoch ein Feld benötigen, das eine beliebige Kombination und Länge von Buchstaben, Zahlen und Symbolen aus reinem Text akzeptieren kann, ist <textarea> das Element, nach dem Sie suchen.

HTML5 Textarea Attribute

HTML5 hat einige neue Attribute eingeführt, die mit Textarea-Elementen verwendet werden können. Hier sind einige der wichtigsten:

  • form: Verknüpft die Textarea mit einem Formular. Verwenden Sie das ID-Attribut des Formulars als Wert für die Textarea-Formattribute. Auf diese Weise können Sie eine Textarea an beliebiger Stelle auf einer Webseite platzieren, auch außerhalb des Formularelements, und dennoch den Inhalt der Textarea einbeziehen, wenn das Formular übermittelt wird.
  • maxlength und minlength: Werden verwendet, um eine Mindest- oder Höchstzahl von Zeichen festzulegen, die in ein Textfeld eingegeben werden können.
  • placeholder: Fügt der Textarea einen Platzhaltertext hinzu, der verschwindet, sobald der Benutzer den Cursor innerhalb des Elements platziert.
  • required: Erfordert, dass die Textarea Inhalt enthält, bevor die Formularübermittlung zugelassen wird.
  • wrap: Gibt an, ob dem in einer Textarea übermittelten Inhalt Hard-Returns hinzugefügt werden sollen oder nicht.

Attribute in Aktion

Hier ein Beispiel dafür, wie einige dieser neuen Attribute verwendet werden können, um das Verhalten einer Textarea zu steuern.

<p>This text area is limited to just 10 characters</p> <textarea cols="50" rows="3" maxlength="10" placeholder="Just 10 characters allowed"></textarea> <p>This text area is readonly and cannot be changed</p> <textarea cols="50" rows="3" readonly>This value can't be changed</textarea>

If we pair those textarea elements with a simple script and button element, we get the following form:

Adam is a technical writer who specializes in developer documentation and tutorials.