Tutorials zur Webentwicklung

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>

4.2.3 Attribute

Die folgenden Attribute können angewendet werden ...

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>

Meine Daten

Nachname:

<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>

Meine Daten

Nachname:

Mögliche Feldtypen

text

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

 <input type="text">

number

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

 <input type="number">

tel

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

 <input type="tel">

url

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

 <input type="url">

date

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

 <input type="date">

time

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

 <input type="time">

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">

password

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

 <input type="password">

range

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

 <input type="range">

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>

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>

color

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

 <input type="color">

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>

Meine Daten

Nachname:

<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>

Meine Daten

Nachname:

<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>

Meine Daten

Nachname:

<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>

Meine Daten

Nachname:

<checked>

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

 <input ... checked>

<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>

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>

Meine Daten

Nachname:

Kundennummer: *

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>

Meine Daten

Nachname:

Kundennummer: *

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>

Meine Daten

Nachname:

Kundennummer: *

<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>

Meine Daten

Nachname:

<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>

Meine Daten

Nachname:

<autocapitalize>

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

<input autocapitalize="off">

<autocorrectur>

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

<input autocorrectur="off">