手機端Form簡單表單制作
閑的無聊，回顧一下原來寫的東西好了。
手機端表單效果圖如下：
步驟１：定義好架構
body設定背景色，在body中添加out盒子，用來裝form表單。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myForm</title>
<style>
body {
height: px;
width: px;
background-color: #CCCCCC;
}
body,
input,
textarea {
font-family: "helvetica", arial, helvetica;
}
#out {
background-color: #EEEEEE;
width: %;
height: px;
padding: px;
}
div {
padding: px;
}
</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: px;
margin-right: px;
}
步驟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: px solid ;
margin-bottom: px;
}
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 / ;
document.body.style.zoom = scale;
}
function invalidHandler(evt){
var lable = evt.srcElement.parentElement.getElementsByTagName("label")[];
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>
![網絡爬蟲理論基礎[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)