任务5

form表单的作用

收集用户提交的数据并提交到后台

常用的input标签及作用

1.type="text"，用于输入普通文本
2.type="password"，用于输入密码
3.type="checkbox"，复选框
4.type="radio"，单选按钮
5.type="textarea"，可用于输入多行文本
6.type="file"，用于传送文件
7.type="hidden"，可以用于暂存数据和安全性校验
8."button","submit","reset"，依次为自定义功能按钮，提交按钮和重置按钮

post和get的区别

1.提交数据时post不会改变当前url，不会暴露提交的数据，而get会在url中显示提交的数据
2.post提交数据容量远大于get
3.get传输的数据在浏览器记录中可被发现

input中name的作用

可以标识每一段被提交的数据

radio如何分组

采用相同的name属性

placeholder的作用

占位，提示用户输入，不会影响用户输入也不会影响数据提交

type="hidden"的作用

提交一些不需要或者不想被用户看到的参数，或者存放临时值
也可以用于防御CSRF攻击，例如在表单中添加特定数值，在服务器中进行认证，可以避免绝大多数的CSRF攻击

html表单的简单用法

HTML表单是一个包含表单元素的区域， 表单使用<form> 标签创建。表单能够包含 <a target="_blank" title="HTML input 元素，比如文本字段、复选框、单选框、提交按钮等等。
1.表单的属性
action：规定当提交表单时，向何处发送表单数据
method：该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值，最常用的是get和post
target：该属性规定在何处显示action属性中指定的URL所返回的结果
enctype：规定在发送到服务器之前应该如何对表单数据进行编码
2.表单中包含的元素
除了之前提到的各种input标签外还包括复选框select及永福划分区域的fieldset等
3.使用演示（课程任务中的第8项）

<form>
   <div class="username">
      <label for="username">姓名</label>
      <input type="text" name="username">
   </div>
   <div class="password">
      <label for="password">密码</label>
      <input type="password" name="password">
   </div>
   <div class="sex">
      <label>性别</label>
      <input type="radio" name="sex" value="male">男
      <input type="radio" name="sex" value="female">女  
    </div>
    <div class="sex orientation">
      <label>取向</label>
      <input type="radio" name="orientation" value="male">男
      <input type="radio" name="orientation" value="female">女  
    </div>
    <div class="hobby">
      <label>爱好</label>
      <input type="checkbox" name="hobby" value="dota">dota
      <input type="checkbox" name="hobby" value="travel">旅游
      <input type="checkbox" name="hobby" value="pets">宠物
    </div>
    <div class="discuss">
      <textarea placeholder="ddd"></textarea>
    </div>
    <div class="car">
      <label>我的car</label>
      <select name="cars">
        <option value="wanjuche">玩具车</option>
        <option value="yaokongche" selected>遥控车</option>
      </select>
    </div>
    <input type="submit">
</form>

运行结果点这