HTML5-Handbuch - die neuen Features von HTML5

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.
8.2.1      Einzeilige Eingabefelder
Beispiel
    

    

    Vorname:

    
    
    

    

    Zuname:

    
    
    

    

    Kennwort:

    
    
    

    
    

Erläuterung
    Das Standalone-Tag

markiert ein Formularfeld. Es kann sich um sehr unterschiedliche Feldtypen handeln. Wenn Sie nichts anderes angeben, wird das

-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.
    Bild 8.4: 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

angegebene URL übertragen. Und Name ist dabei jeweils das, was Sie beim
name
-Attribut vergeben.
    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

die Variante

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

.
Referenzinformationen
    Elementreferenz