jQuery Mobile bilden Eingangs
jQuery Mobile Texteingabefeld
Geben Sie das Feld durch den HTML-Standard-Elemente Codierung wird jQuery Mobile fügen ihren Stil, um es attraktiver zu machen aussehen und einfacher auf mobilen Geräten zu verwenden. Sie können auch die neuen HTML5 <input> Typ verwenden:
Beispiele
<div class="ui-field-contain">
<label for="fullname">全名:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">生日:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="你的电子邮箱..">
</div>
</form>
Versuchen »
Tipp: Verwenden Sie Platzhalter eine kurze Beschreibung angeben , die den erwarteten Wert des Eingabefeldes beschreibt:
<input placeholder="sometext">
Textfeld
Für Multi-line kann die Texteingabe <textarea> verwenden.
HINWEIS: Wenn Sie einen Text eingeben, Textfelder automatisch angepasst wird , um die neu hinzugefügte Zeile zu passen.
Beispiele
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
Versuchen »
Sucheingabefeld
type = "search" Art von Eingabefeld ist neu in HTML5, die als Eingabetext Suchfelder definiert:
Beispiele
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>
Versuchen »
Radioknopf
Wenn Benutzer wählen, eine begrenzte Anzahl von Wählen Sie nur eine Option, wenn die Radio-Buttons verwenden.
Um eine Reihe von Radio-Buttons, fügen Sie den Eingang und das entsprechende Etikett mit type = "radio" ist zu schaffen. Der Radiobutton innerhalb des <fieldset> Element umschlossen. Sie können auch ein <legend> Element hinzufügen zu definieren <fieldset> Titel.
Tipp: Verwenden Sie Daten-role = "Kontrollgruppe " , um zusammen zu stellen:
Beispiele
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
Versuchen »
Checkbox
Wenn der Benutzer wählt einen oder mehrere Optionen in einer begrenzten Anzahl von Möglichkeiten, Kisten Einsatz-Check:
Beispiele
<fieldset data-role="controlgroup">
<legend>Choose as many favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
Versuchen »
Weitere Beispiele
Für eine Kombination von horizontalen Radio-Buttons oder Checkboxen, verwenden Sie die data-type = "horizontal":
Sie können auch ein Containerfeld von <fieldset> umgeben verwenden:
Beispiele
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>
Versuchen »
Wenn Sie möchten, dass Ihre Schaltfläche in einem vorgewählten, verwenden Sie den HTML <input> wird geprüft Attribute:
Sie können auf dem Formular Pop in:
Beispiele
<Div data-role = "Popup" id = "myPopup" class = "ui-content">
<Form method = "post" action = "demoform.php">
<Div>
<H3> Anmeldeinformationen </ h3>
<Label for = "usrnm" class = "ui-versteckt-accessible"> Benutzername: </ label>
<Input type = "text" name = "user" id = "usrnm" Platzhalter = "username">
<Label for = "pswd" class = "ui-versteckt-accessible"> Kennwort: </ label>
<Input type = "password" name = "passw" id = "pswd" Platzhalter = "Passwort">
</ Div>
</ Form>
</ Div>
Versuchen »