文章目录
4. 表单元素的使用
如果说按钮控件负责应用中大部分响应功能,那么应用中的一切数据交互都要通过表单实现。QQ的登录界面和短信的输入界面都用到了表单控件。相对于单一的按钮,表单的形式又比较复杂,包括文本编辑框、搜索框、滑动条,开关、单选按钮、复选框及列表菜单等内容。
主要知识点包括:
- 数据的提交,利用表单元素获取数据的方法
- 更强大的交互功能,利用表单元素控制页面的属性
- 页面中控件排列的技巧
4.1 简单的QQ登录界面
利用文本编辑框制作的登录界面:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
.ui-icon-round{ background-image:url(round.png);}
</style>
<script>
function but_click()
{
var temp1=$("#zhanghao").val();
if(temp1=="账号:")
{
alert("请输入QQ号码!")
}
else
{
var zhanghao=temp1.substring(3,temp1.length);
var temp2=$("#mima").val();
if(temp2=="密码:")
{
alert("请输入密码!");
}
else
{
var mima=temp2.substring(3,temp2.length);
alert("提交成功"+"你的QQ号码为"+zhanghao+"你的QQ密码为"+mima);
}
}
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<img src="http://img.itful.com/uploads/allimg/091209/0012204349-0.png" style="width:50%; margin-left:25%;"/>
<form action="#" method="post">
<input type="text" name="zhanghao" id="zhanghao" value="账号:" />
<input type="text" name="mima" id="mima" value="密码:" />
<a href="#" data-role="button" data-theme="b" id="login" onclick="but_click();">登录</a>
</form>
</div>
</div>
</body>
</html>
效果如下:
本例使用了表单控件中的文本编辑框。文本编辑框是表单元素中最简单的一种。
使用表单元素之前先在页面中加入表单标签:
<form action="#" method="post">
<!--中间插入数据-->
</form>
只有这样标签内的控件才会被JQuery Mobile默认读取为表单元素,action属性指向的是接受提交数据的地址,当数据被提交时,就会发送到这里。method属性标注了数据提交的方法,有post和get两种方法可用。
form中所有表单元素都是使用input标签来表示的,可利用type属性来对它们加以区别,如本例中的文本编辑框type属性是text。另外还给每个控件加入相应的name和id,用于对提交的数据进行处理。
tip:为了便于维护,最好将name和id设为相同的值。
可以利用编辑框的id来获取控件,然后利用val()方法获取编辑框的内容,在这里限制了编辑框的值不能为空,实际上应该利用正则表达式限制账号只能为数字,并且使密码内容隐藏。
注:虽然JQuery Mobile为开发者封装了可以控制内容的编辑框,但是为了保证应用的安全性,防止部分别有用心的用户绕过过滤而造成破坏,必须保证在后台对提交的数据进行二次过滤,确保数据没有被恶意提交。
4.2 手机调查问卷
用文本编辑框制作简单的调查问卷:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>调查问卷 </title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>调查问卷</h1> <!--先加上一个头部栏和标题-->
</div>
<div data-role="content">
<form action="#" method="post">
<!-- placeholder属性的内容会在编辑框内以灰色显示-->
<input type="text" name="xingming" id="xingming" placeholder="请输入你的姓名:"/>
<!--当data-clear-btn的值为true时,当该编辑框被选中-->
<!--可以单击右侧的按钮将其中的内容清空-->
<input type="tel" name="dianhua" id="dianhua" data-clear-btn="true" placeholder="请输入你的电话号码:">
<label for="adjust">请问您对本书有何看法?</label>
<!—这里用到了textarea而不是input-->
<textarea name="adjust" id="adjust"></textarea>
<!—通过for属性与textarea进行绑定-->
<label for="where">请问您是在哪里得到这本书的?</label>
<!--使用label时要使用for属性指向其对应控件的id-->
<textarea name="where" id="where"></textarea>
<a href="#" data-role="button">提交</a>
</form>
</div>
</div>
</body>
</html>
运行结果如下:
textarea是一种定义了多行文本的文本编辑控件,可以根据其中的内容自动调整自身高度,同时也可以通过拖曳的方式对其大小进行调整。
type属性:
- search——将在编辑框左侧生成带有搜索按钮的图标。
- number——默认编辑框输入内容是数字。
- date——默认编辑框输入内容是日期。
- month——默认编辑框输入内容是月数。
- week——默认编辑框输入内容是周一至周日的某一天。
- time——默认编辑框输入内容是时刻。
- datetime——默认编辑框输入内容是日期+时间。
- tel——默认编辑框输入内容是电话号码。
- email——默认编辑框输入内容是邮件地址。
- url——默认编辑框输入内容是网址。
- password——默认编辑框输入内容转化为圆点显示。
- file——默认编辑框可以通过单击来选取设备中的文件。
注:一个优秀的应用至少要经过前端利用JavaScript,后台利用脚本语言(如PHP)进行至少两层的过滤,才能够保证不会因某些用户恶意构造的数据造成破坏。
4.3 精准的进度控制
用滑动条控制播放进度:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
.ui-icon-round{ background-image:url(round.png);}
</style>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<a href="#">返回</a>
<h1>音乐播放器</h1>
</div>
<div data-role="content">
<div data-role="controlgroup">
<a href="#" data-role="button">no air</a>
<a href="#" data-role="button">
<img src="1.jpg" style="width:80%;"/>
</a>
<a href="#" data-role="button">no air</a>
<a href="#" data-role="button">Jordon spark</a>
</div>
<form>
<input name="jindu" id="jindu" min="0" max="100" value="50" type="range">
</form>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">后退</a>
<a href="#" data-role="button">播放</a>
<a href="#" data-role="button">暂停</a>
<a href="#" data-role="button">后退</a>
</div>
</div>
<div data-role="footer">
<h1>暂无歌词</h1>
</div>
</div>
</body>
</html>
效果如下:
4.4 多彩的调色板
利用滑动条控制数据,如利用一组滑动条控制背景颜色:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
<script>
function set_color()
{
var red = $("#red").val();
var green = $("#green").val();
var blue =$("#blue").val();
var color = "RGB("+red+","+green+","+blue+")";
$("div").css("background-color",color);
}
</script>
</head>
<body>
<div data-role="page" onclick="al();">
<div data-role="header">
<h1>调色板</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<form>
<input name="red" id="red" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="green" id="green" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="blue" id="blue" min="0" max="255" value="0" type="range" onchange="set_color();" />
</form>
</div>
</div>
</body>
</html>
效果如下:
屏幕上三个滑动条分别代表RGB颜色中的一个,通过拖到它们可以改变红蓝绿这三种颜色的值,从而改变整体颜色。
4.5 熄灯,请闭眼
用开关控件设置夜间模式:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function(){
setInterval(function(){
var myswitch = $("select");
var i=myswitch[0].selectedIndex;
if(i==1)
{
$("div").css("background-color","black");
}
else
{
$("div").css("background-color","white");
}
},50);
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>开关控件的使用</h1>
</div>
<div data-role="content" style="height:430px;">
<div data-role="fieldcontain">
<select name="slider" id="slider" data-role="slider">
<option value="off">关</option>
<option value="on">开</option>
</select>
</div>
</div>
</div>
</body>
</html>
效果如下:
使用开关时,在页面添加一组select标签,在其中加入两个option标签,当页面完成加载后,这两个option值将成为这个开关的两种状态。另外select标签需要包裹在一个div标签中,同时设置属性data-role="fieldcontain。
在使用时,可以通过select标签来获取开关控件,这样获得的是一个数组,但是开关中仅有数组的第一个元素可以使用,即范例中的myswitch[0],可以通过它的selectedIndex属性获取哪个选项被选中,就可以得知开关有没有被打开。
4.6 做一道选择题
利用单选按钮做选择题:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>第一题</h1>
</div>
<div data-role="content" style="height:430px;">
<fieldset data-role="controlgroup">
<legend>哪一个术语定义了电信运营商承诺每秒通过单个PVC的字节数?</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
<label for="radio-choice-1">访问速率</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">BECN</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">CIR</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">FECN</label>
<input type="radio" name="radio-choice" id="radio-choice-5" value="choice-5" />
<label for="radio-choice-5">标头速率</label>
</fieldset>
</div>
</body>
</html>
效果如下:
首先使用< fieldset data-role=“controlgroup” >标签将单选按钮中的内容包含在里面,然后包含在legend中的内容为问题。每一个选项都要设置属性name="radio-choice"且属性id必须唯一。
4.7 多项选择题
利用复选框做多项选择题:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>第一题</h1>
</div>
<div data-role="content" style="height:430px;">
<!--实现方法与单选框几乎一样-->
<fieldset data-role="controlgroup">
<legend>哪一个术语定义了电信运营商承诺每秒通过单个PVC的字节数?</legend>
<!--type属性的值变成了checkbox-->
<input type="checkbox" name="checkbox-choice" id="checkbox-choice-1" value="checkbox-1"/>
<label for="checkbox-choice-1">访问速率</label>
<input type="checkbox" name="checkbox-choice" id="checkbox-choice-2" value="checkbox-2" />
<label for="checkbox-choice-2">BECN</label>
<input type="checkbox" name="checkbox-choice" id="checkbox-choice-3" value="checkbox-3" />
<label for="checkbox-choice-3">CIR</label>
<input type="checkbox" name="checkbox-choice" id="checkbox-choice-4" value="checkbox-4" />
<label for="checkbox-choice-4">FECN</label>
<input type="checkbox" name="checkbox-choice" id="checkbox-choice-5" value="checkbox-5" />
<label for="checkbox-choice-5">标头速率</label>
</fieldset>
</div>
</body>
</html>
效果如下:
只需要将单选框中的 type="radio"改为type="checkbox"即可。
4.8 请问先生需要什么服务
JQuery Mobile制作的自助服务系统:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>请问需要什么服务</h1>
</div>
<div data-role="content" style="height:430px;">
<div data-role="fieldcontain">
<select name="select" id="select" data-native-menu="false">
<option value="please">请选择您需要的服务:</option>
<option value="choice1">我需要开水</option>
<option value="choice2">我需要食物</option>
<option value="choice3">我需要报纸和杂志</option>
<option value="choice4">我需要一点零食</option>
<option value="choice5">屋里太脏了,来打扫一下</option>
<option value="choice5">消费金额查询</option>
<option value="choice5">账单查询</option>
<option value="choice5">人工服务</option>
</select>
</div>
</div>
</body>
</html>
效果如下:
4.9 对话框中的表单
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>对话框中的表单</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>请点击登录按钮</h1>
</div>
<div data-role="content" style="height:430px;">
<a href="#popupLogin" data-rel="popup" data-role="button">登录</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>请输入用户名和密码</h3>
<label for="un" class="ui-hidden-accessible">用户名:</label>
<input name="user" id="un" value="" placeholder="用户名" type="text">
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input name="pass" id="pw" value="" placeholder="密码" type="password">
<button type="submit" data-icon="check" data-theme="b">登录</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
效果如下:
还可以通过修改div中的style属性设置对话框的高度和宽度。