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新增标签，面试常问！
h5新增表单元素

1. video
2. audio标签
3.datalist标签
4. progress标签
5. 表单新增元素
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标签

作用：表示任务完成度，常用于进度条
格式：
```

 <progress value="60" max="100"></progress>
```
5. 表单新增元素
- 邮箱
  作用：可以自动校验输入的内容是否符合邮箱的格式
```
<input type="email">
```
- 域名
  作用：可以自动校验输入的内容是否是URL地址
```
 <input type="url">
```
- 数字
  作用：输入框中只能填入数字
```
<input type="number">
```
- 时间
  作用：可以通过日历来选择时间
```
<input type="date">
```
- 颜色
  作用：可以通过取色板来选择颜色
```
<input type="color">
```
收起
展开全文
javascript html

HTML学习13：H5新增表单元素及其属性

2022-04-10 22:02:25

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新增的表单属性

收起

展开全文

学习 html

H5新增表单元素和验证

2021-04-25 14:30:22

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

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

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

同级下标签各不相同：

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

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

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

5、否定选择器（:not）

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

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

:root{ background:green;}

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

总结

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

收起

展开全文

html css css3

H5新增表单元素、控件
千次阅读 2019-09-24 18:51:43

表单—新增控件类型 • HTML5 增加了多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，主要内容如下。 • ①email、②url、③number、④range • ⑤Date pickers (date, month, week, time, datetime, ...

收起
H5新增表单元素和表单验证
2020-04-10 23:28:18

新增的type类型： 1、emaile 用来验证输入的字符串是否是email地址的格式，若不是，则不允许提交; 注：即检测输入内容是否含有@符号且@符号前后都必须有内容，但是它并不验证email是否存在。可以为空，除非用...

收起
【H5】H5新增表单元素-datalist
2019-08-23 09:59:36

当input中存在验证时，option中的元素需要符合要求才能显示出来 ^(\+86)?1\d{10}$" list="serach_list"> <option value="15266666666" label="data01"></option> <option value="1" label="data02"></...

收起

H5新增的表单元素

h5新增表单元素

h5新增表单元素

1. video

2. audio标签

3.datalist标签

4. progress标签

5. 表单新增元素

HTML学习13：H5新增表单元素及其属性

h5新增属性

h5新增的表单属性

H5新增表单元素和验证

文章目录

一，智能表单的type

二、属性

三、标签

四、属性选择器

五、伪类选择器

1、动态伪类

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

3、CSS的结构伪类选择器

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

5、否定选择器（:not）

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

总结

H5新增表单元素、控件

H5新增表单元素和表单验证

【H5】H5新增表单元素-datalist

h5新增表单元素