1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  7.  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  8.  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  9.  </head>
  10.  
  11.  <body>
  12.  <div data-role="page">
  13.      <div data-role="header" style="text-align:center">header</div>
  14.      <div data-role="content">
  15.          <form method="post" action="#">
  16.              <div data-role="fieldcontain">
  17.              <label for="fname">姓名:</label>
  18.              <input type="text" id="fname" name="fname" placeholder="姓名..." data-inline="true">
  19.              <label for="birth">生日:</label>
  20.              <input type="date" id="birth" name="birth" placeholder="生日..." data-inline="true">
  21.              <label for="email">email:</label>
  22.              <input type="email" id="email" name="email" placeholder="生日..." data-inline="true">
  23.              <label for="introduce">简介:</label>
  24.              <textarea id="introduce" placeholder="简介..."></textarea>
  25.              <label for="search">search:</label>
  26.              <input type="search" id="search" name="search" placeholder="搜索..." data-inline="true">
  27.              <fieldset data-role="controlgroup" data-type="horizontal">
  28.                  <legend>请选择您的性别</legend>
  29.                  <label for="male">男</label>
  30.                  <input type="radio" name="sex" id="male" name="male">
  31.                  <label for="female">女</label>
  32.                  <input type="radio" name="sex" id="female" name="female">
  33.              </fieldset>
  34.              <fieldset data-role="controlgroup">
  35.                  <legend>请选择您的性别</legend>
  36.                  <label for="male2">男</label>
  37.                  <input type="radio" name="sex2" id="male2" name="male2" checked>
  38.                  <label for="female2">女</label>
  39.                  <input type="radio" name="sex2" id="female2" name="female2">
  40.              </fieldset>
  41.              <fieldset data-role="controlgroup" data-type="horizontal">
  42.                  <legend>请选择你看过的电影</legend>
  43.                  <label for="xunlongjue">寻龙诀</label>
  44.                  <input type="checkbox" name="movie" id="xunlongjue">
  45.                  <label for="dahuaxiyou">大话西游</label>
  46.                  <input type="checkbox" name="movie" id="dahuaxiyou">
  47.                  <label for="gongfu">功夫</label>
  48.                  <input type="checkbox" name="movie" id="gongfu">
  49.              </fieldset>
  50.              <fieldset data-role="controlgroup">
  51.                  <legend>请选择你看过的电影</legend>
  52.                  <label for="xunlongjue2">寻龙诀</label>
  53.                  <input type="checkbox" name="movie" id="xunlongjue2">
  54.                  <label for="dahuaxiyou2">大话西游</label>
  55.                  <input type="checkbox" name="movie2" id="dahuaxiyou2">
  56.                  <label for="gongfu2">功夫</label>
  57.                  <input type="checkbox" name="movie2" id="gongfu2">
  58.              </fieldset>
  59.              <fieldset data-role="controlgroup">
  60.                  <legend for="day">选择天</legend>
  61.                  <select name="day" id="day" multiple="multiple" data-native-menu="false">
  62.                      <optgroup label="工作日"></optgroup>
  63.                      <option value="monday" selected>星期一</option>
  64.                      <option value="tuesday">星期二</option>
  65.                      <option value="wednsday">星期三</option>
  66.                      <option value="thursday">星期四</option>
  67.                      <option value="friday">星期五</option>
  68.                      <optgroup label="周末"></optgroup>
  69.                      <option value="saturday">星期六</option>
  70.                      <option value="sunday">星期日</option>
  71.                  </select>
  72.              </fieldset>
  73.              <fieldset data-role="controlgroup" data-type="horizontal">
  74.                  <legend >安排会议：</legend>
  75.                  <label for="day">选择天</label>
  76.                  <select name="day" id="day">
  77.  
  78.                      <option value="monday" selected>星期一</option>
  79.                      <option value="tuesday">星期二</option>
  80.                      <option value="wednsday">星期三</option>
  81.                      <option value="thursday">星期四</option>
  82.                      <option value="friday">星期五</option>
  83.  
  84.                      <option value="saturday">星期六</option>
  85.                      <option value="sunday">星期日</option>
  86.                  </select>
  87.                   <label for="time">选择时间</label>
  88.                  <select name="time" id="time">
  89.  
  90.                      <option value="8" selected>8:00</option>
  91.                      <option value="9">9:00</option>
  92.                      <option value="10">10:00</option>
  93.  
  94.                  </select>
  95.              </fieldset>
  96.              <label for="points">滑块</label>
  97.              <input type="range" id="points" name="points" value="50" min="0" max="100" data-highlight="true">
  98.              <label for="switch">开关</label>
  99.              <select name="switch" id="switch" data-role="slider">
  100.                  <option value="on" selected>on</option>
  101.                  <option value="off">off</option>
  102.              </select>
  103.              </div>
  104.              <input type="submit" value="提交" data-inline="true">
  105.          </form>
  106.  
  107.      </div>
  108.      <div data-role="footer" style="text-align:center">footer</div>
  109.  
  110.  </div>
  111.  </body>
  112.  </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. windows系统mysql定时自动备份

    MySQL Administrator 工具是MySQL官方的数据库管理工具,包含在MySQL GUI Tools中,可在MySQL官方网站下载到,下载地址:http://dev.mysql.com/ ...

  2. C#_WinForm接收命令行参数

    C#_WinForm接收命令行参数 2014-08-03 10:17 534人阅读 评论(0) 收藏 举报 首先,我要仔细的声明下,本文讲的是接受命令行参数,让程序启动.而不是启动那个黑黑的框...我 ...

  3. Magento：Paypal付款不成功返回后不要清空购物车产品的解决方案

    经常遇到这个问题,当我们使用第三方支付工具Gateway如paypal支付的时候,如果用户付款不成功或者取消了订单再返回网站时,发现购物车里面的产品已经被清空了,如果是客户主动cancel的还好,但是 ...

  4. magento -- 添加新产品时状态默认为激活，库存状态默认为有库存

    添加新产品时状态默认为激活 打开文件/app/code/core/Mage/Catalog/Model/Product/Status.php,注释掉“Please Select” /** * Retr ...

  5. PHP header() 函数详细说明(301、404等错误设置)

    原文来自:http://www.veryhuo.com/a/view/41466.html 如果您刚刚开始学习PHP,可能有许多函数需要研究,今天我们就来学习一下PHP Header()的使用方法,更 ...

  6. （进阶篇）浅谈COOKIE和SESSION关系和区别

    COOKIE介绍 cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 coo ...

  7. [转]C语言文件操作

    1,两种文件存取方式(输入,输出方式) 顺序存取 直接存取 2,数据的两种存放形式 文本文件 二进制文件 13.2文件指针 定义文件类型指针变量的一般形式: FILE *指针变量名; 例如: FILE ...

  8. mysql最大连接数

    通常,mysql的最大连接数默认是100, 最大可以达到16384.1.查看最大连接数:show variables like '%max_connections%';2.修改最大连接数方法一:修改配 ...

  9. js部分---运算符,if分支语句,for循环；switch case 的用法；

    ------------------------------------------运算符---------------------------------------------------- *数 ...

  10. Docker安装及基本使用方法

    Docker安装 CentOS6上安装Docker # yum -y install epel-release # yum -y install docker-io CentOS7上安装Docker ...