概述
HTML中<form>元素被用来表示一个区域，该区域中的控件，可以用来向服务器提交数据。
常用属性
-
action: 表示处理form的URL。 -
method: 表示提交表单的方法 -
enctype: 提交form给服务器的内容的 MIME 类型。-
application/x-www-form-urlencoded: 如果属性未指定时的默认值 -
multipart/form-data: 这个值用于一个 type 属性设置为file的 <input> 元素 text/plain (HTML5)-
target: 一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复。
-
method方法中 POST和GET区别
GET是向服务器获取数据，POST是向服务器上传数据。
-
数据提交方式
使用GET，数据被拼接成URL向服务器发送请求 如
http://test.com/login?user=admin&password=123
使用POST, 数据被包装在请求的body中向服务器发送请求。 安全性
POST的安全性高于GET,因为GET的数据会直接显示在URL里面
- 编码
GET只能发送ASCII字符，POST可以则可以发送整个ISO 10646中的字符。在Form中的enctype中，当属性为`multipart/form-data`,（form 数据中包含文件),只能使用POST
-
提交的数据长度
GET提交的长度为2083个字符，受制于URL的长度。
-
缓存
GET提交的记录会被浏览器缓存。在历史记录中。
表单常用的input标签
form表单的作用可以收集信息，提交给网站后台。常用的input标签如下：
-
text: 单行字段。 -
password: 一个值被遮盖的单行文本字段，使用maxlength可以指定输入的值的最大长度。 -
checkbox: 复选框。使用value属性定义控件被提交的值。使用checked属性表示控件是否被选择。 -
radio: 单选按钮，使用value属性定义控件被提交的值。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 -
file: 可让用户选择文件。accept属性控制可以选择文件的类型。 -
hidden: 不显示在页面的上的控件，但是值会被提交到服务器。 -
button: 无缺省行为的按钮。 -
submit: 用于提交表单的按钮 -
reset: 用于将表单所有内容设置为缺省值的按钮
代码示例
<form action="/userInfo" method="post"> <div class="name"> <label for="name">姓名：</label> <input type="text" id="name" name="name" placeholder="用户名"> </div> <div class="password"> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="输入密码"> </div> <div class="gender"> <label for="gender">性别：</label> <input type="radio" name="gender" value="male">男 <input type="radio" name="gneder" value="female">女 </div> <div class="sex"> <label for="sex">取向：</label> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 </div> <div class="hobby"> <label for="hobby">爱好：</label> <input type="checkbox" name="hobby" value="dota">dota <input type="checkbox" name="hobby" value="旅游">旅游 <input type="checkbox" name="hobby" value="宠物">宠物 </div> <div class="comment"> <label for="comment">评论：</label> <textarea name="comment" id="comment" cols="30" rows="10" placeholder="评论"></textarea> </div> <div class="myCar"> <label for="myCar">我的Car:</label> <select name="myCar" id="myCar"> <option value="bmw">宝马</option> <option value="benz" selected>奔驰</option> <option value="audi">奥迪</option> </select> </div> <input type="submit" value="提交"> </form>其他
-
<label>元素中for属性表示，当点击label时，for对应id的元素会被focus。
-
