HTML-CSS(三十六)表单扩展

美化表单控件

label+:checked+display:none

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

复选框美化

HTML-CSS(三十六)表单扩展_第1张图片

上传按钮美化

HTML-CSS(三十六)表单扩展_第2张图片

position+opacity

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

复选框美化

HTML-CSS(三十六)表单扩展_第3张图片

上传按钮美化

HTML-CSS(三十六)表单扩展_第4张图片

新的input控件

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

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

number:数值输入框

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

range:滑动条

min \max\value控制滑动条

date、moth、week:日期控件
date:年月日;moth:年月;week:年周

search:搜索框

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

color:颜色控件

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

tel:电话号码输入框

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

以上所有新增控件示例图
HTML-CSS(三十六)表单扩展_第5张图片
HTML-CSS(三十六)表单扩展_第6张图片

新的属性

autocomplete:自动识别

默认情况下,浏览器会记录在文本框你输入过的内容,当你输入的词跟之前的匹配时(首个字或字母),就会出现提示词。所以即使不写autocomplete=”on’‘(默认值)他也是会出现提示词的。当你写完**autocomplete=“off”**之后提示词就会关闭
HTML-CSS(三十六)表单扩展_第7张图片
HTML-CSS(三十六)表单扩展_第8张图片

autofocus:获取焦点

默认情况下,输入框不会自动的获取焦点的,只有你点击的时候才会获取焦点
在这里插入图片描述
直接写autofocus属性或者autofocus='autofocus’就能够让输入框自动获取焦点
在这里插入图片描述
注:当有多个获取焦点的输入框时,只以第一个为主
HTML-CSS(三十六)表单扩展_第9张图片

required:不能为空

默认情况即使输入框是空的情况下也是可以提交的,但是设置required之后,如果输入框内容为空,那么就就不能够提交,并且会出现提示词
HTML-CSS(三十六)表单扩展_第10张图片
pattern:正则验证
HTML-CSS(三十六)表单扩展_第11张图片

数据传输

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元素定义标题
HTML-CSS(三十六)表单扩展_第12张图片
optgroup:定义选项组(属性label定义optgroup标题)
组名是不可选的,子项可选
HTML-CSS(三十六)表单扩展_第13张图片

你可能感兴趣的:(CSS,HTML)