<!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. Storyboard的使用以及使用多个Storyboard的方法

    一, storyboard用起来很是方便.在开发中很有可能是多个人创建了多个storyboard.但最后,总是要把所有的storyboard“合并”在一起.总结一下自己的想法,不知道有没有其他的方式“ ...

  2. # 20145210 《Java程序设计》第04周学习总结

    教材学习内容总结 第六章 继承 •继承:继承基本上就是避免多个类间重复定义共同行为. 我理解的就是:在编写程序的过程中可能会出现部分代码重复的现象,把重复的部分单独定义为一类(父类),在其他代码中(子 ...

  3. git pull --rebase 做了什么？ 以及 Cannot rebase: You have unstaged changes 解决办法

    最近刚学 git rebase,觉得很牛逼的样子, 结果今天就被打脸了. git pull --rebase 报错: Cannot rebase: You have unstaged changes ...

  4. CODEVS1533 互斥的数（哈希表）

    给定一个集合,要求一个最大子集,满足两两之间不互斥.对两个数x,y互斥的定义是,y=p*x. 先对集合中的数从小到大排序后线性扫,若一个数x可以取则取,取完之后p*x这个数不可取.由于数字较大,使用哈 ...

  5. asp.net mvc3.0第一个程序helloworld开发图解

    步骤一:新建asp.net mvc3.0项目 (选择Razor模板) 步骤二:创建控制器 步骤三:控制器源码内右键创建对应视图 步骤四:控制器内添加代码 步骤五:视图页面输出内容 步骤六:F5调试

  6. M1: 创建UWP空项目

    本小节介绍如何在Visual Studio中创建一个UWP项目,Visual Studio中提供了快速创建各种项目的类型模板.在Visual Studio 2015中,同样提供了UWP项目模板. 学完 ...

  7. java学习第八天

    第九次课 目标 1.  多态 2.  抽象类 3.  接口 4.  内部类(了解) 一.多态polymorphism 追求”高内聚低耦合”通过三大特性: 封装继承及多态来实现. 多态:多种形态,”出去 ...

  8. curl 发送带有Authorization的post请求命令

    curl --user user:password  -d "param1=111&param2=222" "http://127.0.0.1/cmd"

  9. win7录屏工具

    psr.exe http://jingyan.baidu.com/article/aa6a2c14d330710d4d19c47c.html

  10. 十五个最常用Linux命令行 - imsoft.cnblogs

    众多Linux管理员在使用Linux的时候会经常使用到很多Linux命令行,其中有绝大部分不是经常使用到的.在本文中主要为大家总结了经常使用的十五个最常用Linux命令行,希望对刚刚接触Linux命令 ...