Input borang mudah alih jQuery

jQuery Mobile Elemen input bentuk

kotak input teks jQuery Mobile

Medan input dikodkan melalui elemen HTML standard , jQuery Mudah alih akan menggayakannya untuk menjadikannya kelihatan lebih menarik dan lebih mudah digunakan pada peranti mudah alih. Anda juga boleh menggunakan jenis 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>

Run Instance»

Klik " Butang Run instance" untuk melihat contoh dalam talian

Petua: Sila gunakan ruang letak untuk menentukan penerangan ringkas untuk menerangkan nilai jangkaan medan input:

<input placeholder="sometext">

Kawasan Teks

Untuk input teks berbilang baris, gunakan <textarea>.

Nota: Apabila anda menaip beberapa teks, medan teks diubah saiz secara automatik untuk menampung baris yang baru ditambah.

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kotak input carian

Kotak input jenis Type="search" adalah baharu dalam HTML5, yang mentakrifkan medan teks untuk carian input:

Contoh

<!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>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

radio butang

Gunakan butang radio apabila pengguna memilih hanya satu pilihan daripada bilangan pilihan yang terhad.

Untuk membuat satu siri butang radio, tambahkan input dengan type="radio" dan label yang sepadan. Kelilingi butang radio dalam elemen <set medan> Anda juga boleh menambah elemen <legenda> untuk mentakrifkan tajuk <set medan>.

Petua: Sila gunakan data-role="controlgroup" untuk mengumpulkan butang bersama:

Contoh

<!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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Checkbox

Apabila pengguna berada dalam nombor terhad Gunakan kotak semak apabila memilih satu atau lebih pilihan dalam pilihan:

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>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat kejadian dalam talian

Lebih banyak kejadian

Jika anda ingin menggabungkan butang radio atau kotak semak secara mendatar kotak, sila gunakan 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>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat tika dalam talian

Anda juga boleh mengelilingi <set medan>

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Jika Anda mahu salah satu butang anda diprasemak, gunakan atribut <input> yang ditanda dalam HTML:

Contoh

<!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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Anda boleh meletakkan borang dalam tetingkap pop timbul:

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Input borang mudah alih jQuery

jQuery Mobile Elemen input bentuk

kotak input teks jQuery Mobile

Instance

Kawasan Teks

Instance

Kotak input carian

Contoh

radio butang

Contoh

Checkbox

Instance

Lebih banyak kejadian

Instance

Instance

Contoh

Instance

Laman web PHP Cina