HTML-CSS（三十六）表单扩展

美化表单控件

label+:checked+display:none

原理：用label包裹，能够实现即使点击其他的图片，input也有选中效果.将原有的input样式隐藏。使用伪类：checked控制外部新增的样式来回切换。利用兄弟元素之间的关系，改变状态

复选框美化

上传按钮美化

position+opacity

原理：将input标签透明度调为零，再将其放到div上方，看起来时点击的那个上传图，实际点击的是，input标签（障眼法）

复选框美化

上传按钮美化

新的input控件

email:电子邮件输入框
输入格式必须是邮箱格式，否则无法提交成功。
url：网址输入框

输入的格式，必须是网址类型

number：数值输入框

除了输入数字，其他的都不显示

range：滑动条

min \max\value控制滑动条

date、moth、week：日期控件
date：年月日；moth：年月；week：年周

search：搜索框

与文本框的区别在于：search含有搜索内容时，可以直接点击输入框内的X全部清除

color：颜色控件

点击颜色，可以弹出调色板进行调色

tel：电话号码输入框

pc端没有区别，但是在移动端的时候，当你的光标或者触发输入框的时候，会自动调起数字键盘
time:时间控件

以上所有新增控件示例图

新的属性

autocomplete：自动识别

默认情况下，浏览器会记录在文本框你输入过的内容，当你输入的词跟之前的匹配时(首个字或字母)，就会出现提示词。所以即使不写autocomplete=”on’‘（默认值）他也是会出现提示词的。当你写完**autocomplete=“off”**之后提示词就会关闭

autofocus：获取焦点

默认情况下，输入框不会自动的获取焦点的，只有你点击的时候才会获取焦点

直接写autofocus属性或者autofocus='autofocus’就能够让输入框自动获取焦点

注：当有多个获取焦点的输入框时，只以第一个为主

required：不能为空

默认情况即使输入框是空的情况下也是可以提交的，但是设置required之后，如果输入框内容为空，那么就就不能够提交，并且会出现提示词

pattern：正则验证

数据传输

method:数据传输方式（get、post）
默认情况下是get。get和post的区别我在我的另一篇博客https://blog.csdn.net/weixin_44730244/article/details/115773786有讲到

enctype：数据传输类型

<form action="./data.php" method="get" enctype="">

enctype=“application/x-www-form-urlencoded” 提交类型字符串

enctype=“multipart/form-data” 二进制数据流 提交文件
name/value：数据的键值对

扩展标签

fieldset:表单内元素分组
legend：fieldset元素定义标题

optgroup：定义选项组（属性label定义optgroup标题）
组名是不可选的，子项可选