Besonderheiten bei Formularen mit jQuery Mobile

Es gibt einige Besonderheiten und Leckerbissen für die bessere Benutzbarkeit von Formularen.

Platzhalter für Beispieltext - placeholder

Wir können Textfeldern Beispieltext mitgeben, der sobald wir Inhalt in das Textfeld eintragen, verschwindet. Dazu wird der HTML-Befehl <input um das Attribut placeholder="Bitte Nachnamen eintragen" erweitert.

<label for="nachname">Nachname:</label>
<input type="text" name="nachname" id="nachname" placeholder="Nachnamen eintragen">

Diese Funktionalität ist zwar keine besondere Eigenschaft von jQuery Mobile sondern wurde mit HTML5 eingeführt. Trotzdem sehr geschickt und platzsparend.

Label ausblenden

Jetzt haben wir doppelt die Informationen - einerseits im Feld als Platzhalter und andererseits als Feldbeschriftung über das label. Das Label wird nicht angezeigt, wenn wir unseren HTML-Befehl <label um das Attribut class="ui-hidden-accessible" erweitert.

<label for="nachname" class="ui-hidden-accessible">Nachname:</label>
<input type="text" name="nachname" id="nachname" placeholder="Nachnamen eintragen">

Löschbutton im Eingabefeld

Um bestehenden Eingaben in einem Textfeld löschen zu können, gibt es die Variante eines Löschknopfes im Feld. Dazu wird der HTML-Befehl <input um das Attribut data-clear-btn="true" erweitert.

<label for="nachname">Nachname:</label>
<input type="text" name="nachname" id="nachname" data-clear-btn="true">