HTML寒假学习总结（三）表单

表单

1、表单就是让用户提交数据到服务器的。用在收集用户数据的场景。
2、表单的标签是form。最重要的两个属性，action和method。
3、Action是一个url，用户提交的数据由哪个页面/服务器处理。
4、Method 是表示是用get方式提交还是post方式提交。
5、表单里面可以设计一些表单项或者一些控件。

Get和Post

1、认为get是一个比较安全的操作，是从服务器拿数据，每次操作返回的数据是一样的。Get请求在浏览器、运营商，会在中间缓存。在HTTP协议中，URL对get请求的处理是，把请求放到路径中一次性把数据发到服务器。
2、Post是向服务器提交数据，每次提交不一样，会修改服务器数据，不安全。浏览器不会缓存任何post数据。POST的内容先被编码，再放到url的body里面，再去提交。【head和Body是分两次发送的】
3、关于明文/密文的解释：一个是在URL里面，一个在HTTP的body里面。【其实编码的方式是一样的，只是能不能在url中看到而已】

URL编码

URL编码：转义的方式比较特别，把少数的特殊字符进行替换。
假如用户名有空格，如果是GET，在URL中会被转义。(不过现在新的方式好像是把空格替换为了+加号)【在服务器端处理的时候，复原用户的输入，可能需要处理加号或者是这种特殊的URL编码】
那么需要根据服务器使用的语言不同来做相应的处理，比如JS里面用decodeURIComponent来处理。

HTTP Method

1、GET
2、POST
3、HEAD
4、PUT
5、DELETE
6、OPTIONS

HEAD：Head方法不会有body返回。
DELETE：删除
OPTIONS：options也不会有具体的body返回。【options的使用场景：假设有个跨域请求，服务器发送options来询问这个请求是否可以跨越】

单行文本框

1、标签：input
2、使用：name 很重要，是向服务器发送的。在html中写一个value，代表的是默认值。

属性1：placeholder，灰色的文字来提示用户该输入什么。
属性2：autofocus：让用户focus在自己要输入的地方。

密码

密码：type=password，用小圆点显示。（移动浏览器上会显示最后一个字母，PC上都是小圆点）

多行文本框

输入验证[required pattern type nocalidate]

在HTML5之前，只能用jsp来验证，在html5中，可以验证一些基本规则。
(1)required实现 <input required minlength="9"> Required表示必填。这是一个布尔型的语言。
(2)使用正则表达式来验证：<input pattern="">Pattern是一个正则表达式，验证用户数输入的内容是否符合正则表达式。
(3)内置type来验证：<input type="url">Type最主要的作用，在可用性上做一些辅助。对于读屏软件，移动端的布局展示是有区别的。比如type=url，会展示http://， type=email，移动端的@符号会展示出来。最重要的输入验证，只有输入正确的type才能验证提交。
(4)Novalidate:如果在JS中实验了验证规则，一般就在html中写novalidate。<form action="/index" novalidate>

radio

1、radio：一般input输入框是建议使用其他的方式，比如选择框，就比较好。
2、如果name是相同的，那这三个就属于一个radio group，那么选中的状态就是互斥的。

checkbox

1、checkbox是复选框，可以选多个，也可以全选。
2、提交的方式是 & ，所以服务端需要按照 & 来解析数据。

label

1、label：提升易用性。checkbox只能点击小方块生效，而label扩大了点击范围，使得在点击文字的时候也能够选中。
2、实现方式：<label></label>
3、label也可以和input的框关联，相当于对这个input框做一个说明。

select

select：选项。加上multiple可以实现多选。（得按着shift键来选中多个）

optgroup

分组：optgroup
实现：<optgroup label="fruit"><option ><option>...

hidden

hidden：当某些要提交的信息并不想展示在页面上的时候。

文件选择

1、实现方式：<input type="file">
2、如果表单里包含了文件，需要在form里写一个 enctype= multipart/form-data，因为正常情况下字段都是以url编码的形式提交的，但是文件不行，得使用multipart的方式。multipart会用分隔符把要提交的内容隔开，服务器好处理。
3、加上multiple属性，HTML5可以支持多个文件上传。
4、HTML5还增加了一个accept属性，可以指定只能上传图片，实现方式为 accept="image/*"
5、实际很多时候并不会采用这种原生的方式去提交文件，因为有时候并不想一起提交这么多，这块儿很多时候是用AJAX来做。

date&time

HTML原生实现了日历控件。
<input type="date">
<input type="time">
<input type="month">

number & range

数字一般需要验证合法性。
number：会有上下箭头来增加和减少数字；可以点也可以自己输入。
range：是一个滑竿；
ps：这只是交互的区别。原生的组件长的都比较丑，css中会去美化各种组件。

button

button：提交按钮一般是button来做的。button的默认值就是submit，这样可能提交整个表单。当type=button的时候，点击的行为需要完全由js来实现。

reset

<button type="reset"> reset不是清空，是恢复默认状态。

回车提交

<button onclick="alert(1)" >
回车提交：onclick，按回车之后，浏览器会自动触发第一个button的click事件。
注意，最好不要禁用这个回车提交。所以，表单提交的时候最好是绑定submit事件。

控件状态[disabled readonly]

1、控件状态：disabled和readonly状态，重要的字段不允许修改。
2、readonly的字段改不了，但是可以提交。
3、disable的值不会提交到服务器。

表单设计原则

1、帮助用户不出错
2、尽早提示错误
3、扩大选择/点击区域
4、空间较多时要分组
5、主要动作和次要动作