H5新增表单元素和验证

最新推荐文章于 2023-12-27 18:19:28 发布

@码上行动

最新推荐文章于 2023-12-27 18:19:28 发布

阅读量297

点赞数

分类专栏： html 基础文章标签： html5 html css css3

本文链接：https://blog.csdn.net/weixin_45935734/article/details/116127936

版权

html 基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

一，智能表单的type
二、属性
三、标签
四、属性选择器
五、伪类选择器
- - 总结

一，智能表单的type

无兼容性：

type="email" 邮箱
type="url " 验证有没有网址格式
type="range" 滑动条（min、max/step）
type="number" 数字条（min、max/step）

有兼容性：

type="search" 搜索框、框内有一个小 x；
type="color" 产生一个颜色面板框
type="time" 必须输入时间类型
type="month" 必须输入月份类型
type="time" 必须输入周类型
type="week" 必须输入时间类型
type="datetime-local" 获取本地时间

二、属性

required="required"  //必须填入内容、不能为空 ；
placeholder="提示信息"
pattern="[0-5][A-Za-z]{3}" 正则表达式
max="10" 	最大值
min="1" 	最小值
step="2" 	数字间隔
multiple	输入一个或多个值
list 		选项列表的关联
novalidate 	取消验证（不验证form或input表单域）
outfoucs	文本框聚焦(自动获得、一个页面只能有一个)
autocomplete   历史记录（on、off）

三、标签

output 定义脚本输出
datelist 选项列表

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <form >
    请输入内容：<input type="email" required autofoucs><br>
    数字： <input type="number" min="10"max="20"step="2"><br>
    滑动条： <input type="range" min="10" max="20"><br>
    搜索框： <input type="search"><br>
    颜色框： <input type="color"><br>
    时间框： <input type="time"><br>
    月份： <input type="month"><br>
    本地时间：<input type="dadetime-local"><br>
            <input type="submit" ><br>
    </form>
    
    <form action="">
        <h4>选项列表</h4>
        <input type="url" list="myList">
        <datalist id="myList">
            <option value="http://www.baidu.com" label="百度" ></option>
            <option value="http://www.jd.com" label="j京东"></option>
            <option value="http://www.taobao.com" label="淘宝"></option>
        </datalist>
    </form>
    <br><hr>
    
    <h4>提交方法</h4>
    <form action="www.baidu.com" method="post" autocomplete >
        <!-- get 不安全、用post -->
        <!-- autocomplete记录输入历史 可用on/off来控制 -->
        <input type="text" name="user"><!-- 必须加入name才能提交 -->
        <input type="submit">
    </form>
    <br><hr>
    
    <h4>提交验证</h4>
    <form action=""><!-- 给form加novalidate取消所有验证限制 -->
        <input type="text" pattern="[0-5][A-Za-z]{3}">
        <input type="submit">
    </form>
    <br><hr>
    
    <h4>多个输入</h4>
    <form action="" >
        <input type="email" multiple>
        <input type="submit">
    </form>
</body>

效果展示：
在这里插入图片描述

四、属性选择器

img[alt] 		有alt属性就选中
img[alt="cat"] 	alt值等于cat才选中
img[alt~="cat"] cat是词列表也选中
img[alt^="cat"] 开头的值等于cat才选中
img[alt$="cat"] 结尾的值等于cat才选中
img[alt*="cat"] alt值包含cat就选中
img[alt|="cat"] alt值cat或者cat- 也选中

五、伪类选择器

1、动态伪类

 demo a:link {color:gray;}/*链接没有被访问时*/
.demo a:visited{color:yellow;}/*链接被访问过后*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下*/

对于这四个锚点伪类的设置，有一点需要特别注意，那就是他们的先后顺序，要让他们遵守一个爱恨原则LoVe/HAte,也就是Link–visited–hover–active。

2、UI元素状态伪类（主要针对form元素）

enabled/disabled/checked
可写 / 不可写 / 默认

3、CSS的结构伪类选择器

:first-child{}		选择某个元素的第一个子元素
:last-child{}		选择某个元素的最后一个子元素
:only-child			选择的元素是它的父元素的唯一 一个子元素；
:nth-child( ){}		选择某个元素的一个或多个特点的子元素；（可以单独写数字、偶数2n、奇数2n+1）
:nth-last_child( ){}选择某个元素的一个或多个特点的元素，从这个元素的最后一个子元素算起
:first-of-type		选择一个上级元素下的第一个同类子元素；
:last-of-type		选择一个上级元素的最后一个同类子元素；
:nth-of-type()		选择指定的元素；
:only-of-type		选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:nth-last-of-type()	选择指定的元素，从元素的最后一个开始计算；
:empty				选择的元素里面没有任何内容

总结：
同级下是相同类型的标签用：

nthchild( ){先找位置，再找匹配的元素类型}

同级下标签各不相同：

nthoftype( ){先找元素类型，再找位置}

4、:target 选择器可用于选取当前活动的目标元素。

使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

5、否定选择器（:not）

否定选择器 :not()，可以让你定位不匹配该选择器的元素

6、:root 选择文档的根元素

:root{ background:green;}

将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是值包含着整个页面的html部分

总结

以上是对H5新增表单元素和验证的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌

@码上行动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
H5新增表单元素和验证

文章目录一，智能表单的type二、属性三、标签四、属性选择器五、伪类选择器1、动态伪类2、UI元素状态伪类（主要针对form元素）3、CSS的结构伪类选择器4、:target 选择器可用于选取当前活动的目标元素。5、否定选择器（:not）6、:root 选择文档的根元素总结一，智能表单的type无兼容性：type="email" 邮箱type="url " 验证有没有网址格式type="range" 滑动条（min、max/step）type="number" 数字条（min、max/step
复制链接

扫一扫

专栏目录