<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 </head>

 <body>

 <div data-role="page">

     <div data-role="header" style="text-align:center">header</div>

     <div data-role="content">

         <form method="post" action="#">

             <div data-role="fieldcontain">

             <label for="fname">姓名:</label>

             <input type="text" id="fname" name="fname" placeholder="姓名..." data-inline="true">

             <label for="birth">生日:</label>

             <input type="date" id="birth" name="birth" placeholder="生日..." data-inline="true">

             <label for="email">email:</label>

             <input type="email" id="email" name="email" placeholder="生日..." data-inline="true">

             <label for="introduce">简介:</label>

             <textarea id="introduce" placeholder="简介..."></textarea>

             <label for="search">search:</label>

             <input type="search" id="search" name="search" placeholder="搜索..." data-inline="true">

             <fieldset data-role="controlgroup" data-type="horizontal">

                 <legend>请选择您的性别</legend>

                 <label for="male">男</label>

                 <input type="radio" name="sex" id="male" name="male">

                 <label for="female">女</label>

                 <input type="radio" name="sex" id="female" name="female">

             </fieldset>

             <fieldset data-role="controlgroup">

                 <legend>请选择您的性别</legend>

                 <label for="male2">男</label>

                 <input type="radio" name="sex2" id="male2" name="male2" checked>

                 <label for="female2">女</label>

                 <input type="radio" name="sex2" id="female2" name="female2">

             </fieldset>

             <fieldset data-role="controlgroup" data-type="horizontal">

                 <legend>请选择你看过的电影</legend>

                 <label for="xunlongjue">寻龙诀</label>

                 <input type="checkbox" name="movie" id="xunlongjue">

                 <label for="dahuaxiyou">大话西游</label>

                 <input type="checkbox" name="movie" id="dahuaxiyou">

                 <label for="gongfu">功夫</label>

                 <input type="checkbox" name="movie" id="gongfu">

             </fieldset>

             <fieldset data-role="controlgroup">

                 <legend>请选择你看过的电影</legend>

                 <label for="xunlongjue2">寻龙诀</label>

                 <input type="checkbox" name="movie" id="xunlongjue2">

                 <label for="dahuaxiyou2">大话西游</label>

                 <input type="checkbox" name="movie2" id="dahuaxiyou2">

                 <label for="gongfu2">功夫</label>

                 <input type="checkbox" name="movie2" id="gongfu2">

             </fieldset>

             <fieldset data-role="controlgroup">

                 <legend for="day">选择天</legend>

                 <select name="day" id="day" multiple="multiple" data-native-menu="false">

                     <optgroup label="工作日"></optgroup>

                     <option value="monday" selected>星期一</option>

                     <option value="tuesday">星期二</option>

                     <option value="wednsday">星期三</option>

                     <option value="thursday">星期四</option>

                     <option value="friday">星期五</option>

                     <optgroup label="周末"></optgroup>

                     <option value="saturday">星期六</option>

                     <option value="sunday">星期日</option>

                 </select>

             </fieldset>

             <fieldset data-role="controlgroup" data-type="horizontal">

                 <legend >安排会议：</legend>

                 <label for="day">选择天</label>

                 <select name="day" id="day">

                     <option value="monday" selected>星期一</option>

                     <option value="tuesday">星期二</option>

                     <option value="wednsday">星期三</option>

                     <option value="thursday">星期四</option>

                     <option value="friday">星期五</option>

                     <option value="saturday">星期六</option>

                     <option value="sunday">星期日</option>

                 </select>

                  <label for="time">选择时间</label>

                 <select name="time" id="time">

                     <option value="8" selected>8:00</option>

                     <option value="9">9:00</option>

                     <option value="10">10:00</option>

                 </select>

             </fieldset>

             <label for="points">滑块</label>

             <input type="range" id="points" name="points" value="50" min="0" max="100" data-highlight="true">

             <label for="switch">开关</label>

             <select name="switch" id="switch" data-role="slider">

                 <option value="on" selected>on</option>

                 <option value="off">off</option>

             </select>

             </div>

             <input type="submit" value="提交" data-inline="true">

         </form>

     </div>

     <div data-role="footer" style="text-align:center">footer</div>

 </div>

 </body>

 </html>

jQuery Mobile_表单元素的更多相关文章

  1. 基于JQuery实现表单元素值的回写

    form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB ...

  2. jQuery选取表单元素

    表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input& ...

  3. jquery获取表单元素与回显

    一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...

  4. jQuery选择器(表单元素过滤选择器)第八节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. jquery 隐藏表单元素

    1.html <label for="lbl" >电压等级:</label> <input class="easyui-combobox&q ...

  6. 使用jquery将表单元素转json提交后台

    今天帮朋友解决一个问题,朋友的框架用的layui的,发现layui的里面的data.field不能获取动态生成的标签的值的. 于是使用jquery的方法如下: var formObject = {}; ...

  7. jquery批量控制表单元素

    网上查了很久,避免下次再遇到相同的问题,记录一下: $("form input").prop("readonly", true); $("form i ...

  8. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  9. Jquery Form表单元素对象化

    function serializeObject(form){ var o = {}; $.each(form.serializeArray(),function(index){ o[this['na ...

随机推荐

  1. Android 中如何获取 H5 保存在 LocalStorage 的数据

    主要分三步: 写个接口,接收 Js 回调 添加到 WebView 主动调用 Js 获取 比如我要获取保存在 LocalStorage 中的 userKey 字段: 1.写个接口,接收 Js 回调 pu ...

  2. 拆解一个简单的KeyFile保护

    系统 : Windows xp 程序 : abexcrackme3 程序下载地址 :http://pan.baidu.com/s/1mh3TiqO 要求 : 伪造Keyfile 使用工具 :IDA 可 ...

  3. sql2008+vs2008安装心得以及详细教程分享

    第一步,我把原来装的vs2005+sql2005全部卸载了 第二步,下载VS2008同时下载sql2008: 第三步,开始安装VS2008专业版,网上有很多给出了微软的地址,在这里我也贴一个吧 htt ...

  4. 转：设置session过期时间

    在Asp.net应用中,很多人会遇到Session过期设置有冲突.其中,可以有四处设置Session的过期时间: 一.全局网站(即服务器)级 IIS-网站-属性-Asp.net-编辑配置-状态管理-会 ...

  5. Xcode 断点调试，取消直接进入到汇编语言界面处理

    Xcode 上部的菜单拦: Product -> Debug Wokflow  下的菜单中,将“ Always Show Disassembly ”的勾去掉.(勾上的意思是用汇编语言进行Debu ...

  6. java 函数 运算符

    1. 函数的重载:多个函数名相同,根据参数列表(个数,类型)选择执行不同函数,不能按返回值类型区分. 2. 运算符: / /两头都是int类型 则做求商运算,如果一头有小数就做正常的除运算 5/2 / ...

  7. 【转】Java中如何遍历Map对

    在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...

  8. 自定义动画方法 animate()

    animate方法的语法结构为: animate(params,speed,callback); 参数说明: (1) params:一个包含样式属性及值的映射,比如{property:'value1' ...

  9. 解决Volley请求网络数据返回的数据乱码

    本人可参考http://tieba.baidu.com/p/4039693566 以往一般我们如下写就可以了 StringRequest request=new StringRequest(url, ...

  10. linux查找webshell

    原文出处:http://my.oschina.net/longquan/blog/155905 首先认识一下小马,一般大马容易暴露,骇客都会留一手,把小马加入正常PHP文件里面 <?php ev ...