jQuery Mobile 表單輸入元素
jQuery Mobile 文本輸入框
輸入字段是通過(guò)標(biāo)準(zhǔn)的 HTML 元素編碼的,jQuery Mobile 將為它們添加樣式使其看起來(lái)更具吸引力,在移動(dòng)設(shè)備上更易使用。您也能使用新的 HTML5 的 <input> 類(lèi)型:
實(shí)例
<!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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
提示:請(qǐng)使用 placeholder 來(lái)指定一個(gè)簡(jiǎn)短的描述,用來(lái)描述輸入字段的期望值:
<input placeholder="sometext">
文本域
對(duì)于多行文本輸入可使用 <textarea> 。
注意:當(dāng)您鍵入一些文本時(shí),文本域會(huì)自動(dòng)調(diào)整大小以適應(yīng)新增加的行。
實(shí)例
<!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> 文本框會(huì)根據(jù)你的輸入自動(dòng)調(diào)整文本框的高度,你可以在以上文本框輸入內(nèi)容,查看效果。</p> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
搜索輸入框
type="search" 類(lèi)型的輸入框是在 HTML5 中新增的,它是為輸入搜索定義文本字段:
實(shí)例
<!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="搜索內(nèi)容..."> </div> <input type="submit" data-inline="true" value="提交"> </form> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
單選按鈕
當(dāng)用戶(hù)在有限數(shù)量的選擇中僅選取一個(gè)選項(xiàng)時(shí),使用單選按鈕。
為了創(chuàng)建一系列單選按鈕,請(qǐng)?zhí)砑訋в?type="radio" 的 input 以及相應(yīng)的 label。把單選按鈕包圍在 <fieldset> 元素內(nèi)。您也可以添加一個(gè) <legend> 元素來(lái)定義 <fieldset> 的標(biāo)題。
提示:請(qǐng)使用 data-role="controlgroup" 來(lái)把按鈕組合在一起:
實(shí)例
<!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>請(qǐng)選擇您的性別:</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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
復(fù)選框
當(dāng)用戶(hù)在有限數(shù)量的選擇中選取一個(gè)或多個(gè)選項(xiàng)時(shí),使用復(fù)選框:
實(shí)例
<!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>復(fù)選框</h1> </div> <div data-role="main" class="ui-content"> <form method="post" action="demoform.php"> <fieldset data-role="controlgroup"> <legend>請(qǐng)選擇您喜愛(ài)的顏色:</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">藍(lán)色</label> <input type="checkbox" name="favcolor" id="blue" value="blue"> </fieldset> <input type="submit" data-inline="true" value="提交"> </form> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
更多實(shí)例
如需水平組合單選按鈕或復(fù)選框,請(qǐng)使用 data-type="horizontal":
實(shí)例
<!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>單選按鈕和復(fù)選框</h1> </div> <div ddata-role="main" class="ui-content"> <form method="post" action="demoform.php"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>請(qǐng)選擇您的性別:</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>請(qǐng)選擇您喜愛(ài)的顏色:</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">藍(lán)色</label> <input type="checkbox" name="favcolor" id="blue" value="blue"> </fieldset> <input type="submit" data-inline="true" value="提交"> </form> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
您也可以用一個(gè) field 容器包圍 <fieldset>:
實(shí)例
<!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>單選按鈕和復(fù)選框</h1> </div> <div data-role="main" class="ui-content"> <form method="post" action="demoform.php"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>請(qǐng)選擇您的性別:</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>請(qǐng)選擇您喜愛(ài)的顏色:</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">藍(lán)色</label> <input type="checkbox" name="favcolor" id="blue" value="blue"> </fieldset> </div> <input type="submit" data-inline="true" value="提交"> </form> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
如果您想要您的按鈕中的一個(gè)預(yù)先選中,請(qǐng)使用 HTML 中 <input> 的 checked 屬性:
實(shí)例
<!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>單選按鈕和復(fù)選框</h1> </div> <div data-role="main" class="ui-content"> <form method="post" action="demoform.asp"> <fieldset data-role="controlgroup"> <legend>請(qǐng)選擇您的性別:</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>請(qǐng)選擇您喜愛(ài)的顏色:</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">藍(lán)色</label> <input type="checkbox" name="favcolor" id="blue" value="blue" checked> </fieldset> <input type="submit" data-inline="true" value="提交"> </form> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
你可以將表單放在彈窗中:
實(shí)例
<!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>歡迎訪問(wèn)我的主頁(yè)</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">用戶(hù)名:</label> <input type="text" name="user" id="usrnm" placeholder="用戶(hù)名"> <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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例