jQuery Mobile Formulareingabeelemente
jQuery Mobile Texteingabe
Eingabefelder werden mit Standard-HTML-Elementen erstellt, und jQuery Mobile fügt Stile für sie hinzu, damit sie attraktiver aussehen und auf mobilen Geräten einfacher zu verwenden sind. Sie können auch die neuen HTML5-<input>-Typen verwenden:
Beispiel
<div class="ui-field-contain">
<label for="fullname">Vollständiger Name:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">Geburtstag:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" placeholder="Ihre E-Mail..">
</div>
</form>
Selbst ausprobieren »
Tipp:Verwenden Sie placeholder, um eine kurze Beschreibung anzugeben, die den erwarteten Wert des Eingabefelds beschreibt:
<input placeholder="sometext">
Textarea
Für mehrzeilige Texteingaben können Sie <textarea> verwenden.
Hinweis:Wenn Sie Text eingeben, passt sich die textarea automatisch an, um neu hinzugefügte Zeilen aufzunehmen.
Beispiel
<div class="ui-field-contain">
<label for="info">Zusätzliche Informationen:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
Selbst ausprobieren »
Suchfeld
Das input-Element mit type="search" ist neu in HTML5 und definiert ein Textfeld zur Eingabe einer Suche:
Beispiel
<div class="ui-field-contain">
<label for="search">Suche:</label>
<input type="search" name="search" id="search">
</div>
</form>
Selbst ausprobieren »
Optionsfelder
Radiobuttons werden verwendet, wenn der Benutzer nur eine Option aus einer begrenzten Anzahl von Auswahlmöglichkeiten auswählen kann.
Um eine Reihe von Radiobuttons zu erstellen, fügen Sie ein input mit type="radio" und ein entsprechendes Label hinzu. Umschließen Sie die Radiobuttons mit einem <fieldset>-Element. Sie können auch ein <legend>-Element hinzufügen, um den Titel des <fieldset> zu definieren.
Tipp:Verwenden Sie data-role="controlgroup", um die Schaltflächen zu gruppieren:
Beispiel
<fieldset data-role="controlgroup">
<legend>Wählen Sie Ihr Geschlecht:</legend>
<label for="male">Männlich</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Weiblich</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
Selbst ausprobieren »
Checkboxen
Checkboxen werden verwendet, wenn der Benutzer eine oder mehrere Optionen aus einer begrenzten Anzahl von Auswahlmöglichkeiten auswählen kann:
Beispiel
<fieldset data-role="controlgroup">
<legend>Wählen Sie so viele Lieblingsfarben, wie Sie möchten:</legend>
<label for="red">Rot</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Grün</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blau</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
Selbst ausprobieren »
Weitere Beispiele
Um Radiobuttons oder Kontrollkästchen horizontal zu gruppieren, verwenden Sie data-type="horizontal":
Sie können das <fieldset> auch mit einem Feldcontainer umschließen:
Beispiel
<fieldset data-role="controlgroup">
<legend>Bitte wählen Sie Ihr Geschlecht:</legend>
</fieldset>
</div>
Selbst ausprobieren »
Wenn einer Ihrer Buttons vorausgewählt sein soll, verwenden Sie das checked-Attribut von <input> in HTML:
Sie können das Formular in einem Popup platzieren:
Beispiel
<div data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.php">
<div>
<h3>Anmeldeinformationen</h3>
<label for="usrnm" class="ui-hidden-accessible">Benutzername:</label>
<input type="text" name="user" id="usrnm" placeholder="Benutzername">
<label for="pswd" class="ui-hidden-accessible">Passwort:</label>
<input type="password" name="passw" id="pswd" placeholder="Passwort">
</div>
</form>
</div>
Selbst ausprobieren »