Tutorials zur Webentwicklung

Umfangreich · Verständlich · Strukturiert

HTML5 Formulare: 4.2 Einzeilige Eingabefelder

Einzeilige Formularfelder bieten Ihnen die Möglichkeit mit dem User zu kommunizieren. Achten Sie dabei stets auf einen sinn­vollen Einsatz von Formularen und nutzen Sie die passenden Elemente und Attribute!

4.2.1 Anwendung

Mit einzeiligen Eingabe­feldern können krurze Informationen, in Form von Frei­texten, vom Nutzer ab­gefragt werden.

Die Möglichkeit von Fehl­einträgen, sowie die miß­bräuchliche Ver­wendung durch die Ein­gabe von HTML und JavaScript - Code ist zu bedenken!

4.2.2 Syntax

Einzeilige Formular­felder werden mit dem Standalone-Tag <input> realisiert. Da wir uns bereits im Vor­feld mit dem Auf­bau von Formularen beschäftigt haben, beginnen wir gleich mit einem etwas komplexeren Beispiel. Die einzelnen Elemente und Attribute werden anschließend besprochen.

Sehen Sie sich das folgende Listing etwas genauer an. Versuchen Sie die genutzten Attribute zu ver­stehen und achten Sie auf den unter­schiedlichen Gebrauch des label Attributs und auf die Aus­wirkungen des value bzw. des placeholder Attributs.

Schicken Sie dazu doch einfach einmal das Formular ab und interpretieren die vom Server empfangenden Daten.

 <form action="zieladresse.php" method="post" name="formularname" target="_blank" autocomplete="off" novalidate>

 <fieldset>
   <legend>Absender</legend>

   <p>
     <label for="vorname">Vorname:</label><br />
       <input id="vorname" name="vorname" type="text" size="40" maxlength="60" value="Vornamen ...">
   </p>

   <p>
     <label>Nachname:<br />
       <input name="nachname" type="text" size="40" maxlength="60" placeholder="Nachname ...">
     </label>
   </p>

   <p>
     <input type="submit" value="Absenden">
     <input type="reset" value="Zurücksetzen">
   <p>

 </fieldset>

 </form>
Syntax: Formular mit einzeiligen Eingabe­feldern
Absender

Ansicht im Browser

4.2.3 Attribute

Die folgenden Attribute können angewendet werden ...

Mögliche Werte Beschreibung
name: Angabe vom Bezeichner­namen
type: Bestimmt den Feld­typen
size: Länge des Eingabe­feldes
maxlegth: Maximale Anzahl der eintrag­baren Zeichen
value: Vorbelegung für ein Eingabe­feld
placeholder: Hinweis im Eingabe­feld
checked: Vor­belegung für bestimmte Eingabe­felder
required: Angabe von Pflicht­feldern
pattern: Stellt eine Anforderung an die eingegebenen Daten
title: Für zusätzliche Informationen an den Nutzer
autofocus: Fokus beim Laden der Seite setzen
spellcheck: Recht­schreib­prüfung ein- / aus­schalten
autocapitalize: Für iOS
autocorrectur: Für iOS

Beschreibung der Attribute und deren Werte ...

<name>

Bezeichner­name, zusammen mit dem Wert des value Attributs, bzw. mit der Text­eingabe im Formular­feld kann so ein Name-Wert-Paar an den Server über­mittelt werden.

 <form>

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname">
     </label>
   </p>

   </fieldset>

 </form>
Syntax: name Attribut
Meine Daten


Ansicht im Browser: name Attribut
<type>

Dient der Defenition des Feldtyps.

 <form>

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text">
     </label>
   </p>

   </fieldset>

 </form>
Syntax: type Attribut
Meine Daten


Ansicht im Browser: name Attribut

Mögliche Feldtypen

text

Dient der Eingabe von Text. Stellt ein einzeiliges Formular­feld zur Ver­fügung.

 <input type="text">
Syntax
Ansicht im Browser
number

Zur Eingabe von nummerischen Werten. Sorgt bei der Verwendung von mobilen Geräten zur Bereit­stellung einer angepassten Tastatur.

 <input type="number">
Syntax
Ansicht im Browser
tel

Zur Eingabe einer Telefon­nummer. Sorgt bei der Verwendung von mobilen Geräten zur Bereit­stellung einer angepassten Tastatur.

 <input type="tel">
Syntax
Ansicht im Browser
url

Zur Eingabe einer Internet­adresse. Sorgt bei der Verwendung von mobilen Geräten zur Bereit­stellung einer angepassten Tastatur.

 <input type="url">
Syntax
Ansicht im Browser
date

Zur Eingabe eines Datums. Sorgt bei der Verwendung von mobilen Geräten zur Bereit­stellung einer angepassten Tastatur.

 <input type="date">
Syntax
Ansicht im Browser
time

Zur Eingabe einer Zeitangabe. Sorgt bei der Verwendung von mobilen Geräten zur Bereit­stellung einer angepassten Tastatur.

 <input type="time">
Syntax
Ansicht im Browser
email

Zur Eingabe einer E-Mail Adresse. Sorgt bei der Verwendung von mobilen Geräten zur Bereit­stellung einer angepassten Tastatur. Praktisch ist auch das die Auto­vervollständigung angepasst wird!

 <input type="email">
Syntax
Ansicht im Browser
password

Stellt eine verdeckte Eingabe zur Verfügung. Die Übertragung erfolgt allerdings im Klartext!

 <input type="password">
Syntax
Ansicht im Browser
range

Stellt einen Schiebe­regler bereit. Der Schieberegler kann vom Nutzer bedient und zur Auswahl einer Zahl genutzt werden.

 <input type="range">
Syntax
Ansicht im Browser
submit

Stellt einen Button zur Ver­fügung. Durch Aktivierung werden die Formular­inhalte, an die im action Attribut des <form> Elements an­gegebene Datei ge­sendet.

Der folgende submit Button wurde mit dem disabled Attribut deaktiviert!

 <input type="submit" disabled>
Syntax
Ansicht im Browser
reset

Stellt einen Butten zur Ver­fügung. Durch Aktivierung werden die Eingabe­felder in den Ausgangs­zustand ver­setzt.

Der folgende reset Button wurde mit dem disabled Attribut deaktiviert!

 <input type="reset" disabled>
Syntax
Ansicht im Browser
color

Zur Aus­wahl einer Farbe. Durch den Browser wird ein Auswahl­feld bereit­gestellt.

 <input type="color">
Syntax
Ansicht im Browser

Weitere <input> Feld­typen werden später beschrieben (Siehe auch: Check­boxen und Radio­button)!

<size>

Bestimmt die Länge des Formular­felds. Die nummerische Angabe des Wertes ist dabei die Anzahl der Breite in Text­zeichen.

 <form>

   <fieldset>
   <legend>Meine Daten</legend>

     <p>
       <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25">
       </label>
     </p>

   </fieldset>

 </form>
Syntax: size Attribut
Meine Daten


Ansicht im Browser: size Attribut
<maxlength>

Bestimmt die maximale Länge der eintragbaren Zeichen. Ist die Angabe größer als die Angabe im size Attribut wird automatisch gescrollt.

 <form>

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25" maxlength="100">
     </label>
   </p>

   </fieldset>

 </form>
Syntax: maxlength Attribut
Meine Daten


Ansicht im Browser: maxlength Attribut
<value>

Vor­belegung für ein Formular­feld. Wenn der Nutzer Nichts Neues in das Eingabe­feld ein­trägt, wird diese Angabe als Wert dem name> Attribut zu­geordnet und beim Ab­senden des Formulars an den Server über­tragen.

 <form>

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25" maxlength="100" value="Name">
     </label>
   </p>

   </fieldset>

 </form>
Syntax: value Attribut
Meine Daten


Ansicht im Browser: value Attribut
<placeholder>

Zeigt einen Hinweis auf dem Eingabe­feld an. Sobald ein Zeichen in diesem Feld ein­gegeben wird, ver­schwindet der Hinweis. Bei einem -durch den Nutzer- un­aus­gefüllten Feld wird dieser Wert nicht an den Server über­tragen.

 <form>

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25" maxlength="100" placeholder="Namen eintragen ...">
     </label>
   </p>

   </fieldset>

 </form>
Syntax: placeholder Attribut
Meine Daten


Ansicht im Browser: placeholder Attribut
<checked>

Vor­belegung für bestimmte Eingabe­felder. Nährere Informiation finden Sie ...

 <input ... checked>
Syntax: checked Attribut
<required>

Besitzt ein Eingabe­feld dieses Attribut, so handelt es sich um ein sog. Pflicht­feld. Dieses Feld muss vor der Über­tragung an den Server aus­gefüllt werden. Der Browser reagiert ent­sprechend beim Ver­such das Formular un­aus­gefüllt zu ver­senden.


Einfache Syntax

 <input ... required>
Syntax: required Attribut

Zusätzlich zum required Attribut kann zur Validierung das pattern und das title Attribut ge­nutzt werden, um eine bestimmte Eingabe­form zu er­zwingen.

Sehen Sie sich das folgende Listing etwas genauer an. Testen Sie die Aus­wirkungen der Attribute (required, pattern, title) in dem Sie die folgenden Formulare mit diversen Daten füllen und ab­senden! Beobachten Sie das Zusammen­spiel der Attribute!


Erweitertes Beispiel

 <form action="zieladresse.php" method="post">

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25" maxlength="100" placeholder="Namen eintragen ...">
     </label>
   </p>

   <p>
     <label for="kundennummer">Kundennummer: *</label><br />
       <input id="kundennummer" name="kundennummer" type="text" size="15" maxlength="10" placeholder="Kundennummer"
       -> required="required">
   </p>

   <p>
     <input type="submit">
     <input type="reset">
   </p>

   </fieldset>

 </form>
Syntax: required Attribut
Meine Daten



Ansicht im Browser: required Attribut

Solange das Pflicht­feld nicht aus­gefüllt ist, wird das Formular nicht über­tragen!

<pattern>

Mit Hilfe des pattern Attributs kann eine bestimmte Anforderung an die ein­gegebenen Daten gestellt werden. Solange die Anforderung nicht er­füllt ist, wird das Formular nicht ab­gesendet!


Beachte: Mögliche Typen für einen Vergleich mit dem pattern Attribut sind:

  • type="text"
  • type="search"
  • type="url"
  • type="tel"
  • type="email"
  • type="password"
 <form action="zieladresse.php" method="post">

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25" maxlength="100" placeholder="Namen eintragen ...">
     </label>
   </p>

   <p>
     <label for="kundennummer">Kundennummer: *:<br />
       <input id="kundennummer" name="kundennummer" type="text" size="25" maxlength="100" placeholder="Kundennummer"
       -> required="required" pattern="[0-9]{6}">
   </p>

   <p>
     <input type="submit">
     <input type="reset">
   </p>

   </fieldset>

 </form>
Syntax: pattern Attribut
Meine Daten



Ansicht im Browser: pattern Attribut

Solange die Anforderung nicht er­füllt ist, wird das Formular nicht ab­gesendet! Durch pattern="[0-9]{6}" werden 6 Ziffern zwischen 0 und 9 erwartet!

Erwartete Eigabe Code
Zahlen pattern="[0-9]{6}"
Text (8 Zeichen) nur Groß­buch­staben pattern="[A-Z]{8}"
Text (min. 8 Zeichen) mit Groß- oder Klein­buch­staben pattern="[A-z]{8,}"
Sonderzeichen (8 Zeichen) pattern="[\W]{8}"
Text (min. 8 Zeichen) mit Groß-, Klein­buch­staben und Sonder­zeichen pattern="(?=.{8,}$)(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).*"

Wie Sie an dieser kurzen Über­sicht bereits erkennen, gibt es eine Viel­zahl an Kombinations­möglich­keiten. Vor dem Ein­satz sollten Sie sich genaustens über die richtige Ver­wendung informieren. Anschließend müssen Sie die Funktion über­prüfen. Wenn eine Anforderung nicht zu er­füllen ist, ist es für den Nutzer schlicht­weg un­möglich das Formular aus­zufüllen!

Wenn Sie im type Attribut den ent­sprechenden Feld­typen (z.B. email) nutzen, dann benötigen Sie das pattern Attribut nicht.

<title>

Mit dem title Attribut kann ein zusätzlicher Informations­text zum Aus­füllen des Feldes notiert werden.

 <form action="zieladresse.php" method="post">

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25" maxlength="100" placeholder="Namen eintragen ...">
     </label>
   </p>

   <p>
     <label for="kundennummer">Kundennummer: *:<br />
       <input id="kundennummer" name="kundennummer" type="text" size="25" maxlength="100" placeholder="Kundennummer"
        -> required="required" pattern="[0-9]{6}" title="Bitte 6 Zahle eingeben">
   </p>

   <p>
     <input type="submit">
     <input type="reset">
   </p>

   </fieldset>

 </form>
Syntax: title Attribut
Meine Daten



Ansicht im Browser: title Attribut
<autofocus>

Beim Laden der Seite wird der Fokus automatisch auf dieses Feld gesetzt. (Ist in diesem Beispiel nicht umgesetz!)

 <form>

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25" maxlength="100" placeholder="Namen eintragen ..." autofocus="autofocus">
     </label>
   </p>

   </fieldset>

 </form>
Syntax: autofocus Attribut
Meine Daten



Ansicht im Browser: autofocus Attribut
<spellcheck>

Unterdrückt die Auto­korrektur bei der Eingabe. Nützlich zum Beispiel bei der Eingabe von Namen.

 <form>

   <fieldset>
     <legend>Meine Daten</legend>

   <p>
     <label for="nachname">Nachname:<br />
       <input id="nachname" name="nachname" type="text" size="25" maxlength="100" placeholder="Namen eintragen ..." spellcheck="false">
     </label>
   </p>

   </fieldset>

 </form>
Syntax: spellcheck Attribut
Meine Daten



Ansicht im Browser: spellcheck Attribut
<autocapitalize>

Unter­drückt auf iOS Geräten die Umschalt­taste.

<input autocapitalize="off">
Syntax: autocapitalize Attribut
<autocorrectur>

Wieder für iOS Geräte, unterdrückt hier die Auto­korrektur.

<input autocorrectur="off">
Syntax: autocorrectur Attribut