Verschiedene Eingabefelder
Suchfeld - search
Suchfeld - mit kleiner Lupe und Löschicon:
<input type="search" name="suche" id=" suche " placeholder="Suchen nach ...">
Radio Buttons - es kann nur einen geben (Highländer)
Bei Radio-Buttons kann nur eine Option ausgewählt werden. Die Felder "kennen" sich gegenseitig über das Feld name
. Ist bereits eine Option ausgewählt und wird eine andere Option ausgewählt, verliert die erste Option die Auswahl. Es kann nur eine Auswahl durch den Nutzer erfolgen!
<fieldset data-role="controlgroup">
<legend>Anrede auswählen:</legend>
<label for="herr">Herr</label>
<input type="radio" name="anrede" id="herr" value="herr">
<label for="frau">Frau</label>
<input type="radio" name="anrede" id="frau" value="frau">
</fieldset>
Vorauswahl einer Möglichkeit über das Attribut checked
:
<input type="radio" checked>
<input type="checkbox" checked>
Checkboxen - Mehrfachauswahl möglich
<fieldset data-role="controlgroup">
<legend>Essen auswählen:</legend>
<label for="banane">Banane</label>
<input type="checkbox" name="essen" id="banane" value="banane">
<label for="tomate">Tomate</label>
<input type="checkbox" name="essen" id="tomate" value="tomate">
<label for="spinat">Spinat</label>
<input type="checkbox" name="essen" id="spinat" value="spinat">
</fieldset>
Vorauswahl einer Möglichkeit über das Attribut checked
:
<input type="checkbox" checked>
Beschriftung von zugehörigen Gruppen
<fieldset data-role="controlgroup">
<legend>Anrede auswählen:</legend>
</fieldset>
Select Menüs
Über Auswahlfelder kann aus einem vorgegebenen Inhalt etwas ausgewählt werden. Die Darstellung zwischen Apple und Android ist extrem unterschiedlich!
<fieldset class="ui-field-contain">
<label for="tag">Tag auswählen</label>
<select name="tag" id="tag">
<option value="mo">Montag</option>
<option value="di">Dienstag</option>
<option value="mi">Mittwoch</option>
</select>
</fieldset>
Unterteilung von "Select Menüs" in Gruppen funktioniert über <optgroup>
Elementen innerhalb von <select>
<select name="tag" id="tag">
<optgroup label="Wochentage">
<option value="mo">Montag</option>
<option value="di">Dienstag</option>
<option value="mi">Mittwoch</option>
<option value="do">Donnerstag</option>
<option value="fr">Freitag</option>
</optgroup>
<optgroup label="Wochenende">
<option value="sa">Samstag</option>
<option value="so">Sontag</option>
</optgroup>
</select>
Auswahl über Schieberegler: range
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
Folgende Attribute werden für den Typ "range" benötigt:
- max - der maximal mögliche Wert
- min - der minimal mögliche Wert
- step - die Schrittweite bei Änderung des Wertes
- value - der Vorgabewert
Sollen der Wert als Zahl sichtbar sein (was er in der Standardeinstellung wäre) kann das mit dem Attribut data-show-value="true"
angeschaltet werden.
<input type="range" data-show-value="true">
Soll diese Zahl noch größer erscheinen (was Sinn macht, wenn ein Finger den Schiebeschalter verdeckt) wird dies über das Attribut data-popup-enabled="true" umgeschaltet:
<input type="range" data-popup-enabled="true">
Wenn die linke Seite des Schiebeschalters mit Farbe unterlegt sein soll:
<input type="range" data-highlight="true">
"Lichtschalter" - Flip Toggle Switch
<label for="switch">Schalter ala Lichtschalter:</label>
<input type="checkbox" data-role="flipswitch" name="lichtschalter"
id="lichtschalter">
Diesen Schalter kann man nur ein- oder ausschalten.
Und die Beschriftung kann geändert werden - allerdings darf der Beschriftungstext nicht zu lange werden!
<input type="checkbox" data-role="flipswitch" name="lichtschalter"
id="lichtschalter" data-on-text="ein" data-off-text="aus">
Und wenn die Voreinstellung "eingeschaltet" sein soll:
<input type="checkbox" data-role="flipswitch" name="lichtschalter"
id="lichtschalter" checked>
Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).
Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button: