HTML表单
2016-11-29 本文已影响26人
HungerLyndon
作为一名小白，我在上若愚老师直播课的时候，觉得表单真的好难好难啊！
这次认真总结一下：
表单的作用
HTML表单用于搜集用户的信息输入
表单简介
表单是一个包含表单元素的区域，表单元素是允许用户在表单输入内容的元件，比如：文本域、下拉列表、单选框、复选框等。表单必须使用表单标签来设置：
<form>
input元素
</form>
多数情况下被用到的表单标签是输入标签<input>，输入类型是由类型属性type来定义的。
表单实际操作
- 文本域：text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
First Name: <input type="text" name="firstname"><br>
Last Name: <input type="text" name="lastname">
<button>提交</button>
</form>
</body>
</html>
Paste_Image.png
- 密码
密码字段通过标签<input type = "password">来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
First Name: <input type="text" name = "firstname"><br>
Last Name: <input type="text" name = "lastname"><br>
Password: <input type = "password" name = "password">
<button>提交</button>
</form>
</body>
</html>
- 单选按钮
用<input type = "radio">来定义表单单选选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
First Name: <input type="text" name = "firstname"><br>
Last Name: <input type="text" name = "lastname"><br>
Password: <input type = "password" name = "password"><br>
<p>单选</p>
<input type = "radio" name="sex" value="male">男性<br>
<input type = "radio" name="sex" value="female">女性
<button>提交</button>
</form>
</body>
</html>
Paste_Image.png
- 复选框
用<input type="checkbox">定义复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
First Name: <input type="text" name = "firstname"><br>
Last Name: <input type="text" name = "lastname"><br>
Password: <input type = "password" name = "password"><br>
<p>单选</p>
<input type = "radio" name="sex" value="male">男性<br>
<input type = "radio" name="sex" value="female">女性
<p>复选框</p>
<input type = "checkbox" name="vehicle" value="Bike">Bike<br>
<input type = "checkbox" name="vehicle" value="Car">Car<br>
<input type = "checkbox" name="vehicle" value="Motobike">Motobike
<button>提交</button>
</form>
</body>
</html>
Paste_Image.png
- 带有预选值的下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
First Name: <input type="text" name = "firstname"><br>
Last Name: <input type="text" name = "lastname"><br>
Password: <input type = "password" name = "password"><br>
<p>单选</p>
<input type = "radio" name="sex" value="male">男性<br>
<input type = "radio" name="sex" value="female">女性
<p>复选框</p>
<input type = "checkbox" name="vehicle" value="Bike">Bike<br>
<input type = "checkbox" name="vehicle" value="Car">Car<br>
<input type = "checkbox" name="vehicle" value="Motobike">Motobike
<p>下拉列表</p>
<select name="cars">
<option value="volvo">VOLVO</option>
<option value="benz">BENZ</option>
<option value="AUDI" selected>AUDI</option>
<option value="SAAB">SAAB</option>
</select>
<button>提交</button>
</form>
</body>
</html>
Paste_Image.png
- 提交按钮
<input type="submit">定义提交按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
First Name: <input type="text" name = "firstname"><br>
Last Name: <input type="text" name = "lastname"><br>
Password: <input type = "password" name = "password"><br>
<p>单选</p>
<input type = "radio" name="sex" value="male">男性<br>
<input type = "radio" name="sex" value="female">女性
<p>复选框</p>
<input type = "checkbox" name="vehicle" value="Bike">Bike<br>
<input type = "checkbox" name="vehicle" value="Car">Car<br>
<input type = "checkbox" name="vehicle" value="Motobike">Motobike
<p>下拉列表</p>
<select name="cars">
<option value="volvo">VOLVO</option>
<option value="benz">BENZ</option>
<option value="AUDI" selected>AUDI</option>
<option value="SAAB">SAAB</option>
</select>
<p>提交按钮</p>
Username: <input type="text" name="User">
<input type="submit" value="Submit">
<button>提交</button>
</form>
</body>
</html>
表单的action与method
- action：提交数据的后台地址
- method分为两种：get与post，两种不同提交方法的差异可以在Chrome“审查元素”——“Network”中查看到效果。
get：本质是URL的拼接，用key = value的形式来组装，形成新的URL，且传输数据量有一定限制，最多1k
post：URL不发生变化，但是参数仍然可以发送到服务器中：传输数据量无限制
两种方法都是浏览器向服务器提交数据的方式。
文章著作权归饥人谷_Lyndon和饥人谷所有，转载须说明来源
