<!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. iOS数据持久化

    在iOS中,实现数据持久化一般分为4大种: 1.属性列表 2.对象归档 3.SQLite 4.Core Data 一.属性列表 NSUserDefaults类的使用和NSKeyedArchiver有很 ...

  2. CODEVS1073 家族 （并查集）

    一道裸的并查集,练练手不错. program CODEVS1073; var i,j,m,n,q,x,y,k1,k2,z:longint; f:..] of longint; function fin ...

  3. yii 创建步骤

    1.首先,下载yii框架,解压到www目录下 2.配置php的环境,在控制台输入php,显示下划线表示,路径配置成功 3.在控制台,切换到yii/framework下,运行yiic webapp .. ...

  4. cookie 和 session 机制

    cookie机制 Cookie实际上是Web服务端与客户端(典型的是浏览器)交互时彼此传递的一部分内容,内容可以是任意的,但要在允许的长度范围之内.客户端会将它保存在本地机器上(如IE便会保存在本地的 ...

  5. ML2 – Address Population

    Why do we need it, whatever it is? VM unicast, multicast and broadcast traffic flow is detailed in m ...

  6. Azure 云助手正式发布

    Azure云服务在中国市场风生水起,越来越多的用户选择Azure作为平台将业务转向云端.随着移动互联网在中国的蓬勃发展,手机应用的体验深入人们的生活及工作.用户管控云服务也不应该只局限于电脑前,而是可 ...

  7. 多个Tomcat同时运行环境配置 - imsoft.cnblogs

    解压下载好的Tomcat压缩包,两次.此例中分别命名为tomcat和tomcat2. 1. 在MyEclipse中配置好第一个Tomcat环境,可以正常运行项目后. 2. 再配置tomcat2这个项目 ...

  8. CPU的频率、外频、倍频与超频

    如,现有一CPU:Intel Core 2 Duo E8400,其频率是3.0GHz: CPU的外频指的是CPU与外部组件进行数据传输/运算时的速度,倍频则是CPU内部用来加速工作性能的一个倍数,两者 ...

  9. 用Python对excel文件的简单操作

    #-*-coding:utf8-*- import xlrd #代开excel文件读取数据 data = xlrd.open_workbook("C:\\Users\\hyl\\Deskto ...

  10. iPhone 6/iPhone 6 Plus硬件性能

    iPhone 6/iPhone 6 Plus硬件性能 评分 4 分 正 如之前传闻的,这次同时发布了两款iPhone产品,分别是4.7英寸的iPhone 6和5.5英寸的iPhone 6 Plus.苹 ...