jQuery Mobile_表单元素

  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>
时间: 2024-12-17 21:53:07

jQuery Mobile_表单元素的相关文章

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

form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html &

jquery设置表单元素为不可用代码实例

jquery设置表单元素为不可用代码实例:本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

用jquery获取表单元素

表单验证需要获得表单元素,下面是获取表单元素的方法 例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="js/jquery-1.6.min.js" type="text/javascript"></script

jQuery选取表单元素

表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input>元素. :checkbox             type属性值为checkbox的<input>元素.使用$([type="checkbox"])能获得更高的性能. :checked               选中的单选按钮和复选框元素. :disabled    

Jquery常用表单元素操作总结

页面当中经常要做一些checkbox,radio,select,input等表单元素的操作.做为我这样的懒人早就该总结以下,免去用到的时候,不想从头写,又不得不去以前的代码中翻.下面的代码来自实际项目中,亲测可用.呵呵-- 一.checkbox 对checkbox的判断往往是checkbox有没有被勾选.也经常有一个复选框控制其它全部复选框的选中和取消选中.如下图: 页面左上角的复选框的选中控制表格中所有的复选框.代码如下: 为了操作方便,给控制全选的复选框增加一个id叫checkAll 下面的

用jquery获取表单元素(二)

获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").attr('checked')==true)  //判断是否已经打勾    --注:name即控件name属性,value即控件value属性 第二种: 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式: if($("input[name=row_checkbox]").attr

jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#selec

JQuery表单元素过滤选择器

此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素(单选框,复选框) 集合元素 selected 选择所有被选中选项元素(下拉列表) 集合元素 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd&q

jquery的attr方法禁用表单元素

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti