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>