HTML表单

与我们平时填写的纸质表单一样，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中。
  1. 使用？分隔url和参数；
  2. & 分隔参数；
  3. url的长度有限制，所以传递的数据不能太多；
• post方式会将传输的数据放在http正文。

操作方式	数据位置	明文密文	数据安全	长度限制	应用场景
GET	http包头	明文	不安全	长度较小	查询数据
POST	http正文	可明可密	安全	支持大数据传输	修改数据

总结：查询数据，使用GET；修改、传递数据使用POST；安全性高、传递较慢的使用POST，高速、传递数据少、不要求安全性的使用GET。

form

form标签时表单的外壳，主要有四个属性

1. action：表单提交的地址；
2. method：表单提交的方式；
3. target：在何处打开action；
4. 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

1. 在input里，name有什么作用？

• 作为可与服务器交互数据的HTML元素的服务器端的标示。例如：
  使用get方式传递数据时的url地址：

www.xxx.com?username=tom&password=123456
<!-- 其中，username和password就是input中的name属性值。 -->

• 将radio和checkbox等标签内容分组。

---

2. 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>

---

3. placeholder属性有什么作用？
   w3school给的定义和解释如下：

属性提供可描述输入字段预期值的提示信息（hint）

最直观的感受是，输入框或者其他类型的表单展现会有提示信息填充在表单中，并且输入框获得焦点后会自动消失。

---

4. CSRF是什么？如何防止？
   SRF全名是Cross-site request forgery，中文名称是跨站请求伪造。通过伪造用户请求，获取网站信息的操作。
   预防措施：
   1. 验证Referer；
   2. 使用验证码；
   3. 增加token验证
      • GET请求， token 将附在请求地址之后，这样 URL 就变成 http://url?csrftoken=tokenvalue。
      • POST 要在 form 的最后加上 <input type="hidden" name="csrftoken" value="tokenvalue"/>，这样就把token以参数的形式加入请求了。

参见：CSRF 攻击是什么？如何防范？

---

5. type=hidden隐藏域有什么作用? 举例说明
   hidden隐藏域可以将某些不想要让用户看见的属性藏起来，也可以用来防范CSRF攻击。
   在hidden中隐藏需要校验的token，form提交时会自动将hidden中的内容也提交到服务器。这样我们就能在后台校验token是否正确，从而检查是不是CSRF攻击了。
   再有就是隐藏属性，比如页面登录的用户id是1，每次发送请求都要检查用户的id，但是又不想被用户看到这个隐藏的属性，就使用hidden把id这个属性当成普通属性值藏起来。