相當于一個控件集合，里面包含很多控件，點“提交”后會把表單中的所有控件的值都傳給action到的頁面，form里有一個method屬性，method有兩個屬性，分別是 “post” 和 “get”，當我們用post時，會隱藏表單中的所有值，當method屬性為 “get”時，可以查看到值，也就是所有值。
廢話不多說，弄一個例子給大家看看。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>百度注冊</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
.box{
width: 440px;
}
.box form{
width: 100%;
}
.form-item{
margin-bottom: 22px;
}
.form-item .title{
width: 80px;
font-size: 14px;
color: #666;
line-height: 40px;
padding-right: 10px;
text-align: right;
float: left;
}
.form-item .inp{
width: 350px;
height: 40px;
float: right;
}
.form-item .inp input{
width: 100%;
height: 100%;
padding-left: 10px;
font-size: 13px;
color: #757575;
}
.form-item .inp input.read-inp{
width: 10px;
height: 10px;
}
.form-item .inp span{
font-size: 12px;
color: #666;
}
/*.read-content .title{
height: 15px;
}
.read-content .inp{
height: 15px;
}*/
.read-content{
height: 15px;
}
.form-item .inp a{
color: #1b66c7;
text-decoration: none;
}
.form-item .inp .register-btn{
width: 350px;
height: 50px;
border: none;
border-radius: 2px;
background: #3f89ec;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<form action="" method="post">
<div class="form-item clearfix">
<!-- 用戶名 -->
<div class="title">
<label for="username">
用戶名
</label>
</div>
<div class="inp">
<input type="text" name="username" id="username" value="" placeholder="請設置用戶名" />
</div>
</div>
<!-- 手機號 -->
<div class="form-item clearfix">
<div class="title">
<label for="number">
手機號
</label>
</div>
<div class="inp">
<input type="text" name="number" id="number" value="" placeholder="可用于登錄和找回密碼" />
</div>
</div>
<!-- 驗證碼 -->
<div class="form-item clearfix">
<div class="title">
<label for="checkcode">
驗證碼
</label>
</div>
<div class="inp">
<input type="text" name="checkcode" id="checkcode" value="" placeholder="請輸入驗證碼"/>
</div>
</div>
<!-- 密碼 -->
<div class="form-item clearfix">
<div class="title">
<label for="password">
密碼
</label>
</div>
<div class="inp">
<input type="text" name="password" id="password" value="" placeholder="請設置登錄密碼"/>
</div>
</div>
<!-- 用戶協議 -->
<div class="form-item clearfix read-content">
<div class="title"></div>
<div class="inp">
<input type="checkbox" name="read" id="read" value="" class="read-inp" />
<span>
閱讀并接受<a href="#">《百度用戶協議》</a>及<a href="#">《百度隱私權保護聲明》</a>
</span>
</div>
</div>
<!-- 注冊按鈕 -->
<div class="form-item clearfix btn">
<div class="title"></div>
<div class="inp">
<input type="button" name="btn" id="btn" value="注冊" class="register-btn" />
</div>
</div>
</form>
</div>
</body>
</html>
百度注冊.jpg
