form表单，百度注册
2017-09-03 本文已影响0人
隔壁小犊子i
相当于一个控件集合，里面包含很多控件，点“提交”后会把表单中的所有控件的值都传给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
