HTML5 Praxiswissen - Formular-Feldtypen

Die Formular-Feldtypen, welche HTML anbietet, decken das übliche Standardrepertoire von Dialogelementen grafischer Benutzeroberflächen ab. Dazu gehören Eingabefelder, größere Eingabebereiche, Auswahllisten auch komplexerer Natur, Menüs, Radiobuttons, Checkboxen und Schaltflächen.

Web-Browser greifen, um solche Elemente zu visualisieren, in der Regel auf Dialog-Ressourcen des verwendeten Betriebssystems bzw. dessen Benutzeroberfläche oder Theme zurück. Das heißt: Ein Eingabefeld oder eine Auswahlliste oder eine Checkbox sieht beim Anwender so aus, wie dieser es in seiner Benutzeroberflächenumgebung von anderen Dialogen gewohnt ist. Allerdings sind einige der Formular-Feldtypen in HTML mit Hilfe von CSS stark beeinflussbar. So lassen sich Eingabefelder und Schaltflächen mit Hilfe von CSS fast nach Belieben manipulieren. Andere Kontrollelemente dagegen, wie Checkboxen, Radiobuttons oder File-Upload-Felder, sind optisch weniger stark manipulierbar.

HTML5 führt darüber hinaus noch einige neue Elemente ein, die vor allem im Zusammenhang mit Scripting von Interesse sind.

Einzeilige Eingabefelder

Beispiel

<form action="schritt-2.php">
<p>
<label>Vorname:<br>
<input name="vorname" type="text" size="30"
maxlength="30" value="Michael">
</label>
</p>
<p>
<label>Zuname:<br>
<input name="zuname" type="text" size="30"
maxlength="40" value="Mustermann">
</label>
</p>
<p>
<label>Kennwort:<br>
<input name="kennwort" type="password" size="12" maxlength="12">
</label>
</p>

</form>

Erläuterung

Das Standalone-Tag <input> markiert ein Formularfeld. Es kann sich um sehr unterschiedliche Feldtypen handeln. Wenn Sie nichts anderes angeben, wird das <input>-Tag jedoch als einzeiliges Eingabefeld dargestellt. Der Vollständigkeit halber sollten Sie jedoch die Angabe type="text" notieren. Dadurch zeichnen Sie das Element explizit als einzeiliges Eingabefeld aus.

Einzeilige Eingabefelder im Browser

Jedes Eingabefeld sollte einen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Formularfelddaten werden, wenn ein Formular abgesendet wird, in der Form Name=Wert an die bei <form action=...> angegebene URL übertragen. Und Name ist dabei jeweils das, was Sie beim name-Attribut vergeben.

Ganzen Artikel lesen...

Bei einzeiligen Eingabefeldern ist es weiterhin empfehlenswert, die angezeigte Feldlänge in Anzahl Zeichen mit dem size-Attribut sowie die interne, tatsächliche Feldlänge in Zeichen mit maxlength zu bestimmen. Beide Angaben bedeuten die Anzahl der Zeichen (size = Größe, maxlength = maximal length = maximale Länge). Wenn die interne Feldlänge maxlength größer ist als die angezeigte Feldlänge size (wie im zweiten Eingabefeld des obigen Beispiels), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 31. eingegebenen Zeichen).

Mit dem Attribut value können Sie einen Text bestimmen, mit dem das Feld vorbelegt wird (value = Wert). Wenn Sie kein solches Attribut angeben, bleibt das Feld zu Beginn leer. Interessant ist das value-Attribut im Zusammenhang mit Webanwendungen, die vorhandene Daten aus einem Datenbestand lesen. Diese Daten können beim Generieren der Webseite mit dem Formular in value-Attribute eingelesen werden. Nach diesem Prinzip funktioniert das Ändern von Daten in Webanwendungen.

Wenn einzeilige Eingabefelder dazu dienen sollen, Passwörter oder vergleichbare Geheimdaten aufzunehmen, können Sie anstelle von <input type="text">die Variante <input type="password"> verwenden. Die eingegebenen Zeichen werden dabei durch Platzhalter (Sternchen, Punkte usw.) dargestellt, sodass Personen im Raum des Anwenders den eingegebenen Wert nicht mitlesen können.

Weitere Hinweise

Das input-Element wird an der Stelle platziert, an der es notiert ist. Es erzeugt keine neue Zeile im Textfluss.

Das size-Attribut beeinflusst zwar die Anzeigebreite des Elements. Genauer können Sie die Breite, ebenso wie andere optische Eigenschaften von Eingabefeldern, mit Hilfe von CSS bzw. CSS-Eigenschaften beeinflussen. Einzeilige Eingabefelder sind mit Hilfe von CSS fast beliebig umgestaltbar, egal ob es sich um Schriftarten, Abstände, Farben oder Rahmen handelt.

Verlassen Sie sich bei der serverseitigen Verarbeitung der Formulardaten nicht darauf, dass Inhalte von Feldern mit maxlength-Attribut auf keinen Fall mehr Inhalt haben können als angegeben.

Passwörter werden beim normalen HTTP-Protokoll trotz der verdeckten Eingabe im Klartext über das Internet übertragen. Weisen Sie Anwender in ernsthaften Zusammenhängen auf diese Tatsache bitte explizit hin. Für eine verschlüsselte Kommunikation zwischen Browser und Server gibt es das HTTPS-Protokoll, das der Webserver unterstützen muss.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das input-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <input ... />.

Mehrzeilige Eingabefelder

Mehrzeilige Eingabefelder dienen zur Aufnahme von Kommentaren, Nachrichten usw.

Beispiel

<form action="check-input.php" method="post">
<p>
<label>
Welche HTML-Elemente fallen Ihnen ein, und welche Bedeutung
haben sie:<br>
<textarea name="html_elemente" cols="50"
rows="15" maxlength="10000" wrap="soft">
a = Hyperlink, ...
</textarea>
</label>
</p>
</form>

Erläuterung

Ein mehrzeiliges Eingabefeld wird durch <textarea>...</textarea> markiert. Der Elementinhalt dient dazu, das Eingabefeld mit Inhalt vorzubelegen. Wenn Sie keinen vorbelegten Inhalt wünschen, das Feld also leer sein soll, müssen Sie <textarea></textarea> ohne Inhalt dazwischen notieren.

Mehrzeiliges Eingabefeld im Browser

Jedes mehrzeilige Eingabefeld sollte, ebenso wie ein einzeiliges Eingabefeld, einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Formularfelddaten werden, wenn ein Formular abgesendet wird, in der Form Name=Wert an die bei <form action=...> angegebene URL übertragen. Und Name ist dabei jeweils das, was Sie beim name-Attribut vergeben.

Unbedingt empfehlenswert sind Angaben zur angezeigten Höhe und Breite des Eingabebereichs. Das Attribut rows bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe, während cols die Anzahl der angezeigten Spalten (cols = columns = Spalten) festlegt. »Spalten« bedeutet dabei die Anzahl Zeichen (pro Zeile).

Die Attribute rows und cols bestimmen lediglich die Anzeigegröße des Eingabebereichs, nicht die Länge des erlaubten Textes. Diese können Sie mit Hilfe des maxlength-Attributs bestimmen. Im obigen Beispiel wird die Länge auf 10.000 Zeichen begrenzt.

Mit dem Attribut wrap können Sie das Verhalten des Browsers beim Zeilenumbruch innerhalb des Eingabebereichs beeinflussen (wrap = Umbruch). Voreinstellung ist die Angabe wrap="soft", weshalb Sie diese Angabe auch weglassen können. wrap="soft" bewirkt einen automatischen Zeilenumbruch beim Eingeben von Text. Der Text wirdjedoch nur für die Anzeige umbrochen. Beim Absenden der Daten enthält der eingegebene Text keine Zeilenumbruchzeichen an diesen Stellen. Nur explizit mit der Enter-Taste eingegebene Zeilenumbrüche werden als Zeichen mit übertragen.

Die andere Möglichkeit ist die Angabe wrap="hard". Dabei wird Text nicht automatisch umbrochen. Wenn der Text länger ist als die Anzeigebreite des Eingabefeldes, kann der Anwender quer scrollen. Explizit eingegebene Returns bewirken jedoch einen Zeilenumbruch.

Weitere Hinweise finden Sie im HTML5-Handbuch.

Die passende Ergänzung zu diesem Artikel: