手机端Form简单表单制作
闲的无聊,回顾一下原来写的东西好了。
手机端表单效果图如下:
步骤1:定义好框架
body设置背景色,在body中添加out盒子,用来装form表单。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myForm</title>
<style>
body {
height: 780px;
width: 480px;
background-color: #CCCCCC;
}
body,
input,
textarea {
font-family: "helvetica", arial, helvetica;
}
#out {
background-color: #EEEEEE;
width: 93%;
height: 800px;
padding: 8px;
}
div {
padding: 10px;
}
</style>
</head>
<body>
<div id="out"></div>
</body>
</html>
步骤2:在out盒子中添加form表单,设计上部分的Runner,Tel#,email及DOB控件。可以看出Runner的输入框的type类型是text,Tel#的输入框的type类型是phone,email的输入框的type类型是email,而DOB的type类型是date。所以有:
<div id="out">
<h1> Sign Up Today</h1>
<div>
<label for="runner">Runner:</label>
<input id="runner" name="runner" type="text" placeholder="First and last name" required />
</div>
<div>
<label for="phone">Tel#:</label>
<input id="phone" name="phone" type="tel" placeholder="(xxx) xxx-xxx" required />
</div>
<div>
<label for="email">email:</label>
<input id="email" name="email" type="email" placeholder="For confirmation only" required />
<div>
<label for="dob">DOB:</label>
<input id="dob" name="dob" type="date" min="1990-01-01" max="2016-01-01" />
</div>
</form>
</div>
上面placeholder属性的值可以显示在输入框内,起提示作用。
还要添加lable标签的样式(在style内部添加),使lable都右对齐,这样界面看起来更漂亮。
label {
display: block;
float: left;
clear: left;
text-align: right;
width: 100px;
margin-right: 10px;
}
步骤3:在id=“dob”的div下面添加fieldset 标签制作表单第二部分,fieldset 元素可将表单内的相关元素分组,legend类似fieldset 的标题。效果可以参见上面的效果图。fieldset 标签内部同样用div包裹每一小组控件。
通过list特性和datalist元素,能够为某个输入型控件构造一张选值列。
(1)创建id特性唯一的datalist元素,改元素可以插入文档任意位置。
(2)添加若干option元素作为datalist元素的子元素,他们表示某控件推荐值的全集。
最后注意:type=”radio”的单选组name值要相同。
在style样式中定义fieldset 的样式。
fieldset 的style样式:
fieldset {
border: 1px solid ;
margin-bottom: 20px;
}
fieldset内代码:
<fieldset>
<legend>T-shirt Size</legend>
<div>
<label for="small">Small:</label>
<input id="small" name="tshirt" type="radio" value="small"/>
</div>
<div>
<label for="medium">Medium:</label>
<input id="medium" name="tshirt" type="radio" value="medium"/>
</div>
<div>
<label for="largre">Large:</label>
<input id="largre" name="tshirt" type="radio" value="largre"/>
</div>
<div>
<label for="style">Shirt-style:</label>
<input id="style" name="style" type="text" list="stylelist" title="Years of participation" />
<datalist id="stylelist">
<option value="White" label="1st Year">
<option value="Grey" label="2nd - 4th Year">
<option value="Navy" label="Veteran (5+ Year)">
</datalist>
</div>
</fieldset>
步骤4在fieldset标签下面再添加一个fieldset 标签和提交按钮制作表单第三部分,基本原理同步骤3.
<fieldset>
<legend>Expectations</legend>
<div>
<label for="confidence">Confidence:</label>
<input id="confidence" name="level" type="range" onchange="confidenceDisplay.value=(value + '%')" min="0" max="100" step="5" value="0" />
<output id="confidenceDisplay">0%</output>
</div>
<p>
<label for="notes">Notes:</label>
<textarea id="notes" name="notes" maxlength="140"></textarea>
</p>
</fieldset>
<p>
<input type="submit" name="register" value="Register" />
</p>
步骤5:写手机端相应代码,表单提交验证和提交显示信息的js代码。
<script type="text/javascript">
window.onload = function() {
resetPage();
}
window.onresize = function() {
resetPage();
}
function resetPage() {
var deviceWidth = document.documentElement.clientWidth,
scale = deviceWidth / 480;
document.body.style.zoom = scale;
}
function invalidHandler(evt){
var lable = evt.srcElement.parentElement.getElementsByTagName("label")[0];
lable.style.color = 'red';
evt.stopPropagation();
evt.preventDefault();
}
function loadDemo(){ document.register.addEventListener("invalid",invalidHandler,true);
}
window.addEventListener("load",loadDemo,false);
function check(){
alert("Runner:"+ document.forms["frm1"]["runner"].value+'\n'+
"Tel#:"+document.forms["frm1"]["phone"].value+'\n'+
"E-mail:"+document.forms["frm1"]["email"].value+'\n'+
"DOB:" + document.forms["frm1"]["dob"].value + '\n' +
"Shirt style:"+document.forms["frm1"]["style"].value+'\n'+
"T-shirt Size:" + document.forms["frm1"]["tshirt"].value + '\n' +
"Expectations:"+document.forms["frm1"]["confidence"].value+"%"+'\n'+
"Notes:"+document.forms["frm1"]["notes"].value+'\n');
}
</script>