通過一個案例來總結一下之前學過的東西，因爲一直沒總結，覺得自己都會了，然而敵不過遺忘。藉此機會，正好作爲筆記。
From表單
在from表單中可以進行前後端的數據交互。以下是部分屬性：
form：
method(提交方式)：get / post
action(提交的地址)：
target(目標打開的方式)：_blank / _self / _parent / _top / framename
input：
type(輸入框類型):text / password / button / submit / radius / checkbook
name(輸入的值類型):
value(輸入的值):
button：
submit：
相信。。。看這篇博客你應該是對Form有所瞭解，或者你繼續一個Form模板。。。。。那你看對了，我就給你一個模板案例：（這個模板是可以在直接用的）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>提交表單</title>
<style type="text/css">
body
{
background: #d3fef4;
background-image: url("http://pic.netbian.com/uploads/allimg/190902/201404-15674264444b34.jpg");/*設置背景圖片*/
background-repeat:no-repeat;/*圖片適應窗口大小，這裏設置的是不進行平鋪*/
background-attachment: fixed;/*圖片相對於瀏覽器固定,這裏設置背景圖片固定，不隨內容滾動*/
background-origin: border-box;/*從邊框區域顯示*/
background-size:cover;
color:white;
font-size:20px;
}
.button{
background-color: #b3fcfe;
border-radius: 4px;
border: none;
color: #000000;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
}
.list{
background-color: rgba(210, 247, 255,0.9);
color: black;
line-height:30px;
}
</style>
</head>
<body>
<div class="top">
<h2>招聘頁</h2>
<P>奇怪的知識增加了，今日的沙雕有你嘛？如果有的話，那我們就品一下？報名，報名我就看到了~</P>
</div>
<div >
<fieldset class="list">
<legend >需要填寫一下內容</legend>
<form method="get" name="form1" action="submit.html">
<!-- <lable name="">中的name 與 id 相聯繫 -->
<label for="name">
姓名：<input type="text" id="name" name="name" required="required" placeholder="必填"/>
</label>
<!-- 單選框想要實現同一組，必須使用name 屬性 -->
<div>
性別：
<label for="man"><input type="radio" value="男" name="sex" id="man" checked="checked" />男</label>
<label for="woman"><input type="radio" value="女" name="sex" id="woman"/>女</label>
</div>
<label for="yearsold">年齡範圍：
<select name="yearsold" id="yearsold">
<option value="18歲以下">18歲以下</option>
<option value="18-28歲">18-28歲</option>
<option value="28-38歲">28-38歲</option>
<option value="38-48歲">38-48歲</option>
<option value="48歲以上">48歲以上</option>
</select>
</label><br/>
<label>愛好：
<!-- 同樣使用name屬性進行分組設置 -->
<input type="checkbox" name="like" value="下次一定"/>下次一定
<input type="checkbox" name="like" value="下次也不一定"/>下次也不一定
<input type="checkbox" name="like" value="白嫖到底"/>白嫖到底
<input type="checkbox" name="like" value="白嫖失敗"/>白嫖失敗
</label><br />
<label>電子郵件:
<input type="email" name="email" />
</label><br/>
<label>固定電話：
<input type="tel" name="tel" pattern="([0-9]{7})|([0-9]{11})" placeholder="0-9的7位或11位數字"/>
</label><br/>
<label>公司：
<input type="text" id="company" name="company" required="required" placeholder="必填"/>
</label><br/>
<!-- rows行 cols列 -->
<label>
備註信息：<textarea name="intro" rows="2" cols="15" placeholder="備註"></textarea>
</label>
<br/>
<button class="button" type="reset">取消</button>
<button class="button" type="submit" id="btn" >發送</button>
</form>
</fieldset>
</div>
<script>
submit=location.search;
submit=decodeURIComponent(submit);
var formlist=submit.split("&");
console.log(formlist);
check_val = [];
if(formlist.length>7)
{
for(var i=3;i<=formlist.length-5;i++)
{
var n = formlist[i].split("=");
// console.log(n[1]);
check_val.push(n[1]);
}
console.log(check_val);
}
var name = formlist[0].split("=")[1];
// console.log(formlist[0]);
var sex = formlist[1].split("=");
var yearsold = formlist[2].split("=");
var email = formlist[formlist.length-4].split("=");
var tel = formlist[formlist.length-3].split("=");
var company = formlist[formlist.length-2].split("=");
var intro = formlist[formlist.length-1].split("=");
var test=window.open("../test/submit.html");
test.document.write(
"<style type=\"text/css\">"+
"body\n" +
" {\n" +
" background: #d3fef4;\n" +
" background-image: url(\"http://pic.netbian.com/uploads/allimg/190902/201404-15674264444b34.jpg\");" +
" background-repeat:no-repeat;" +
" background-attachment: fixed;" +
" background-origin: border-box;" +
" background-size:cover;\n" +
" color:white;" +
" font-size:20px;" +
" padding:20px;"+
" }"+
".list{\n" +
" background-color: rgba(210, 247, 255,0.9);\n" +
" color: black;\n" +
" line-height:30px;\n" +
" }"
+"</style>"
+"<div class='list'>"
+"<p>"+"姓名："+name+"</p>"
+"<p>"+"性別："+sex[1]+"</p>"
+"<p>"+"年齡："+yearsold[1]+"</p>"
+"<p>"+"愛好："+check_val+"</p>"
+"<p>"+"Email："+email[1]+"</p>"
+"<p>"+"電話："+tel[1]+"</p>"
+"<p>"+"公司："+company[1]+"</p>"
+"<p>"+"備註："+intro[1]+"</p>"
+"</div>"
);
</script>
</body>
</html>
