【Web前端】表单

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:域容器的标题