html5输入控件（h5 输入框）

今天给各位分享html5输入控件的知识，其中也会对h5 输入框进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、HTML5 表单多条件验证问题
• 2、表单有哪些html5新控件?
• 3、html5如何用脚本添加input控件
• 4、HTML5 input焦点键盘弹出问题
• 5、html5对input新增了哪些高级属性
• 6、html中h5可以使用input弹出时间控件的type属性是

HTML5 表单多条件验证问题

1.输入型控件

Input type

用途

说明

email

电子邮件地址文本框

url

网页URL文本框

number

数值的输入域

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value number 规定默认值

range

特定值的范围的数值，以滑动条显示

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value number 规定默认值

Date pickers

日期，时间选择器

仅Opera9+支持，包含date, month, week, time, datetime, datetime-local

search

用于搜索引擎，比如在站点顶部显示的搜索框

与普通文本框用法一样，只不过这样更语文化

color

颜色选择器

仅Opera支持

将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。

E-mail:

date:

range: number: color:

2. 表单新特性和函数

2.1 placeholder

当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。

如：

plabel for="runnername"Runner:/label

input id="runnername"name="runnername" type="text" placeholder="First and last name" /

/p

Runner:

2.2 autocomplete

其实在IE6中,autocomplete就已经实现，不过现在这一特性终于标准化了，浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用，autocomplete应该用一保护用户敏感数据，避免本地浏览器对它们进行不安全的存储。

类型

作用

on

该字段无需保护，值可以被保存和恢复

off

该字段需要保护，值不可以保存

unspecified

包含form的默认设置，如果没有被包含在表单中或没有指定值，则行为表现为on

如：

form action="" method="get" autocomplete="on"

Name:input type="text" name="name" /br /

E-mail: input type="email" name="email" autocomplete="off" /br /

input type="submit" /

/form

当用户提交过一次表单后，再次访问，name的输入框会提示你曾输入的值，而email则不会提示。

2.3 autofocus

页面载入时，我们通过autofocus指定某个表单元素获得焦点，但每个页面只允许出现一个autofocus，如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下，使用使用autofocus会惹恼用户。

2.5 list特性和datalist

通过使用list，开发人员能够为某个输入型控件构造一个选值列表，其使用方法：

Webpage: input type="url" list="url_list" name="link" /

datalist id="url_list"

option label="W3School" value="" /

option label="Google" value="" /

option label="Microsoft" value="" /

/datalist

Webpage:

请在Opera9+或Firefox10+浏览器中查看。

2.6 required

required 属性规定必须在提交之前填写输入域（不能为空）。它是表单验证最简单的一种方式方法，使用方法：

Name: input type="text" name="usr_name" required="required" /

2.7 pattern

pattern 属性规定用于验证 input 域的模式（pattern），模式（pattern） 是正则表达式。那些type为email或url的输入控件内置相关正则表达式，如果value不符合其正则表达式，那表单将通不过验证，无法提交。使用方法：

Country code: input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" /

2.8 novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

如：

form action="demo_form.asp" method="get" novalidate="true"

E-mail: input type="email" name="user_email" /

input type="submit" /

/form

3. 表单验证

表单验证是一套系统，它为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化，让web应用更快的抛出错误，但它仍不能取代服务器端的验证，重要数据还要要依赖于服务器端的验证，因为前端验证是可以绕过的。

目前任何表单元素都有八种可能的验证约束条件：

名称

用途

用法

valueMissing

确保控件中的值已填写

将required属性设为true，

input type="text"required="required"/

typeMismatch

确保控件值与预期类型相匹配

input type="email"/

patternMismatch

根据pattern的正则表达式判断输入是否为合法格式

input type="text" pattern="[0-9]{12}"/

toolong

避免输入过多字符

设置maxLength，textarea id="notes" name="notes" maxLength="100"/textarea

rangeUnderflow

限制数值控件的最小值

设置min，input type="number" min="0" value="20"/

rangeOverflow

限制数值控件的最大值

设置max，input type="number" max="100" value="20"/

stepMismatch

确保输入值符合min,max,step的设置

设置max min step，input type="number" min="0" max="100" step="10" value="20"/

customError

处理应用代码明确设置能计算产生错误

例如验证两次输入的密码是否一致，等会DEMO细说

下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看：

源代码：

form name="register1" id="register1"

plabel for="runnername"RunnerName:/label

input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/

/p

plabel for="phone"Tel #:/label

input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"

placeholder="xxx-xxxx-xxxx"//p

plabel for="emailaddress"E-mail:/label

input id="emailaddress" name="emailaddress" type="email"

placeholder="For confirmation only"//p

plabel for="dob"DOB:/label

input id="dob" name="dob" type="date"

placeholder="MM/DD/YYYY"//p

pCount:input type="number" id="count" name="count" min="0" max="100" step="10"//p

plabel for="style"Shirt style:/label

input id="style" name="style" type="text" list="stylelist" title="Years of participation"

autocomplete="off"//p

datalist id="stylelist"

option value="White" label="1st Year"/

option value="Gray" label="2nd - 4th Year"/

option value="Navy" label="Veteran (5+ Years)"/

/datalist

fieldset

legendExpectations:/legend

p

label for="confidence"Confidence:/label

input id="confidence" name="level" type="range"

onchange="setConfidence(this.value)"

min="0" max="100" step="5" value="0"/

span id="confidenceDisplay"0%/span/p

plabel for="notes"Notes:/label

textarea id="notes" name="notes" maxLength="100"/textarea/p

/fieldset

pinput type="submit" name="register" value="Submit" onclick=" checkForm()"//p

/form

表单有哪些html5新控件?

表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式

url: 提交表单时检测值是否是一个url格式

date: 年-月-日格式的控件

time: 时:分格式的控件

datetime: 年-月-日 时:分 格式的控件（UTC时间）

datetime-local: 年-月-日 时:分 格式的控件（本地时间）

month: 年-月格式的控件

week: 年-周数格式的控件

number: 数字输入框

input type="number" name="" id="" value="60" max="100" min="0" /

range: 选择区域

input type="range" name="" id="" value="60" max="100" min="0" /

tel: 电话输入框

search: 用于搜索

color: 调用系统选色器

新增控件属性：

placeholder: 占位符，输入框提示信息

input type="text" autofocus placeholder=''/

required: 该input为必填项

autofocus: 在页面加载时，域自动地获得焦点

autocomplete="off/on":可以记录输入信息

必须有name属性 必须提交过

off==关闭 on==打开

input type="tel" name="user" id="" value="" autocomplete="on"/

pattern: 正则验证

input type="tel" pattern="[0-9]{7,12}"/

min/max: input能输入的最小/最大字节的长度

step: 针对number和range类型，每次递增step的值

list: 指定一个datalist，作为下拉提示单

html5如何用脚本添加input控件

1、动态创建input节点

2、往form中添加Input节点

示例：

body

form id='form' --定义form

/form

script

var input = document.createElement('input'); //创建input节点

input.setAttribute('type', 'text'); //定义类型是文本输入

document.getElementById('form').appendChild(input ); //添加到form中显示

/script

/body

HTML5 input焦点键盘弹出问题

最近项目有个需求，我们使用的是PDA装置，它有扫描枪，可以让扫描出来的内容填写到html的input控件中。

但是有一个棘手问题，就是input控件只要获取焦点，就会弹出键盘。

项目的需求，希望刚开始时，只是将焦点聚集在input控件上，可以通过扫描枪输入，然后点击input控件时，还能弹出键盘进行修改。

这个问题解决核心就是 input控件聚焦的时候，不弹出键盘，当点击的时候，才弹出键盘。

尝试了很多方法，最后发现了readOnly属性一个诡异作用。当调用 input控件的focus()方法时，如果readOnly属性为true，那么不会弹出键盘，但是焦点已经在 input控件上了。这个时候，再将readOnly属性设置为false，那么这个时候键盘不会弹出，但是可以扫描枪输入了。

示例:

html5对input新增了哪些高级属性

在html5中，为input元素新增了以下一些type属性值，用来丰富文本框的类型。

color：用于指定颜色的控件。

date：用于输入日期的控件（年，月，日，不包括时间）。

datetime：基于

utc

时区的日期时间输入控件（时，分，秒及几分之一秒）。

datetime-local：用于输入日期时间控件，不包含时区。

email：用于编辑

e-mail

的字段。

month：用于输入年月的控件，不带时区。

number:

用于输入浮点数的控件。

range：用于输入不精确值控件。

search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

tel：用于输入电话号码的控件。

time：用于输入不含时区的时间控件。

url：用于编辑url的字段。。

week：用于输入一个由星期-年组成的日期，日期不包括时区。推荐你去一个教学网站

秒秒学上把这些知识过一遍，夯实下基础。

html中h5可以使用input弹出时间控件的type属性是

在HTML5中，为input元素新增了以下一些type属性值：

color：用于指定颜色的控件。

date：用于输入日期的控件（年，月，日，不包括时间）。

month：用于输入年月的控件，不带时区。

week：用于输入一个由星期-年组成的日期，日期不包括时区

time：用于输入不含时区的时间控件。

datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。

datetime-local：用于输入日期时间控件，不包含时区。

email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

number: 用于应该包含数值的输入域。只能输入数字

range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果

url：用于编辑URL的字段。

html5输入控件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于h5 输入框、html5输入控件的信息别忘了在本站进行查找喔。