jQuery Mobile_表单元素
<!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_表单元素的更多相关文章
- 基于JQuery实现表单元素值的回写
form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB ...
- jQuery选取表单元素
表单元素选择器 选择器 说明 :button <button>元素和type属性值为button的<input& ...
- jquery获取表单元素与回显
一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...
- jQuery选择器(表单元素过滤选择器)第八节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jquery 隐藏表单元素
1.html <label for="lbl" >电压等级:</label> <input class="easyui-combobox&q ...
- 使用jquery将表单元素转json提交后台
今天帮朋友解决一个问题,朋友的框架用的layui的,发现layui的里面的data.field不能获取动态生成的标签的值的. 于是使用jquery的方法如下: var formObject = {}; ...
- jquery批量控制表单元素
网上查了很久,避免下次再遇到相同的问题,记录一下: $("form input").prop("readonly", true); $("form i ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素
相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- Jquery Form表单元素对象化
function serializeObject(form){ var o = {}; $.each(form.serializeArray(),function(index){ o[this['na ...
随机推荐
- ERP权限系统(七)
添加链接权限的字段: //权限管理 n.Target = "MainFrame"; //折叠 TreeView1.Nodes.Add(n); n.Expanded = false;
- 12、SQL基础整理(运算符与优先级)
运算符 + - * / %(取余),赋值运算符 = declare @jia int set @jia = 1+1 print @jia declare @jia int set @jia = 10% ...
- Unity3D ShaderLab 使用alpha参数创建透明效果
Unity3D ShaderLab 使用alpha参数创建透明效果 其实Unity为了方便我们的工作,为我们内置了很多参数.比如马上用到的透明功能. 准备场景新建Shader Material ,一张 ...
- 解决div里插入img下边缝隙问题
<html> <head> <title> new document </title> <meta name="author ...
- css中解决img在a元素中使得a元素撑大写法
给外面a标签padding-left:; img自身float:left;margin-left:; 这种写法避免了不少因浮动产生的问题,且代码简明,推荐适当的使用此方法.
- java 的复用工具 - jar包
前言 Java提供了jar包的机制,使得已经开发好了的类能够顺利的被将来的工程所复用. 本章主要讲解如何使用这种工具. 包的作用 包能够将不同功用的类组织起来,从而确保类名的唯一性. 为了保证包名的唯 ...
- UI学习笔记---第十六天XML JSON解析
一.解析的基本概念 从事先规定好的格式中提取数据 解析的前提:提前约定好格式.数据提供方按照格式提供数据,数据方按照格式获取数据 常见解析方式XML解析JSON解析 二.XML:可扩展标记语言 XML ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- 关于sql where id in 转换成数据类型 int 时失败(转)
有执行sql条件语句where id in(@参数)的时候,如果处理不当,就会出现问题:如下面这个存储过程: alter proc Web_gettwtwgoldgameserverGoldSell@ ...
- android 多线程下载图片
很多时候我们需要在Android设备上下载远程服务器上的图片进行显示,今天Android123整理出两种比较好的方法来实现远程图片的下载. 方法一.直接通过Android提供的Http类访问远程服 ...