与我们平时填写的纸质表单一样，HTML表单用于搜集不同类型的用户输入。
表单是一个包含表单元素的区域，表单元素是允许用户在表单中(比如：文本域、下拉列表、单选框、复选框等)输入信息的元素。
demo:
<form action="#" method="get">
<label for="input_name">用户名</label>
<input type="text" id="input_name" name="name">
<br/>
<label for="input_password">密码</label>
<input type="password" id="input_password" name="password">
<br/>
<button>提交</button>
</form>
form标签里面有两个重要的属性：action和method
- action是表单提交的地址；
- method表示表单提交的方式，get或者post；
get和post的区别
- get方式会将数据放在URL中。
- 使用？分隔url和参数；
- & 分隔参数；
- url的长度有限制，所以传递的数据不能太多；
- post方式会将传输的数据放在http正文。
| 操作方式 | 数据位置 | 明文密文 | 数据安全 | 长度限制 | 应用场景 |
|---|---|---|---|---|---|
| GET | http包头 | 明文 | 不安全 | 长度较小 | 查询数据 |
| POST | http正文 | 可明可密 | 安全 | 支持大数据传输 | 修改数据 |
总结：查询数据，使用GET；修改、传递数据使用POST；安全性高、传递较慢的使用POST，高速、传递数据少、不要求安全性的使用GET。
form
form标签时表单的外壳，主要有四个属性
- action：表单提交的地址；
- method：表单提交的方式；
- target：在何处打开action；
-
enctype：
- application/x-www-form-urlencoded:在发送前编码所有字符(默认)；
- text/plain:空格转换成" + "加号，但不对特殊字符编码；
- multipart/form-data:使用包含文件上传控件的表单时，必须使用该值；
text
默认的文本输入框，默认不能换行。例：
<label for="username">用户名</label>
<input type="text" name="username" id="username">
text
password
页面不会以明文的形式展示的输入框，自动以小圆点显示。
<label for="password">密码</label>
<input type="password" name="password" id="password">
password
checkbox
多选框，value值需要手动设置，同一组使用设置相同的name属性标识；
<label>爱好</label>
<br>
<input type="checkbox" name="hobby" value="read" id="read">
<label for="read">阅读</label>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">音乐</label>
<input type="checkbox" name="hobby" value="basketball" id="basketball">
<label for="basketball">篮球</label>
checkbox
radio
单选框，和checkbox类似，同意组别的radio使用相同的name属性；但是只能选中一个。
<label>性别：</label>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
radio
file
打开文件选择对话框
- accept属性， 只能选中对应的文件。
<input type="file" name="open_file" accept="image/png">
file
select
下拉选择框，使用selected确认默认显示的标签元素
<select name="city" id="choose_city">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="guangzhou">广州</option>
</select>
select
textarea
多行文本
<textarea name="article" id="article_1" cols="30" rows="10"></textarea>
textarea
hidden
hidden隐藏用户看不见的参数，可以被form提交到服务器。这个标签可以做一些很酷的事情，比如避免csrf攻击；
<input type="hidden" name="hidden_value" value="tom">
button、submit、reset
<input type="reset" value="清空"> <!-- 清空表单的输入项 -->
<input type="submit" value="提交"> <!-- 提交表单按钮 -->
作业5
- 在input里，name有什么作用？
- 作为可与服务器交互数据的HTML元素的服务器端的标示。例如：
使用get方式传递数据时的url地址：
www.xxx.com?username=tom&password=123456
<!-- 其中，username和password就是input中的name属性值。 -->
- 将radio和checkbox等标签内容分组。
- radio如何分组
给radio设置相同的name
<label>性别：</label>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
- placeholder属性有什么作用？
w3school给的定义和解释如下：
属性提供可描述输入字段预期值的提示信息（hint）
最直观的感受是，输入框或者其他类型的表单展现会有提示信息填充在表单中，并且输入框获得焦点后会自动消失。
- CSRF是什么？如何防止？
SRF全名是Cross-site request forgery，中文名称是跨站请求伪造。通过伪造用户请求，获取网站信息的操作。
预防措施：- 验证Referer；
- 使用验证码；
- 增加token验证
- GET请求， token 将附在请求地址之后，这样 URL 就变成 http://url?csrftoken=tokenvalue。
- POST 要在 form 的最后加上 <input type="hidden" name="csrftoken" value="tokenvalue"/>，这样就把token以参数的形式加入请求了。
- type=hidden隐藏域有什么作用? 举例说明
hidden隐藏域可以将某些不想要让用户看见的属性藏起来，也可以用来防范CSRF攻击。
在hidden中隐藏需要校验的token，form提交时会自动将hidden中的内容也提交到服务器。这样我们就能在后台校验token是否正确，从而检查是不是CSRF攻击了。
再有就是隐藏属性，比如页面登录的用户id是1，每次发送请求都要检查用户的id，但是又不想被用户看到这个隐藏的属性，就使用hidden把id这个属性当成普通属性值藏起来。
网友评论