1.input的type 属性的新增值

1.概述

eamil 用于应该包含“e-mail"地址的输入框
url 用于应该包含“URL"地址的输入框
search 用于应该“搜索内容"的输入框
number 用于应该包含“数值"的输入控件
tel 规定显示的类型为“电话号码"的输入框
range 规定显示的类型为“数值选择范围"选择控件
color规定显示的类型为“颜色"选择控件
日期相关
1.ate规定显示的类型为“日期"选择控件
2.month规定显示的类型为“月份"选择控件
3.week规定显示的类型为“周"选择控件
4.time规定显示的类型为“时间"选择控件
5.datetime规定显示的类型为“日期时间"选择控件
6.datetime-local规定显示的类型为“本地日期时间"选择控件

2.详细

1.email

email 让input接收一个邮箱地址

基本形式如下：

<input type="email" name="eamil"  />

注意：

只要当你输入的内容不为空时才会进行验证，
只验证如下形式的值：【任意字符+@+任意字符】

2.Url

url 让input接收一个url地址（网站地址）

基本形式如下:

  <input type="url"  name="url" />

注意：

只要当你输入的内容不为空时才会进行验证
一般只验证如下形式的值：【任意字符 + : 】

3.number

number 让input只接受数字的输入

基本形式如下：

<input type="number" name="myNumber" />

注意：

只要当你输入的内容不为空时才会进行验证，
你只能输入数字，输入非数字类型会被拒绝。（可输入和数字相关的正负号，小数点，e）
在输入框右侧会提供自动加减的符号，默认值为0.
如果输入的值太大，那么会转换为一个科学计数法表示.
可通过以下属性对值进行限定：max,min,step,value
一旦给了最大最小值等范围，和step间隔，那么所有的数都等于是已经被定义了

4.range

range 让input变为一个滑动条

基本形式如下：

 <input type="range"  name="myRange" />

注意：

默认值为50，范围为0–100.
我们可以通过一个默认的get请求看到他的值
可通过以下属性对值进行限定：max,min,step,value

5.color

color 颜色选择器

基本形式如下：

<input type="color" name="myColor" />

注意： Color 类型显示为一个颜色选择器

6.日期选择器

日期选择器, type的值为下面之一

   date    年、月、日month  年、月week   年、周time   小时、分钟datetime  年、月、日、时间（UTC 时间--浏览器支持程度较弱）datetime-local   选取：年、月、日、时间（本地时间）

基本形式如下：

 <input type="date" name="myDate" />

2.Input上新增的属性

1.required

required 要求input的值为必填

基本形式如下：

<input type="text"name="username" required =“required "  />或者<input type="text"  name="username" required  />

注意：
1、 placeholder能用于text,password,eamil,url,number,search等类型
2. placeholder不能用于range,color，date等非文本框类型

2.pattern

pattern 用于验证 input输入值是否合法

适用于以下类型的标签：
text, search, url, telephone, email 以及 password。
基本形式：

<input type="text" name="test" pattern="[0-9]{6,12}" title="你应该输入6到12位的数字" />

3.form

规定输入域所属的表单，适用于所有标签的类型，使用形式。

基本形式如下：

<input type="text" name="test" form="formId" /><form id="formId" action="https://www.baidu.com/">
<input type="submit" />
</form>

注意：设置一个id值。

4.Width & height

height 和 width 、规定用于 image 类型的 input 标签的图像高度和宽度。

基本形式：

<input type="image" src="img_submit.gif" width="99" height="99" />

5.重写属性

表单重写属性适用于以下类型的标签：submit 和 image。

formaction - 重写表单的 action 属性
formmethod - 重写表单的 method 属性
formtarget - 重写表单的 target 属性
还能重写enctype与novalidate等
使用形式：

<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />

注意：这些属性对于创建不同的提交按钮很有帮助。

3.Form上新增的属性

1.autocomplete

规定是否启用表单的自动完成功能，其值如下：

on //开启自动完成功能【默认为on,开启状态】
off //关闭自动完成功能
基本使用：

2.novalidate

如果使用该属性，则提交表单时不进行html5自带的验证。

基本写法

4.表单新增标签

1.datalist 标签

datalist规定输入域的选项列表，类似于select标签.

基本使用：

注意：
datalist的一定要有id属性，并且此属性还必须要和某一个文本域input的list属性值一样才能渲染出来。

2.output 标签

output 元素用于不同类型的输出，比如计算或脚本输出

<form oninput="c.value=Number(a.value) + Number(b.value)"><input name="a" value="0" />
+
<input name="b" value="0" />
=
<output name="c">0</output>
</form>

注意：
就现在的浏览器支持程度而言，如果我们要获取input的实时改变，我们需要通过oninput属性获取。oninput属性既可以写在form表单上也可以写在input的输入域上。

5.H5实用标签

1.`<mark>`标签

该标签是一个“行内元素”，它的作用是像一只荧光笔一样突出你标记的文本。

2.`<meter>`标签

该标签是一个“行内块级元素”，它是用于度量属性“value”的值的一个标签，
通过判断“value”的值是否在一个合适的区间，从而显示出不同级别颜色。
如果值在合理区间会显示成一个值内容比例为“绿色”的横条，如果值在不合理区间会显示成一个值内容比例为“黄色”的横条（经过包括“Edge”浏览器在内的所有主流浏览器测试）。
标签具有以下属性值：
max规定度量的最大值
min规定度量的最小值
value 当前值
high规定高范围的度量值（大于该值）
low规定低范围的度量值（小于该值）
optimum规定最佳的度量值
比例的控制

颜色的状态显示

3.`````标签

该标签是一个“行内块级元素”，它是一个用于显示“进度信息”的标签。

标签具有以下属性值：
max规定总进度量的值
value规定当前进度量的值

运行效果

4.`<audio>`和`<video>`标签

该标签是一个“行内块级元素”,它用于在页面中加载音频文件，目前HTML5标准中，<audio>主要支持三种格式的音频文件，即：“ogg”(Ogg Vorbis)、“mp3”和“wav”格式的音频文件，但不同的浏览器支持的情况又有所不同，所以我们通常不会单独使用标签，而是在该标签内置入一个标签，使浏览器将一个识别到的音频文件进行使用
<audio>标签具有以下属性：

autoplay如果出现该属性，则音频在就绪后马上播放
controls如果出现该属性，则向用户显示控件，比如播放按钮
loop如果出现该属性，则每当音频结束时重新开始播放
muted规定视频输出应该被静音
preload如果出现该属性，则音频在页面加载时进行加载，并预备播放。若和“autoplay”同时使用，则该属性值会被忽略
src要播放的音频的URL地址

<source>标签具有以下属性：

Media
规定媒体资源的类型，如：“screen and (min-width:320px)”
Src
规定媒体文件的URL地址
type
规定媒体资源的MIME类型（Multipurpose Internet Mail Extensions，它包含文本、图像、音频、视频以及其他应用程序专用的数据）

input的type属性相关推荐

ie下input的type属性为hidden问题
2019独角兽企业重金招聘Python工程师标准>>> ie下input的type属性为hidden有时候ie是解析不正确的. 今天碰到一个问题,服务器端返回一个div内容如下: & ...
JQ无法修改input的type属性的替代解决方法
JQ无法修改input的type属性的替代解决方法参考文章: (1)JQ无法修改input的type属性的替代解决方法 (2)https://www.cnblogs.com/wsun/p/56300 ...
ie8下修改input的type属性报错
摘要: 现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做 ...
前端：HTML5/36/HTML5简介，文档类型定义，网页字符集，页面结构标记，文章相关的标记，其它标记，音频标记，视频标记，表单中新增的属性，表单input元素type属性的值
HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...
JQuery中如何动态修改input的type属性
代码如下: 1 jQuery(".member_id").focus(function() { 2 jQuery(this).val(''); 3 }).blur(function ...
html5 input的type属性启动数字输入法
当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出启动数字键盘的需求,我和大多数人一样用 this.style ...
input的type属性整理
## **整理input的type属性** 1. type = text 这是我们见得最多也是用的最多的,比如用于登录页面输入用户名,注册是输入电话号码,邮箱等参数: a:name 表示文本输入框名 ...
表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
Input标签type属性
撰写日期:2019年02月20日 html中有许多标签有多个属性,input标签就是其中一个. 属性值描述 button 生成按钮 radio 生成单选按钮 submit 生成提交按钮 text 生 ...
html中input中type属性值,HTML的input中type属性的属性值包括哪些
HTML的input中type属性的属性值包括哪些 (2011-11-25 16:44:40) 标签: 杂谈 1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideF ...

input的type属性

1.input的type 属性的新增值

1.概述

2.详细

1.email

email 让input接收一个邮箱地址

2.Url

url 让input接收一个url地址（网站地址）

3.number

number 让input只接受数字的输入

4.range

range 让input变为一个滑动条

5.color

color 颜色选择器

6.日期选择器

日期选择器, type的值为下面之一

2.Input上新增的属性

1.required

required 要求input的值为必填

2.pattern

pattern 用于验证 input输入值是否合法

3.form

规定输入域所属的表单，适用于所有 标签的类型，使用形式。

4.Width & height

height 和 width 、规定用于 image 类型的 input 标签的图像高度和宽度。

5.重写属性

表单重写属性适用于以下类型的 标签：submit 和 image。

3.Form上新增的属性

1.autocomplete

规定是否启用表单的自动完成功能，其值如下：

2.novalidate

如果使用该属性，则提交表单时不进行html5自带的验证。

4.表单新增标签

1.datalist 标签

datalist规定输入域的选项列表，类似于select标签.

2.output 标签

output 元素用于不同类型的输出，比如计算或脚本输出

5.H5实用标签

1.<mark>标签

该标签是一个“行内元素”，它的作用是像一只荧光笔一样突出你标记的文本。

2.<meter>标签

3.`````标签

该标签是一个“行内块级元素”，它是一个用于显示“进度信息”的标签。

4.<audio>和<video>标签

input的type属性相关推荐

最新文章

热门文章

规定输入域所属的表单，适用于所有标签的类型，使用形式。

表单重写属性适用于以下类型的标签：submit 和 image。

1.`<mark>`标签

2.`<meter>`标签

4.`<audio>`和`<video>`标签