首页
文墨
中国风
新闻
名人堂
动态
开发社区
创作
文墨
中国风
登录
首页
H5
服务端
数据库
移动端
Web Services
网站
jQuery Mobile 教程
jQuery Mobile 简介
jQuery Mobile 安装
jQuery Mobile 页面
jQuery Mobile 过渡
jQuery Mobile 按钮
jQuery Mobile 按钮图标
jQuery Mobile 弹窗
jQuery Mobile 工具栏
jQuery Mobile 导航栏
jQuery Mobile 面板
jQuery Mobile 可折叠块
jQuery Mobile 表格
jQuery Mobile 网格
jQuery Mobile 列表视图
jQuery Mobile 列表内容
jQuery Mobile 过滤
jQuery Mobile 表单基础
jQuery Mobile 表单输入
jQuery Mobile 表单选择
jQuery Mobile 表单滑动条
jQuery Mobile 主题
jQuery Mobile 事件
jQuery Mobile 触摸事件
jQuery Mobile 滚屏事件
jQuery Mobile 方向改变事件
jQuery Mobile 实例
jQuery Mobile Data 属性
jQuery Mobile 图标
jQuery Mobile 事件
jQuery Mobile页面事件
jQuery Mobile CSS 类
jQuery Mobile
表单
jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。
<br/><hr/> <h2>jQuery Mobile 表单结构</h2> <p>jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。</p> <p>在 jQuery Mobile 中，您可以使用下列表单控件：</p> <ul> <li>文本输入框</li> <li>搜索输入框</li> <li>单选按钮</li> <li>复选框</li> <li>选择菜单</li> <li>滑动条</li> <li>翻转拨动开关</li> </ul> <p>当使用 jQuery Mobile 表单时，您应当知道：</p> <ul> <li><form> 元素必须有一个 method 和一个 action 属性</li> <li>每个表单元素必须有一个唯一的 "id" 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现</li> <li>每个表单元素必须有一个标签。设置标签的 <strong>for</strong> 属性来匹配元素的 id</li> </ul> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> <form <span class="marked">method="post" action="demoform.html"</span>><br/><span class="marked"> <label for="fname"></span>姓名:<span class="marked"></label></span><br/> <input type="text" name="fname" <span class="marked">id="fname"</span>><br/></form><br/> </div> <br/><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjqmob_label">尝试一下 »</a> </div> <p>如需隐藏标签，请使用 class ui-hidden-accessible。这在您把元素的 placeholder 属性作为标签时经常用到：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> <form method="post" action="demoform.html"><br/> <label for="fname" <span class="marked">class="ui-hidden-accessible"</span>>姓名:</label><br/> <input type="text" name="fname" id="fname" placeholder="姓名..."><br/> </form><br/> </div> <br/><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjqmob_label_placeholder">尝试一下 »</a> </div> <p><strong>提示：</strong> 我们可以使用 data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标):</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <label for="fname">姓名:</label><br/><input type="text" name="fname" id="fname" <span class="marked">data-clear-btn="true"</span>> <br/> </div> <br/><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjqmob_forms_clear">尝试一下 »</a> </div> <table class="lamp" id="table1"><tbody><tr> <th style="width:34px"><img src="https://www.runoob.com/images/lamp.jpg" alt="Note" style="height:32px;width:32px"/></th> <td>清除输入框的按钮可以在 <input> 元素中使用，但不能在 <textarea> 中使用。 搜索框中 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"> <h2 class="example">实例</h2> <div class="example_code"> <input type="button" value="按钮"><br/><input type="reset" value="重置按钮"><br/><input type="submit" value="提交按钮"> <br/> </div> <br/><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjqmob_forms_buttons">尝试一下 »</a> </div> <p>如果需要在 <input> 按钮中添加额外的样式，可以使用下表中的 data-* 属性：</p> <table class="reference"> <tbody><tr> <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><a href="jquerymobile-ref-icons.html">图标参考手册</a></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"> <input type="button" value="按钮"><br/><input type="reset" value="重置按钮"><br/><input type="submit" value="提交按钮"> <br/> </div> <br/><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjqmob_forms_buttons2">尝试一下 »</a> </div> <hr/> <h2>字段容器</h2> <p>如需让标签和表单元素看起来更适应宽屏，请用带有 "ui-field-contain" 类的 <div> 或 <fieldset> 元素包围 label/form 元素：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> <form method="post" action="demoform.php"><br/> <div <span class="marked">class="ui-field-contain"</span>><br/> <label for="fname">姓:</label><br/> <input type="text" name="fname" id="fname"><br/> <label for="lname">姓:</label><br/> <input type="text" name="lname" id="lname"><br/> </div><br/> </form><br/> </div> <br/><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjqmob_forms_fieldcontain">尝试一下 »</a> </div> <br/><table class="lamp" id="table1"><tr> <th width="34"><img loading="lazy" src="https://www.runoob.com/images/lamp.jpg" width="32" height="32" alt="lamp"/></th> <td>ui-field-contain 类基于页面的宽度为标签和表单控件添加样式。当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。</td> </tr></table> <p><strong>提示：</strong>为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> <label for="fname">姓名:</label><br/><input type="text" name="fname" id="fname" <span class="marked">data-role="none"</span>><br/> </div> <br/><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjqmob_forms_none">尝试一下 »</a> </div> <br/><table class="lamp" id="table1"><tr> <th width="34"><img loading="lazy" src="https://www.runoob.com/images/lamp.jpg" width="32" height="32" alt="lamp"/></th> <td> <strong>jQuery Mobile 中的表单提交</strong><br/><br/>jQuery Mobile 通过 AJAX 自动处理表单提交，并将试图集成服务器响应到应用程序的 DOM 中。</td> </tr></table> <!-- 其他扩展 --> </div> </div> </div> </div> <div class="col-sm-2 col-md-2"> <div class="thumbnail doc-nav"> <div class="" style="font-size: 14px"> <a href="/docdetail?id=1729">Swift教程</a> </div> <div class="" style="font-size: 14px"> <a href="/docdetail?id=1762">jQuery Mobile教程</a> </div> <div class="" style="font-size: 14px"> <a href="/docdetail?id=1794">ionic教程</a> </div> <div class="" style="font-size: 14px"> <a href="/docdetail?id=1831">Kotlin教程</a> </div> </div> </div> </div> <script type="text/javascript"> $(function(){ $.each($(".hl-code"),function(){ txt = $(this).text(); if(txt=="\n"){ $(this).css({"display":"block"}) } }) }) </script> <div class="row youlian" style="margin-top: 30px;text-align: center; "> <div>友情链接</div> <hr/> <div style="display: flex;justify-content: center;flex-wrap: wrap;line-height: 35px"> <a href="https://didi.seowhy.com" target="_blank"> 搜外友链 </a> | <a href="https://www.51forhome.com" target="_blank">维家</a> <!-- | <a href="https://tsqt.aiwyou.com" target="_blank">天书奇谈</a> --> | <a href="https://www.gzfenglinfang.com" target="_blank">风淋室</a> <!-- | <a href="http://www.dj1234.com" target="_blank">先上DJ音乐网</a> --> <!-- | <a href="http://www.rongfangdai.com/college/fcdk/" target="_blank">房产贷款</a> --> <!-- | <a href="http://b2b.tuijie.net" target="_blank">企业名录</a> | <a href="https://www.qsyhq.com" target="_blank">国家自然科学基金申报</a> --> <!-- | <a href="http://aqunqq.com" target="_blank">QQ回收</a -->> | <a href="http://www.3105.cn" target="_blank">明星排行</a> <!-- | <a href="https://www.shunyuanyw.com" target="_blank">上海画册印刷</a> --> <!-- | <a href="https://www.ggxhw.com" target="_blank">钢管现货网</a> --> <!-- | <a href="http://www.cqdidi.com" target="_blank">手机游戏下载</a> --> <!-- | <a href="https://bj.tuwenyinshua.cn" target="_blank">北京印刷厂</a> --> <!-- | <a href="https://www.wokawl.com" target="_blank">京东e卡回收</a> --> <!-- | <a href="https://lasa.jiangongdata.com" target="_blank">建管家拉萨站</a> --> | <a href="https://www.guifan.cc" target="_blank">建筑规范文档</a> <!-- | <a href="http://xlglgbjyglxt.org.cn" target="_blank">北方网</a> --> | <a href="https://huizhou.fuczx.com" target="_blank">惠州保安公司</a> | <a href="https://www.rtfans.com" target="_blank">环保空调</a> | <a href="https://zshz.aiwyou.com" target="_blank">咒术回战</a> <!-- | <a href="https://www.8041402.xyz" target="_blank">解密帝官网</a> | <a href="https://www.avl.top" target="_blank">美音声光方案设计</a> | <a href="https://www.weilai58.com" target="_blank">58货源网</a> | <a href="https://5b1.cn" target="_blank">五百亿范文网</a> --> </div> </div> <br/> <br/> <br/> <br/> </div> <div style="text-align: center;line-height: 25px;padding:30px 0px;position: relative;max-width: 1200px;margin:auto;"> <p> <a href="/contactus" target="_blank">意见反馈</a> || <a href="/about" target="_blank">关于我们</a> || <a href="/agreement" target="_blank">用户协议</a> || <a href="/policy" target="_blank">隐私保护</a> || <a href="/contactus" target="_blank">商务合作</a> </p> <p>Copyright © 2020-2022 中华文学苑（华文苑） 京ICP备17037819号</p> <p>Email:artype@163.com QQ:262989474</p> <div style="position: absolute;bottom: 50px;right: 20px"> <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=SVF3LgDV4f4F0Chuu-lavTKzVSECa2Y2&jump_from=webapi"> <img style="width:110px" src="/static/img/qqgroup.png" alt="加入华文苑qq群" title="点击加入华文苑QQ群"> <br/> <img src="//pub.idqqimg.com/wpa/images/group.png"/> </a> </div> <div style="position: absolute;bottom: 50px;left: 20px"> <a href="/ldy/index.html"> <img style="width:110px" src="/static/img/appldy.png"> <br/> <span style="background: #159be6;padding:3px 10px;color:#fff;border-radius: 2px;font-size: 12px">Android下载</span> </a> </div> </div> <div class="backtop hidden" title="返回顶部"> <img class="left_select_s" src="/static/img/backtop.png"> </div> </body> <script type="text/javascript" src="/static/lazyload/jquery.lazyload.min.js"></script> <script type="text/javascript"> $(function(){ $("img.lazy").lazyload({effect: "fadeIn"}); }) </script> </html>