Latest web development tutorials

jQuery Mobile forment entrée

jQuery Mobile boîte de saisie de texte

Entrez le domaine à travers le HTML standard des éléments de codage, jQuery Mobile va ajouter leur style pour le rendre plus attrayant et plus facile à utiliser sur les appareils mobiles. Vous pouvez également utiliser la nouvelle HTML5 <input> Type:

Exemples

<form method="post" action="demo_form.php">
<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>

Essayez »

Astuce: Utilisez l' espace réservé pour spécifier une brève description qui décrit la valeur attendue du champ d'entrée:

<input placeholder="sometext">

Champ de texte

Pour plusieurs lignes de saisie de texte peut utiliser <textarea>.

REMARQUE: Lorsque vous tapez du texte, les champs de texte seront automatiquement redimensionnées pour correspondre à la ligne nouvellement ajoutée.

Exemples

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>

Essayez »


Recherche boîte d'entrée

type = "rechercher" type de boîte d'entrée est nouvelle en HTML5, qui est défini comme un champs de recherche de saisie de texte:

Exemples

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>

Essayez »


Bouton radio

Lorsque les utilisateurs sélectionnent un nombre limité de sélectionner une seule option lorsque vous utilisez les boutons radio.

Afin de créer une série de boutons radio, ajoutez l'entrée et l'étiquette correspondante avec type = "radio" est. Le bouton radio enfermé dans l'élément <fieldset>. Vous pouvez également ajouter une <legend> pour définir <fieldset> titre.

Astuce: Utilisez data-role = "controlgroup" pour mettre ensemble:

Exemples

<form method="post" action="demo_form.php">
<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>

Essayez »


Checkbox

Lorsque l'utilisateur sélectionne une ou plusieurs options dans un nombre limité de choix, l'utilisation des cases à cocher:

Exemples

<form method="post" action="demo_form.php">
<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>

Essayez »


Exemples

D'autres exemples

Pour une combinaison de boutons radio horizontales ou des cases à cocher, utilisez le type de données = "horizontal":

Exemples

<fieldset data-role="controlgroup" data-type="horizontal">

Essayez »

Vous pouvez également utiliser un champ de conteneur entouré par <fieldset>:

Exemples

<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

Essayez »

Si vous voulez que votre bouton dans un attributs pré-sélectionné, utilisez la balise <input> HTML est cochée:

Exemples

<input type="radio" checked>
<input type="checkbox" checked>

Essayez »

Vous pouvez sauter sur le formulaire:

Exemples

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline"> Afficher le formulaire Popup </a>

<Div data-role = "popup" id = "MyPopup" class = "ui-content">
<Form method = "post" action = "demoform.php">
<Div>
<H3> Informations de connexion </ h3>
<Label for = classe "usrnm" = "ui-hidden-accessible"> Nom d'utilisateur: </ label>
<Input type = "text" name = "user" id = "usrnm" espace réservé = "username">
<Label for = classe "pswd" = "ui-hidden-accessible"> Mot de passe: </ label>
<Input type = "password" name = "passw" id = "pswd" espace réservé = "password">
</ Div>
</ Form>
</ Div>

Essayez »