HTML-Formulare

HTML-Formulare

HTML-Formulare dienen der Eingabe von Daten

• Daten werden an den Server übermittelt
• Zwei HTTP-Methoden, um Daten zu übertragen
• GET: Daten werden als Teil der Request-URL übertragen
• POST: Daten werden im Request-Body übertragen
• Bereiche in der HTML-Seite werden mit <form>-Tag markiert
• action: URL, die die Daten erhalten soll
• method: HTTP-Methode für die Datenübertragung (GET | POST)
• accept-charset: Zeichensatz für die übertragenen Daten

Einzeilige Textfelder

• <input type="text" .../>
• name: Name des Feldes (wird vom Server ausgewertet)
• value: Eingegebener Wert und Vorbelegung
• readonly: Nur Anzeige, keine Eingabe
• size: Angezeigte Größe (in Zeichen)
• maxlength: Maximale Anzahl der Zeichen in Eingabe
• <input type="password" .../>
• wie Text nur werden die Zeichen nicht angezeigt

Beispiel: einzeilige Textfelder

Einzeiliges Textfeld <input type="text" size="30" maxlength="40" value="Hugo"/><br>
Readonly-Feld:
<input type="text" size="30" maxlength="40" value="bleibt" readonly="readonly"/><br>
Passwort-Feld: <input type="password" size="12" maxlength="40"/>

Weitere Typen für <input>

Weitere Typen (type=...) für das <input>-Element aus HTML5

• search: Suchanfragen (anderer Rahmen)
• tel: Telefonnummern (keine Validierung)
• email: E-Mail-Adressen (keine Validierung)
• url: URL (keine Validierung)
• number: Zahlen (Minimum, Maximum, Schrittweite)
• range: Auswahl aus einem Bereich
• date, datetime, datetime-local, time: Datum und Uhrzeit
• color: Farben

Beispiel: Weitere Typen für <input>

Normales Feld: <input type="text"><br>
Suchfeld: <input type="search">

Telefon: <input type="tel"><br>
E-Mail: <input type="email"><br>
URL: <input type="url">

Zahlen: <input type="number" min="0" max="24" step="0.1"><br>
Bereiche: <input type="range">

Datum: <input type="date"><br>
Datum und Uhrzeit: <input type="datetime"><br>
Datum und Uhrzeit: <input type="datetime-local"><br>
Uhrzeit: <input type="time">

Farbe: <input type="color">

Mehrzeilige Textfelder

<textarea ... >Text</textarea>

• Mehrzeiliges Textfeld (bei Bedarf mit Scrollbalken)
• name: Name des Feldes (wird vom Server ausgewertet)
• cols: Anzahl der Spalten
• rows: Anzahl der Zeilen
• wrap: Behandlung von Zeilenumbrüchen (nur HTML5)
• hard: Zeilenumbrüche wie sie sind senden
• soft: Zeilenumbrüche entfernen

Beispiel: Mehrzeiliges Textfeld

Mehrzeiliges Textfeld<br/>
<textarea name="feedback" cols="40" rows="5">Ein kleines
Bächlein namens Duden fließt durch ihren Ort und versorgt
sie mit den nötigen Regelialien.</textarea>

Platzhalter

Über placeholder können Platzhalter angegeben werden

<input type="text" name="user" placeholder="Benutzername">
<input type="password" name="password" placeholder="Passwort">

Auswahllisten

Auswahllisten und Drop-Down-Boxen mit <select>-Tag

• <select>-Tag umschließt die Optionen
• name: Name des Feldes
• size: Anzahl der angezeigten Zeilen (nur bei Auswahlliste)
• multiple: Mehrfachauswahl zulassen (wandelt Drop-Down in Auswahlliste um)
• <option>-Elemente zeigen mögliche Optionen an
• selected: Eintrag ist ausgewählt
• value: Wert, der bei Auswahl des Eintrages übertragen werden soll

Beispiel: Auswahlliste

Auswahlliste<br/>
<select name="fruit" size="2" multiple="multiple">
  <option value="apple" selected="selected">Äpfel</option>
  <option value="pear">Birnen</option>
  <option value="orange">Orangen</option>
  <option value="kiwi" selected="selected">Kiwi</option>
</select>

Beispiel: Drop-Down-Liste

Drop-Down<br/>
<select name="fruit" size="1">
  <option value="apple">Äpfel</option>
  <option value="pear">Birnen</option>
  <option value="orange" selected="selected">
      Orangen</option>
  <option value="kiwi">Kiwi</option>
</select>

Radiobuttons und Checkboxen

• Radiobuttons: Gruppe von Knöpfen bei denen nur einer ausgewählt werden kann
• name: Gruppierung zusammengehöriger Knöpfe
• value: Wert, der übertragen wird
• checked: Button ist aktiviert
• Checkboxen: Gruppe von Eingaben, bei denen beliebig viele ausgewählt werden dürfen
• name: Name der Gruppe
• value: Wert, der bei markierter Box übertragen wird
• checked: Box ist aktiviert

Beispiel: Radio-Button

Radio-Button<br/>
<input type="radio" name="fruit"
      value="apple"/>Äpfel<br/>
<input type="radio" name="fruit"
      value="pear"/>Birnen<br/>
<input type="radio" name="fruit" checked="checked"
      value="orange"/>Orangen<br/>
<input type="radio" name="fruit"
      value="kiwi"/>Kiwi<br/>

Beispiel: Ckeckboxen

Checkboxes<br/>
<input type="checkbox" name="fruit"
      value="apple" checked="checked"/>Äpfel<br/>
<input type="checkbox" name="fruit"
      value="pear"/>Birnen<br/>
<input type="checkbox" name="fruit"
      value="orange" checked="checked"/>Orangen<br/>
<input type="checkbox" name="fruit"
      value="kiwi"/>Kiwi<br/>

Schaltflächen (Button) in Formularen

• Absenden von Formularen
• Standard-Knopf mit <input type="submit" .../>
• Selbst gestalteter Knopf mit <button type= "submit" ...>
• Auslösen von JavaScript-Ereignissen
• Standard-Knopf mit <input type="button" .../>
• Selbst gestalteter Knopf mit <button type="button" ...>
• Attribute
• name: Name des Knopfes
• value: Übertragener Wert und Beschriftung (bei Standard-Knöpfen)

Beispiel: Schaltflächen

<input type="submit" name="Start" value="Startseite"/>

<button type="submit" name="Start" value="Startseite">
   Beschriftung
</button>

<button type="submit" name="Start" value="Startseite">
   <img src="img/html-redbutton.png" width="50"/>
</button>

<input type="button" name="Start" value="Startseite"/>

<button type="button" name="Start" value="Startseite">
   Beschriftung
</button>

<button type="button" name="Start" value="Startseite">
   <img src="img/html-redbutton.png" width="50"/>
</button>

Versteckte Formularfelder

<input type="hidden" .../>

• Formularfelder werden nicht angezeigt
• Daten werden zusammen mit anderen Feldern an den Server gesendet
• Attribute
• name: Name des Feldes
• value: Wert
• Achtung: Es gibt Tools, um die Felder im Browser zu manipulieren

Beschriftung von Formularelementen

<label for="id" ...>

• Verknüpft Beschriftung mit Formularfelde
• Wert im Attribut for bezieht sich auf die ID eines Feldes
• Anwendbar auf <input>, <select> und <textarea>
• Beim Klicken auf den (zugeordneten) Text wird das Eingabefeld selektiert bzw. die Checkbox aktiviert
• Wichtige Unterstützung für Screenreadern

Gruppieren von Formularelementen

<fieldset>...</fieldset>

• Zusammengehörige Formularelemente werden gruppiert
• mit <legend>...</legend> kann eine Gruppenüberschrift vergeben werden
• Browser kann Gruppen kenntlich machen (z. B. durch Linien)
• Gruppen lassen sich durch CSS formatieren

Beispiel: Beschriftung

<label for="name">Nachname:</label>
<input type="text" id="name" name="zuname" value="Hans Müller"/>

<fieldset>
  <legend>Adresse</legend>
  <label for="strasse">Strasse</label>
  <input type="text" id="strasse" name="strasse"  size="25"/><br/>
  <label for="plz">PLZ</label> / <label for="ort">Ort</label>
  <input type="text" id="plz" name="plz"  size="5"/>
  <input type="text" id="ort" name="ort"  size="20"/><br/>
</fieldset>

Autovervollständigung

• Autovervollständigung des Browsers kann mit autocomplete kontrolliert werden
• autocomplete="on": Browser darf Feld vervollständigen
• autocomplete="off": Browser darf Feld nicht vervollständigen
• Vorschläge für Eingabefelder mit <datalist>

Name eines Simpsons:
<input type="text" autocomplete="on" list="simpsons">

<datalist id="simpsons">
  <option value="Homer"/>
  <option value="Marge"/>
  <option value="Lisa"/>
  <option value="Bart"/>
  <option value="Lisa"/>
  <option value="Mona"/>
  <option value="Abe"/>
</datalist>

Formularvalidierung

• HTML 4.01 benötigte JavaScript zur Validierung
• HTML5 bietet eine direkte Validierung von Formularen
• Pflichtfelder, die ausgefüllt werden müssen
• Syntaxregeln für bestimmte Feldtypen (z. B. E-Mail)
• Test auf die Bedingungen eines Feldes (z. B. max und min)
• Beliebige Syntaxregeln als Reguläre Ausdrücke
• Beliebige Validierungen mithilfe von JavaScript

Automatische Validierung

<form>
  E-Mail-Adresse: <input size="30" type="email" name="adresse" id="adresse">
  <br>
  <input type="submit">
</form>

<form>
  Vorname <input size="30" type="text" name="vorname" required><br>
  Name    <input size="30" type="text" name="nachname" required><br>
  Telefon <input size="12" type="tel"  name="telefon"><br>
  <input type="submit">
</form>

Validierung per REGEX

<form>
  Postleitzahl: <input size="5" type="text" name="plz" pattern="[0-9]{5}"><br>
  <input type="submit">
</form>