精华内容
下载资源
问答
  • h5新增表单元素
    2021-07-25 10:12:09

    H5新增的表单元素

     新增表单type类型
                邮箱:type="email"
                    1·提供了邮箱形式的简单验证
                    2·打开移动端的邮箱键盘
                手机号:type="tel"
                    1·打开移动端拨号键盘
                网址:type="url"
                    1·简单的网址格式验证
                    2·打开网址键盘
                数字类型:type="number"
                    1·打开数字类型键盘
                    2·提供一个简洁的更换值的上下箭头
                颜色色盘:type="color"
                时间类型:type="date" 年月日
                        type="time" 时分秒
                        
                        年月日和时刻
                        datetime-local
                        
                搜索框类型:type:"secrch"
                标尺类型:typr:"range"
    
    size 设置下拉列表的显示选项的个数
                required 必填项
                readonly 只读项
                autofocus 自动聚焦属性
                autocomplete="on/off" 自动提示功能
                multiple 文件上传域多个文件
                disabled 禁用的
                pattern="模式字符串"
                    功能:把用户的输入把pattern进行对比如果符合输入模式则提交 如果不符合则阻断提交
                    例如手机号11位 11位数字转换成计算机语言 正则表达式
                                [0-9] or \ d数字类型
                                {n,m}n到m位 {9} 只需要9位
                                [0-9]{11} or\d{11}
                                ^代表以什么开头
                                $代表以什么结尾
                form是表单属性
    
    更多相关内容
  • h5新增表单元素

    2022-07-18 16:09:49
    html5新增标签,面试常问!

    1. video

    作用:播放视频
    video常用标签属性:
    src:告诉video标签需要播放的视频地址
    autoplay:视频自动播放
    controls:在浏览器中出现对视频播放的控制条
    loop:视频循环播放
    muted:静音播放
    width/height:设置视频的宽和高
    poster:用于告诉video标签视频没有播放之前的占位图片
    格式:

    <video src=""></video>
     <!-- 第二种格式 -->
     <video>
        <source src="" type=""></source>
        <source src="" type=""></source>
    </video>
    

    2. audio标签

    作用:播放音频
    格式:

    <audio src=""></audio>
     <!-- 第二种格式 -->
    <audio>
        <source src="" type="">
    </audio>
    

    注意:
    audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
    只不过有3个属性不能用, height/width/poster

    3.datalist标签

    在这里插入图片描述

    作用:给输入框绑定待定待选项
    格式:

    <input type="text" list="xxx">
        <datalist id="xxx">
            <option>待选项内容</option>
        </datalist>
    

    如何给输入框绑定待选列表:

    1. 新增一个input输入框
    2. 新增一个datalist列表
    3. 在input输入框中新增一个list属性,并赋予属性值
    4. 在datalist增加属性id,把input的属性值付给datalist的id属性值

    4. progress标签

    作用:表示任务完成度,常用于进度条
    格式:

    <!-- value 定义已经完成的工作量,如果max值为1,该值必须是介于0~1之间的小数。 -->
     <progress value="60" max="100"></progress>
    

    5. 表单新增元素

    • 邮箱
      作用:可以自动校验输入的内容是否符合邮箱的格式
    <input type="email">
    
    • 域名
      作用:可以自动校验输入的内容是否是URL地址
     <input type="url">
    
    • 数字
      作用:输入框中只能填入数字
    <input type="number">
    
    • 时间
      作用:可以通过日历来选择时间
    <input type="date">
    
    • 颜色
      作用:可以通过取色板来选择颜色
    <input type="color">
    
    展开全文
  • h5新增属性 <form action=""> <ul> <li>邮箱: <input type="email" /></li> <li>网址: <input type="url" /></li> <!-- 时间和日期 还挺好用 --> &...

     h5新增属性

    <form action="">
            <ul>
                <li>邮箱: <input type="email" /></li>
                <li>网址: <input type="url" /></li>
                <!-- 时间和日期 还挺好用 -->
                <li>日期: <input type="date" /></li>
                <li>时间: <input type="time" /></li>
                <!-- 数字比较好用,1,只能填写数字,2,在移动端调出的是数字键盘 -->
                <li>数量: <input type="number" /></li>
                <li>手机号码: <input type="tel" /></li>
                <!-- 搜索比较常用  -->
                <li>搜索: <input type="search" /></li>
                <li>搜索text: <input type="text" /></li>
                <li>颜色: <input type="color" /></li>
                <!-- 当我们点击提交按钮就可以验证表单了 -->
                <li> <input type="submit" value="提交"></li>
            </ul>
        </form>

     

     例如其中的邮箱、手机号码等,等正则写会更好更符合我国的常用标准


    h5新增的表单属性

     

     

     

     

    展开全文
  • 文章目录一,智能表单的type二、属性三、标签四、属性选择器五、伪类选择器1、动态伪类2、UI元素状态伪类(主要针对form元素)3、CSS的结构伪类选择器4、:target 选择器可用于选取当前活动的目标元素。5、否定选择器...


    一,智能表单的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				选择的元素里面没有任何内容
    

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

    nth­child( ){先找位置,再找匹配的元素类型} 
    

    同级下标签各不相同:

    nth­of­type( ){先找元素类型,再找位置}
    

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

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

    5、否定选择器(:not)

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

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

    :root{ background:green;}
    

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

    总结

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

    展开全文
  • H5新增表单元素、控件

    千次阅读 2019-09-24 18:51:43
    表单新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下。 • ①email、②url、③number、④range • ⑤Date pickers (date, month, week, time, datetime, ...
  • 新增的type类型: 1、emaile 用来验证输入的字符串是否是email地址的格式,若不是,则不允许提交; 注:即检测输入内容是否含有@符号且@符号前后都必须有内容,但是它并不验证email是否存在。可以为空,除非用...
  • 当input中存在验证时,option中的元素需要符合要求才能显示出来 ^(\+86)?1\d{10}$" list="serach_list"> <option value="15266666666" label="data01"></option> <option value="1" label="data02"></...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,462
精华内容 2,984
关键字:

h5新增表单元素