entrée de formulaire jQuery Mobile

jQuery Mobile Éléments de saisie de formulaire

Boîte de saisie de texte jQuery Mobile

Les champs de saisie sont encodés via des éléments HTML standard, jQuery Mobile les stylisera pour les rendre plus attrayants et plus faciles à utiliser sur les appareils mobiles. Vous pouvez également utiliser le nouveau type HTML5 <input> :

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>文本输入</h1>
  </div>

  <div data-role="main" class="ui-content">
    <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>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur " Bouton "Exécuter l'instance" pour afficher l'instance en ligne

Conseil : Veuillez utiliser un espace réservé pour spécifier une brève description pour décrire la valeur attendue du champ de saisie :

<input placeholder="sometext">

Zone de texte

Pour la saisie de texte sur plusieurs lignes, utilisez <textarea>.

Remarque : Lorsque vous tapez du texte, le champ de texte se redimensionne automatiquement pour s'adapter aux lignes nouvellement ajoutées.

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>文本框</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.php">
       <div class="ui-field-contain">
        <label for="info">附加信息:</label>
        <textarea name="addinfo" id="info"></textarea>
      </div>
      <input type="submit" data-inline="true" value="提交">
    </form> 
    <p><b>注意：</b> 文本框会根据你的输入自动调整文本框的高度，你可以在以上文本框输入内容，查看效果。</p>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Zone de saisie de recherche

La zone de saisie de type Type="search" est une nouveauté en HTML5, qui définit un champ de texte pour la recherche de saisie :

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <div class="ui-field-contain">
        <label for="search">搜索：</label>
        <input type="search" name="search" id="search" placeholder="搜索内容...">
      </div>
      <input type="submit" data-inline="true" value="提交">
    </form> 
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

radio bouton

Utilisez les boutons radio lorsque l'utilisateur sélectionne une seule option parmi un nombre limité de choix.

Pour créer une série de boutons radio, ajoutez une entrée avec type="radio" et le label correspondant. Entourez les boutons radio dans un élément <fieldset> Vous pouvez également ajouter un élément <legend> pour définir le titre du <fieldset>.

Conseil : Veuillez utiliser data-role="controlgroup" pour regrouper les boutons :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="main" class="ui-content">
    <form method="post" action="demoform.php">
      <fieldset data-role="controlgroup">
      <legend>请选择您的性别：</legend>
        <label for="male">男性</label>
        <input type="radio" name="gender" id="male" value="male">
        <label for="female">女性</label>
        <input type="radio" name="gender" id="female" value="female"> 
      </fieldset>
        <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

case à cocher

Lorsque l'utilisateur est dans un nombre limité Cochez les cases lorsque vous sélectionnez une ou plusieurs options dans la sélection :

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>复选框</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.php">
      <fieldset data-role="controlgroup">
        <legend>请选择您喜爱的颜色：</legend>
          <label for="red">红色</label>
          <input type="checkbox" name="favcolor" id="red" value="red">
          <label for="green">绿色</label>
          <input type="checkbox" name="favcolor" id="green" value="green">
          <label for="blue">蓝色</label>
          <input type="checkbox" name="favcolor" id="blue" value="blue">  
      </fieldset>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez le bouton "Exécuter l'instance" pour afficher les instances en ligne

Plus d'instances

Pour combiner des boutons radio ou des cases à cocher horizontalement, veuillez use data-type="horizontal":

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>单选按钮和复选框</h1>
  </div>

  <div ddata-role="main" class="ui-content">
    <form method="post" action="demoform.php">
      <fieldset data-role="controlgroup" data-type="horizontal">
      <legend>请选择您的性别：</legend>
        <label for="male">男性</label>
        <input type="radio" name="gender" id="male" value="male">
        <label for="female">女性</label>
        <input type="radio" name="gender" id="female" value="female"> 
      </fieldset>

      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>请选择您喜爱的颜色：</legend>
          <label for="red">红色</label>
          <input type="checkbox" name="favcolor" id="red" value="red">
          <label for="green">绿色</label>
          <input type="checkbox" name="favcolor" id="green" value="green">
          <label for="blue">蓝色</label>
          <input type="checkbox" name="favcolor" id="blue" value="blue">  
      </fieldset>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Vous pouvez également entourer le <fieldset>

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>单选按钮和复选框</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.php">
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
        <legend>请选择您的性别：</legend>
          <label for="male">男性</label>
          <input type="radio" name="gender" id="male" value="male">
          <label for="female">女性</label>
          <input type="radio" name="gender" id="female" value="female"> 
        </fieldset>
      </div>
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
          <legend>请选择您喜爱的颜色：</legend>
            <label for="red">红色</label>
            <input type="checkbox" name="favcolor" id="red" value="red">
            <label for="green">绿色</label>
            <input type="checkbox" name="favcolor" id="green" value="green">
            <label for="blue">蓝色</label>
            <input type="checkbox" name="favcolor" id="blue" value="blue">  
        </fieldset>
      </div>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Si vous souhaitez qu'un de vos boutons soit pré-coché, utilisez l'attribut vérifié de <input> en HTML :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>单选按钮和复选框</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <fieldset data-role="controlgroup">
      <legend>请选择您的性别：</legend>
        <label for="male">Male</label>
        <input type="radio" name="gender" id="male" value="male" checked>
        <label for="female">Female</label>
        <input type="radio" name="gender" id="female" value="female"> 
      </fieldset>

      <fieldset data-role="controlgroup">
      <legend>请选择您喜爱的颜色：</legend>
          <label for="red">红色</label>
          <input type="checkbox" name="favcolor" id="red" value="red" checked>
          <label for="green">绿色</label>
          <input type="checkbox" name="favcolor" id="green" value="green">
          <label for="blue">蓝色</label>
          <input type="checkbox" name="favcolor" id="blue" value="blue" checked>  
      </fieldset>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Vous pouvez mettre le formulaire dans la fenêtre pop-up :

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">弹窗中使用表单</a>

    <div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;">
      <form method="post" action="demoform.php">
        <div>
          <h3>登录信息</h3>
          <label for="usrnm" class="ui-hidden-accessible">用户名:</label>
          <input type="text" name="user" id="usrnm" placeholder="用户名">
          <label for="pswd" class="ui-hidden-accessible">密码:</label>
          <input type="password" name="passw" id="pswd" placeholder="密码">
          <label for="log">保存登录</label>
          <input type="checkbox" name="login" id="log" value="1" data-mini="true">
          <input type="submit" data-inline="true" value="登录">
        </div>
      </form>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

entrée de formulaire jQuery Mobile

jQuery Mobile Éléments de saisie de formulaire

Boîte de saisie de texte jQuery Mobile

Instance

Zone de texte

Instance

Zone de saisie de recherche

Instance

radio bouton

Exemple

case à cocher

Instance

Plus d'instances

Instance

Instance

Exemple

Instance

Site Web PHP chinois