jQuery Mobile 表单基础

jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。

jQuery Mobile 表单结构

jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。

在 jQuery Mobile 中，您可以使用下列表单控件：

• 文本输入框

• 搜索输入框

• 单选按钮

• 复选框

• 选择菜单

• 滑动条

• 翻转拨动开关

当使用 jQuery Mobile 表单时，您应当知道：

• 元素必须有一个 method 和一个 action 属性

• 每个表单元素必须有一个唯一的 "id" 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现

• 每个表单元素必须有一个标签。设置标签的for属性来匹配元素的 id

 姓名:  

如需隐藏标签，请使用 class ui-hidden-accessible。这在您把元素的 placeholder 属性作为标签时经常用到：

 姓名:  

提示：我们可以使用 data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标):

姓名: 

清除输入框的按钮可以在 元素中使用，但不能在 中使用。 搜索框中 data-clear-btn 默认值为 "true" ，你可以使用 data-clear-btn="false" 移除该图标。</td> </tr> </tbody> </table> <hr> <h2>jQuery Mobile 表单图标</h2> <p>表单中的按钮代码是标准的 HTML <input> 元素 (button, reset, submit)。他们会自动渲染样式，可以自动适配移动设备与桌面设备：</p> <div class="example"> <div class="example_code"> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮"></pre> </div> </div> </div> </div> <p>如果需要在 <input> 按钮中添加额外的样式，可以使用下表中的 data-* 属性：</p> <table class="reference"> <tbody> <tr class="firstRow"> <th style="width:22%">属性</th> <th style="width:21%">值</th> <th style="width:57%">描述</th> </tr> <tr> <td>data-corners</td> <td><strong>true</strong>| false</td> <td>指定按钮是否有圆角</td> </tr> <tr> <td>data-icon</td> <td>图标参考手册</td> <td>指定按钮图标</td> </tr> <tr> <td>data-iconpos</td> <td><strong>left</strong>| right | top | bottom | notext</td> <td>指定图标位置</td> </tr> <tr> <td>data-inline</td> <td>true |<strong>false</strong></td> <td>指定是否内联按钮</td> </tr> <tr> <td>data-mini</td> <td>true |<strong>false</strong></td> <td>指定是否为迷你按钮</td> </tr> <tr> <td>data-shadow</td> <td><strong>true</strong>| false</td> <td>指定按钮是否添加阴影效果</td> </tr> </tbody> </table> <div class="example"> <h2 class="example">按钮添加图标：</h2> <div class="example_code"> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮"></pre> </div> </div> </div> </div> <hr> <h2>字段容器</h2> <p>如需让标签和表单元素看起来更适应宽屏，请用带有 "ui-field-contain" 类的 <div> 或 <fieldset> 元素包围 label/form 元素：</p> <div class="example"> <div class="example_code notranslate"> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><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></pre> </div> </div> </div> </div> <table class="lamp"> <tbody> <tr class="firstRow"> <th width="34" style="word-break: break-all;"><br></th> <td>ui-field-contain 类基于页面的宽度为标签和表单控件添加样式。当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。</td> </tr> </tbody> </table> <p><strong>提示：</strong>为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-role="none"></pre> </div> <p><br></p> </div> <table class="lamp"> <tbody> <tr class="firstRow"> <th width="34"><img src="https://img.php.cn/upload/course/000/000/004/581a91163cf53671.jpg" alt="lamp" width="32" height="32"></th> <td><strong>jQuery Mobile 中的表单提交</strong><br><br>jQuery Mobile 通过 AJAX 自动处理表单提交，并将试图集成服务器响应到应用程序的 DOM 中。</td> </tr> </tbody> </table> </div> </div> </div> <div class="previous-next-links"> <div class="next-design-link"> <a href="//m.sbmmt.com/ja/other/other-form-inputs.html" rel="next">jQuery Mobile 表单输入</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>チュートリアルのナビゲーション</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" target="_blank" title="大きなフロントエンド">大きなフロントエンド</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="HTML">HTML</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="反応する">反応する</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="アヤックス">アヤックス</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="ブートストラップ">ブートストラップ</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="財団">財団</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/2/type/3.html" title="ハイチャート">ハイチャート</a> <a href="//m.sbmmt.com/ja/course/list/2/type/3.html" title="マップAPI">マップAPI</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" target="_blank" title="バックエンド開発">バックエンド開発</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ララベル">ララベル</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="パイソン">パイソン</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="行く">行く</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ジャワ">ジャワ</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="JSP">JSP</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ジャンゴ">ジャンゴ</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ルビー">ルビー</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="パール">パール</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="サーブレット">サーブレット</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ルア">ルア</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="スカラ座">スカラ座</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="AppML">AppML</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="VBスクリプト">VBスクリプト</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" target="_blank" title="データベース">データベース</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="レディス">レディス</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="オラクル">オラクル</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="モンゴDB">モンゴDB</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="Memcached">Memcached</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="SQLサーバー">SQLサーバー</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" target="_blank" title="携帯端末">携帯端末</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="アプレット">アプレット</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="ユニアプリ">ユニアプリ</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="フラッター">フラッター</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="アンドロイド">アンドロイド</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="迅速">迅速</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="他の">他の</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" target="_blank" title="運用保守開発">運用保守開発</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="ドッカー">ドッカー</a> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="ギット">ギット</a> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="その他のツール">その他のツール</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" target="_blank" title="UIデザイン">UIデザイン</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" title="アフレ">アフレ</a> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" title="ウェブフォーム">ウェブフォーム</a> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" target="_blank" title="コンピューターの基本">コンピューターの基本</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="デザインパターン">デザインパターン</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="正規表現">正規表現</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="ウェブサイト構築ガイド">ウェブサイト構築ガイド</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="ブラウザ情報">ブラウザ情報</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="ウェブサイトのホスト">ウェブサイトのホスト</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="コードベーシック">コードベーシック</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XML DOM">XML DOM</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XPath">XPath</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XQuery">XQuery</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="Xリンク">Xリンク</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="Xポインタ">Xポインタ</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XMLスキーマ">XMLスキーマ</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="SVG">SVG</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" target="_blank" title="ウェブサービス">ウェブサービス</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="ウェブサービス">ウェブサービス</a> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="石鹸">石鹸</a> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="提出する">提出する</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>