2021/12/15 【018】【019】【020】【021】input 元素：type属性：22个值

【018】

input 元素：type 属性 可以有 22 个不同的值：text、password、button、submit、reset、radio、checkbox、time、date、month、week、datetime-local、email、tel、search、url、color、file、image、number、range、hidden

1.按钮 submit、button 和 reset

2.单选框 radio

3.复选框 checkbox

4.时间和日期 

time：获取时间
date：获取日期
month：获取年月
week：获取星期
datetime-local：获取本地日期和时间

【019】

1. 搜索框：search

2.颜色选择框：color

3.图像按钮：image

将 input 元素的 type 属性设置为 "image"，就可以使用图像来表示按钮

4.将 input 元素隐藏起来：hidden

【020】

1.上传文件：file

　　要成功向服务器上传文件，除了必须将提交表单的方法设置为 post 之外，还需要指定表单的 enctype 属性。enctype 属性规定了在发送到服务器之前，应该如何对表单的数据进行编码，只有正确编码的数据，才能完整地传递给服务器。
　　默认情况下，enctype 属性被设置为 "application/x-www-form-urlencoded"，它会对所有的字符进行编码，并不适用于文件传输。文件传输需要将该属性设置为 "multipart/form-data"。

2.限定上传文件的类型： accept

　　不对文件上传作限制，可能会给服务器带来灾难性的后果。

　　input 元素有一个 accept 属性，表示可以选择的文件类型，多个类型之间使用英文的逗号隔开。

　　除此之外，你还可以使用 MIME 类型来描述，这里有一个完整的 MIME 类型列表 -> 传送门 注意：accept 属性只是起到 “建议” 的作用，并不能强制限制用户的文件上传类型。限制文件类型还是需要使用 JavaScript 或通过后端的 PHP 来实现。

3. 限定上传文件的尺寸 

　　在上传文件这个 input 元素前面，追加一个 name 为 MAX_FILE_SIZE 的隐藏字段，value 指定允许上传的文件尺寸，单位是字节。

4.上传多个文件 multiple 

　　只需要在 input 元素里面添加一个 multiple 属性即可。

 【021】

1.限定数字输入：number

　　输入框可以限定用户只能输入数字

2.限定数字输入范围：min、max 和 step

　　我们还可以限制数字的范围。有三个额外的属性可以跟 number 搭配来使用：min、max 和 step。顾名思义，min 指定的是可接受最小的值，max 指定的是可接受最大的值，step 则是指定每次调整的幅度。

3.数值滚动条：range

4.邮箱、电话和网址：email、tel 和 url

5.pattern 属性

　　HTML5 新增了一个 pattern 属性，允许我们自己来指定这个匹配模式。要写这个 pattern 属性，需写正则表达式。