1.表单简介
- 表单主要是让用户输入信息，用来收集用户信息，并且提交给后台做处理。
- 表单包含了一些表单域元素，包括文本框、密码框、单选按钮、复选按钮、下拉列表等等例
- 如:百度、邮箱登录
2.表单标签
2.1 form表签
- 与用户进行交互，收集用户信息，form表单最外层的元素属性
- action：表单提交的服务器处理的URL地址
- method：表单提交到服务器的方法，主要用到get和post方法
2.2 GET和POST方法
- GET请求和POST请求都是HTTP的请求方法
- HTTP底层是TCP/IP。所以GET和POST的底层也是TCP/IP，都是TCP链接。
- HTTP设定了不同的服务类别，有GET、POST、PUT、DELETE等等。HTTP要求当使用GET请求时，贴上GET标签，并且把传输的数据放在车顶部(URL中)，以请求头方式传递。如果是POST请求，贴上POST标签，并且把传输的数据放在车厢里。
- 区别1:URL可见性不同:get请求的参数url可见，而post请求的参数在url不可见。
- get请求通过urI直接请求数据，因此数据信息可以在url地址中直接看到。post请求是将请求放在请求体中，用户无法直接看到。
- 不同的浏览器和服务器不同。数据量太大对于浏览器端和服务器端处理比较麻烦,带来很大负担。
- 大多数浏览器，通常都会对url长度有一个2k个字节的限制。大多数服务器会限制最多处理64k大小的url。
- 区别2:get传送的数据比较小，有限制，通常是2KB，post传送的数据量比较大，一般被默认为不受限制。
- 区别3:get请求因为参数和数据都是暴露在URL地址中，所以安全性比较低，post请求中，安全性较高，对于敏感数据，可以使用post
- 区别4:get限制form表单的数据集是ASCII字符，而post支持较多字符集
- 区别5:get请求产生一个TCP数据包，而post请求产生两个TCP数据包。
- 区别6:在应用上，通常使用get从服务器上获取数据(查询)，post通过是向服务器传送数据
2.3 元素标签
2.3.1 input标签
- text 单行文本域
- password 密码框，以密文显示
- radio 单选按钮，一组单选按钮名字相同
- checkbox 复选框
- file 文件选择，用来实现上传的控件
- button 普通按钮
- submit 提交按钮
- reset 重置按钮
- hidden 隐藏表单域
- image 用图片代替submit按钮
- search 产生一个搜索意义的文本框
- email 电子邮箱,要求格式必须是邮箱格式
- url 网址url，要求格式必须是url地址格式
- number 数字类型
- tel 电话号码
- color 颜色选择
- range 滑动条
- date 日期控件
- time 时间控件
- datetime 日期和时间控件，chrome和firefox不支持
- datetime-local 日期和时间控件
- month 月份选择控件
- week 星期控件
2.3.2 input属性
- name 为控件取名，方便后台程序进行值的读取
- id 每个html控件，都可以有一个唯一的id
- value：对于text、password、hidden等有文本输入的表单域对象，设置默认值；对于radio、checkbox用来向后台传递给定的值；对于reset、submit、button按钮，用来定义按钮上的文字
- checked 用于设置单选或复选按钮初始时选中状态(radio、checkbox)
- size 用于输入类型，设置显示的字符数(一般不使用)
- maxlength 设置输入类型最大值
- min 定义number类型最小值
- max 定义number类型最大值
- step 定义number类型的步长
- placeholder 为输入类型生成一个文字提示，当内容为空时出现
- readonly 设置输入类型为只读
- disabled 禁止选择控件
- required 要求控件必须有值,输入型必须要有值，选择型必须选中值
- autocomplete 是否使用自动完成功能，默认是使用，关闭选择off
- tabindex 定义按tab键的顺序
- autofocus 定义光标自动聚集到指定控件
- novalidate 取消表单验证效果
- pattern 正则验证
2.3.3 其他标签
2.3.3.1 label标签
- input元素有id，使用label标签的for属性，绑定对应的id，就可能实现，点击label，获取相应的控件点击。
2.3.3.2 下拉列表
- 使用select标签，其中选项，使用option
- 属性:
- select标签属性：multiple:设置可以多选；size:列表每次展示选项个数
- option标签属性：value:真正传入后台服务器的值；selected: 被标识的选项是默认选中项
- optgroup：将option进行分组；label:分组名称
2.3.3.3 datalist标签
- html5标签
- 使用datalist,可以实现下拉选项，并能根据用户的输入，进行过滤选择，并且，如果在选择中没有用户需要的，用户可以自行输入值
2.3.3.4 文本区域标签
- 使用textarea标签，cols属性设置列，rows属性设置行，通常使用css来控制宽度和高度。
- 默认值写在起始标签和结束标签中间
2.3.3.5 域容器标签
- fieldset:将一组控件组织在一起，使用一个方框套起来
- 可以使用样式表进行整体设置
- legend:域容器的标题