www.PHP-Kurs.com

PHP lernen für Einsteiger
und Fortgeschrittene

PHP-Tutorial mit Videos

Sie befinden sich: Startseite » Web-App mit Datenbankanbindung » besondere Formularelemente von jQuery Mobile

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:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe