1、关于form表单的基础

• form表单：是一个包含表单元素的区域；作用，用于包裹表单元素。
• 表单元素：是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等）输入信息的元素。作用，搜集填写的用户信息，提交给后台（服务器）。

1.1 form标签语法

form 将表单元素包裹起来，受form包裹的表单元素才会提交给服务器。
<form action=”地址” method=””>
表单元素
</form>
form标签是表单的外壳，主要有四个属性：
action：表单提交的地址（后台服务器地址）
method：提交表单的方法，两种请求方式，post、get
target：在何处打开action
enctype：（编码方式）
applocation/x-www-form-erlencoded 在发送前编码所有字符（默认）
text/plain：空格转换为”+”号，但不对特殊字符编码
multipart/form-data：使用包含文件上传控件的表单时，必须使用该值。例如：上传音频、视频。

1.2 post和get两种方式向服务器（后台）提交数据

 - get方式是URL的一个拼接，信息组装，URL变成“服务器地址?元素=元素输入&元素=元素输入。（K=value的形式）
 - post方式，URL没发生变化，数据和参数发给服务器，URL无变化。

1、区别：（体现在方式、安全、数据量三个方面）
- 方式，点击提交（发请求时），get将请求数据变成”k=value”的形式，然后组装到URL上。post方式提交请求时，数据通过浏览器传输给后台，但是URL没发生变化。
- 安全，get将信息组装到URL上，信息泄露，不安全；post方式的URL没发生变化更加安全。
- 数据量，浏览器地址栏能存放的字符有限的（容量有限），get方式的URL过于冗长，当超出限制时，浏览器自动截断URL，则传给后台的数据不完整，所以对数据大小有限制。而post方式的URL更干净、轻便，能完整地将数据传递给后台，无数据大小限制。

2、什么时候用get，什么时候用post（使用场景）
get：向后台查询东西，如查询论文；即向后台索要数据，用关键词来获取大量数据。安全性要求低，简单。
post：向后台传数据，例论文查重（数据很大，提交给后台）。安全性要求高。

2.2 label标签和input标签

(1) label标签

- 表单元素(input标签)的名称
- 语法：<label for=”id”>名称</label>  
- 其中for对应id的值，使点击文字时，input选框也变为focus状态(input选框被点击时，变为focus状态才能输入)。

(2) input标签

是表单收集信息的元素，主要有以下属性：

• type=”123...” : 表单元素的方式，即标签（输入）类型，
  常用有：text, textarea, password, radio, checkbox, select, file, hidden, button, submit, resect, placeholder等。此外，HTML新增了输入类型：color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week。
• name=”123...” : 表单元素的控件名，用于对提交到服务器后的表单数据进行标识，只有设置了name属性的表单元素才能在提交表单时传递数据。
  具体用途有：
  1、作为可与服务器交互数据的HTML元素的服务器端的标示。 2、对于标签类型radio, checkbox的分组，是根据相同的name属性来实现的。例如checkbox中，name需一致，则选项才为一类、一组。Radio中，name需一致。 3、其它用途有待学习。
• value=”123..” : value属性规定输入字段的初始值。value里的值是提交给后台，只有将选项确定了value值后，后台才可以看到提交的信息。
  注意：浏览器把数据传递给后端时，把数据组装成k=value的形式；其中，name就是k，而value就是等号后的值，给后台（服务器）识别，然后进行处理。因此所有的表单元素标签里要有name, 而value属性有两种情况：1、当数据要选择时，则必须有对应选择项的value值，例如radio、checkbox；2、当数据要输入时，则提交输入的数据，如text、password。这里的数据可以输入，也可以在input标签中设置初始value值。值得注意的是在textarea闭合标签中，初始value放在开后标签和闭合标签之间。
• placeholder属性，用来描述输入字段预期值的提示，不影响数据的value值。
• 其它属性：readonly属性（规定输入字段为只读），disabled属性（规定输入字段是禁用的）；size属性（规定输入字段的尺寸）；maxlength属性（规定输入字段允许的最大长度，以字符计）。
• HTML5新增属性，以后补充。

2、常见表单元素标签的用法

2.1 type="text"

<label for="input_username">姓名：</label> <input type="text" name="username" id="input_username" placeholder="用户名"/>
效果：

注意：输入文本，显示文本，单行输入，不可换行。

2.2 type="password"

<label for="input_password">密码：</label> <input type="password" name="password" id="input_password" placeholder="密码"/>
效果：

Paste_Image.png
注意：输入文本，显示••

2.3 type="radio"

      <label>性别：</label>
      <input type="radio" name="sex" value="famle"/>男
      <input type="radio" name="sex" value="male"/>女

效果：

Paste_Image.png
注意：单选框， name要相同才能实现单选，且需要设置好value=""

2.4 type="checkbox"

` <label>爱好：</label>
 <input type="checkbox" name="hobby" value="dota"/>dota
 <input type="checkbox" name="hobby" value="travel"/>旅游
 <input type="checkbox" name="hobby" value="pet"/>宠物 `

效果：

Paste_Image.png
注意：name一致，需要设置value=""，否则在后台无法显示选择，只是显示大类”name”。

2.5 select 下拉菜单

<label>我的car：</label> <select name="transportation"> <option value="bus">公交</option> <option value="subway" selected>地铁</option> <option value="taxi">出租车</option> </select>
效果：

Paste_Image.png
注意：也需设置name，value若需默认选择某一项，则在对应此项的option里加入 selected。

2.6 type="textarea"

<label >评论：</label> <textarea name="recomment" placeholder="ddd" cols="60" rows="10"></textarea>
效果：

Paste_Image.png

2.7 type="file"

<label for="zjz">证件照：</label> <input type="file" name="photo" id="zjz" accept="image/jpg"/>
其中accept规定了文件格式。
效果：

Paste_Image.png

2.8 type="hidden"

<input type=”hidden” name=”abc” value=”123”>
点击提交时，hidden里隐藏的数据也提交给了后台；abc=’123’
作用：（1）暂存信息，（用户看不到），便于设计者随时调用程序。
（2）用于安全性校验，例如通过设置hidden隐藏域，服务器可以验证用户权限，避免伪造的假网站提交数据。

2.9 type="button"

<input type="button" value="按钮"/>
效果：

Paste_Image.png

2.10 type="submit"

<input type="submit" value="提交"/>
效果：

Paste_Image.png

2.11 type="reset"

<input type="reset" value="复位"/>
效果：

Paste_Image.png