Bases du formulaire jQuery Mobile
jQuery Mobile stylise automatiquement les formulaires HTML pour les rendre plus attrayants et plus conviviaux.
Structure du formulaire mobile jQuery
jQuery Mobile utilise CSS pour styliser les éléments du formulaire HTML, les rendant plus attrayants et plus faciles à utiliser.
Dans jQuery Mobile, vous pouvez utiliser les contrôles de formulaire suivants :
Zone de saisie de texte
Zone de saisie de recherche
Bouton radio
case à cocher
Sélectionner le menu
Curseur
Interrupteur à bascule
Lorsque vous utilisez les formulaires jQuery Mobile, vous devez savoir :
<form> L'élément doit avoir une méthode et un attribut d'action
Chaque élément du formulaire doit avoir un attribut "id" unique. L'identifiant doit être unique sur toutes les pages du site. En effet, le mécanisme de navigation sur une seule page de jQuery Mobile permet d'afficher plusieurs pages différentes en même temps
Chaque élément de formulaire doit avoir une étiquette. Définissez l'attribut for de la balise pour qu'il corresponde à l'identifiant de l'élément
instance
<form method="post" action="demoform.html"> <label for="fname">姓名:</label> <input type="text" name="fname" id="fname"> </form>
Pour masquer les étiquettes, veuillez utiliser la classe ui-hidden-accessible. Ceci est souvent utilisé lorsque vous utilisez l'attribut placeholder d'un élément comme balise : Astuce : Nous pouvons utiliser
data-clear-btn="true" pour ajouter un bouton permettant d'effacer le contenu de la zone de saisie (un 🎜><form method="post" action="demoform.html">
<label for="fname" class="ui-hidden-accessible">姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne exemple
Icône du formulaire jQuery Mobile
Le code du bouton dans le formulaire est l'élément HTML <input> réinitialiser, soumettre). Ils rendront automatiquement les styles et pourront s'adapter automatiquement aux appareils mobiles et aux appareils de bureau :
Instance
<label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-clear-btn="true">
Si vous devez ajouter des styles supplémentaires au bouton <input>, vous pouvez utiliser les attributs data-* dans le tableau suivant :
| 属性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 指定按钮是否有圆角 |
| data-icon | 图标参考手册 | 指定按钮图标 |
| data-iconpos | left | right | top | bottom | notext | 指定图标位置 |
| data-inline | true | false | 指定是否内联按钮 |
| data-mini | true | false | 指定是否为迷你按钮 |
| data-shadow | true | false | 指定按钮是否添加阴影效果 |
Icône d'ajout de bouton :
Instance
<input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮">
Conteneur de champ
Pour créer des étiquettes et des éléments de formulaire look Pour être plus adapté aux écrans larges, veuillez entourer l'élément label/form avec un élément <div> ou <fieldset> avec la classe "ui-field-contain":
Exemple
<input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮">
| ui-field-contain 类基于页面的宽度为标签和表单控件添加样式。当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。 |
Astuce : Pour empêcher jQuery Mobile de styliser automatiquement les éléments cliquables, utilisez les données -role= attribut "aucun" :
Instance
<form method="post" action="demoform.php"> <div class="ui-field-contain"> <label for="fname">姓:</label> <input type="text" name="fname" id="fname"> <label for="lname">姓:</label> <input type="text" name="lname" id="lname"> </div> </form>
 |
|
|---|
