<!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. 移动端 meta 标签笔记

    (转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义 一.meta 标签分 ...

  2. 实现Magento多文件上传代码功能开发

    在Magento中上传单个文件很简单,可以直接在继承的Mage_Adminhtml_Block_Widget_Form类中直接添加如下组件Field:  对于图片:   $fieldset->a ...

  3. 换个心境搞IT,在IT职场如何打拼?

    刚进入IT这行时,我也是从程序员做起.尤其是前两三个月里,那种感觉就像时时刻刻处于备战状态一样.我是一个在对自己的要求方面有洁癖的人,在没有任何经验的状态下,只有坚持苦干,把下发的每件编程任务做好,才 ...

  4. 转载: SQL Server中的索引

    http://www.blogjava.net/wangdetian168/archive/2011/03/07/347192.html 1 SQL Server中的索引 索引是与表或视图关联的磁盘上 ...

  5. windows操作系统的快捷键

    编号:1015时间:2016年5月26日09:25:34功能:windows操作系统的快捷键URL:https://www.douban.com/group/topic/5937774/

  6. threeSum_0

    //找出数组中三个数相加为0,返回存在的组数 //输入指正*A,长度为size,返回*B和长度num int threeSum_0(int *A,int size,int *B,int &nu ...

  7. easyUI——datebox验证和自定义取消按钮

    来源:http://blog.csdn.net/liusong0605/article/details/42270463 1. datebox验证        验证结束时间<起始时间: 起始时 ...

  8. 解决MySQL中【Cannot load from mysql.proc. The table is probably corrupted

    [错误过程]:MySQL从5.1升级至5.5后在调用存储过程时报出“Cannot load from mysql.proc. The table is probably corrupted.” [造成 ...

  9. iframe与frameset(转载)

    frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里 frameset        它称为框架标记,是用来告知HTML文件是框架模式,并且设定可视窗口怎么分割 fram     ...

  10. html---文本框样式;

    一.一个单行文本框的例子 <form name="form1" action="mailto:3400982550@qq.com" method=&quo ...