h5中form表单中input新增的属性值

在HTML5中增加了许多新的标签和功能属性，今天我们来看一个Form表单在HTML5中新的使用方法。那么在HTML5中新加入的这个功能与之前咱们使用的功能区别在哪里呢？在下面咱们有几个场景来看，你就明白啦~
假如咱们需要把页面中不同的表单元素提交，而这些表单元素又分布在HTML中的各个位置，那么Form就只能包含所有的Form标签了。

HTML5的方法：

1. 
   
2. <form id="form1" action="http://www.w3cfuns.com/">
   
3.         <input type="submit" value="提交"/>
   
4. </form>
   
5. 
   
6. <input id="userName" name="userName" form="form1" type="text"/>
   
7. <input id="userPwd" name="userPwd" form="form1" type="password"/>
   
8. <input id="userAge" name="userAge" type="text"/>

复制代码

这里的form属性=表单的ID，这样一来，这些元素到底归那个表单就一目了然了，这个for属性，你可以理解为label中的for属性，只不过在HTML5中的这种情况下，他就属于fome1的元素了。现在再看代码，干净利索多了，项目文件也不大，易于维护。

 

 

 

在过去我们制作此种类型输入框，会用到不少JS验证，如今，有了HTML5写这种效果已经没有那么麻烦了，下面我来给大家介绍两种HTML5的input的新增加的类型应用。

1、URL类型：

1. <form>
   
2.         <input name="urls" type="url" value="http://www.w3cfuns.com/"/>
   
3.         <input type="submit" value="提交"/>
   
4. </form>
   

复制代码

设置此类型后，从外观上来看与普通的元素差不多，可是如果你将此类型放到表单中之后，当点击提交按钮，如果此输入框中输入的不是一个URL地址，将无法提交。

运行效果如下图：

2、Email类型：

1. <form>
   
2.         <input name="urls" type="email" value="http://www.w3cfuns.com/"/>
   
3.         <input type="submit" value="提交"/>
   
4. </form>
   

复制代码

如果我们讲上面的URL类型的代码中的type修改为email，那么在表单提交的时候，会自动验证此输入框中的内容是否为email格式，如果不是，则无法提交。

运行效果如下图：

 

今天介绍一下input在HTML5中新增加的时间类型的应用，与昨天的练习一样，如果在以下这几种输入框中输入的格式不正确，也是无法提交的

1、Date类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_date" name="w3cfuns.com" type="date"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

如果在之前，我们使用js+css+dom才能实现日历选择日期的效果，在HTML5中，我们只需要设置input为date类型即可，提交表单的时候也不需要我们验证数据了，它已经帮我们实现了。
运行效果如下图：

 

2、Time类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_time" name="w3cfuns.com" type="time"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

此类型是一个专门用来输入时间的文本框，在提交的时候检查是否输入了有效的时间。
运行效果如下图：

3、DateTime类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

datetime类型的input元素是专门用来输入UTC日期和实践的文本框，在提交的时候，对日期和时间进行有效的检查。

运行效果如下图：

4、DateTime-Local类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_datetime-local" name="w3cfuns.com" type="datetime-local"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

此类型与datatime类型差不多，只不过是用来输入本地的日期和时间。

运行效果如下图：

5、Month类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_month" name="w3cfuns.com" type="month"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

month是一种专门输入月份的文本框，在日历中，你只能选择某一个月，不能选择某一天。

运行效果如下图：

6、Week类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_week" name="w3cfuns.com" type="week"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

week是专门用来输入周（星期）的文本框，W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周，同样不能选择某一天。

运行效果如下图：

 

 

今天介绍input在HTML5中的最后5种类型，分别是：number，range，search，tel和color

 

1、number类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_date" name="w3cfuns.com" type="number"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

此输入框是一种专门用来输入数字的文本框，并且在提交的时候会验证内容是否为数字，它具有四个属性，分别是：min、max、step和value。
min：此输入框的最小值
max：此输入框的最大值
step：当点击上下箭头数值一次跳几个
value：表示此输入框的默认值


立即运行：

<form> <input id="w3cfuns_number1" name="w3cfuns.com" type="number"/> <input id="w3cfuns_number2" name="w3cfuns.com" type="number" min="10" max="100"/> <input id="w3cfuns_number3" name="w3cfuns.com" type="number" step="10"/> <input type="submit" value="提交"/> </form>

 

---

2、range类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_range" name="w3cfuns.com" type="range"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

此输入框是一种只允许输入某一段范围内数值的文本框，它同样也具有四个属性，分别是：min、max、step和value，默认的取值范围为0-100。
min：此输入框的最小值
max：此输入框的最大值
step：当点击上下箭头数值一次跳几个
value：表示此输入框的默认值


立即运行：

<form> <input id="w3cfuns_range1" name="w3cfuns.com" type="range"/> <input id="w3cfuns_range2" name="w3cfuns.com" type="range" value="50"/> <input id="w3cfuns_range3" name="w3cfuns.com" type="range" step="10"/> <input type="submit" value="提交"/> </form>

 

---

3、search类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_search" name="w3cfuns.com" type="search"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

search类型的input元素是一种专门用来输入搜索关键词的文本框，search类型与text类型仅在外观上有区别，外观可以使用CSS来定义。

1. input[type="search"]{-webkit-appearance:textfield;}

复制代码

立即运行：

<form> <input id="w3cfuns_search" name="w3cfuns.com" type="search"/> <input type="submit" value="提交"/> </form>

 

---

4、tel类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_tel" name="w3cfuns.com" type="tel"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

tel元素被设计用来输入电话号码的专用文本框，他没有特殊的验证规则，不强制输入数字，因为很多电话通常带有其它的字符，比如：010-88696811，但是开发者可以pattern属性来制定输入的内容，一般为正则表达式。

立即运行：

<form> <input id="w3cfuns_tel" name="w3cfuns.com" type="tel"/> <input type="submit" value="提交"/> </form>

运行代码 复制代码 保存代码提示：您可以先修改部分代码再运行! power by W3Cfuns.com

---

5、color类型：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_color" name="w3cfuns.com" type="color"/>
   
4.       <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

color类型的input元素用来取色，它提供了一个颜色的取色器。

立即运行：

<form> <input id="w3cfuns_color" name="w3cfuns.com" type="color"/> <input type="submit" value="提交"/> </form>

 

---

6、output标签：

1. 
   
2. <form>
   
3.       <input id="w3cfuns_range" name="w3cfuns.com" type="range"/>
   
4.       <output id="w3cfuns_output" name="w3cfuns.com" type="output" value="w3cfuns_range.value">50</output>
   
5.       <input type="submit" value="提交"/>
   
6. </form>
   

复制代码

range类型的input元素用来定义不同类型的输出，比如计算结果或者脚本的输出，output元素必须属于某个表单。换句话说，必须将它书写在表单内部，或者对他添加form指向属性。

在这个例子中，元素绑定到了一个range元素上，当拖动range元素的滑动杆的时候，值就会显示出来。
目前大部分浏览器对其支持的还不是十分理想！

立即运行：

<form> <input id="w3cfuns_range" name="w3cfuns.com" type="range"/> <output id="w3cfuns_output" name="w3cfuns.com" type="output" value="w3cfuns_range.value">50</output> <input type="submit" value="提交"/> </form>

 

HTML5每日一练之表单自动验证  required     pattern="\d{3}"       min="3" max="16"          required step="10" min="0" max="100" type="number"/

 

1、required属性：

1. 
   
2. <form>
   
3.         <input id="w3cfuns_required" name="w3cfuns.com" required type="text"/>
   
4.         <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

required属性可以用用在大多数的输入元素上（除了隐藏元素、图片元素按钮上等）。
required属性表示此输入框是必填项，当提交的时候，如果此输入框为空，那么将提示用户输入后提交。


立即运行：[html]
<form>
        <input id="w3cfuns_required" name="w3cfuns.com" required type="text"/>
        <input type="submit" value="提交"/>
</form>
[/html]

---

2、pattern属性：

1. 
   
2. <form>
   
3.         <input id="w3cfuns_pattern" name="w3cfuns.com" required pattern="\d{3}" type="text"/>
   
4.         <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

pattern属性的值一般为正则表达式，当用户输入的内容符合一定的格式，那么才能提交，否则将提示用户不符合要求，如上所示必须输入3位数字。


立即运行：[html]
<form>
        <input id="w3cfuns_pattern" name="w3cfuns.com" required pattern="\d{3}" type="text"/>
        <input type="submit" value="提交"/>
</form>
[/html]

---

3、min属性和max属性：

1. 
   
2. <form>
   
3.         <input id="w3cfuns_min_max" name="w3cfuns.com" required min="3" max="16" type="number"/>
   
4.         <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

min和max这两个属性是数值类型或日起类型的input元素的专有属性，他限制了input元素中输入的数值和日期范围。属性值为数字。


立即运行：[html]
<form>
        <input id="w3cfuns_min_max" name="w3cfuns.com" required min="3" max="16" type="number"/>
        <input type="submit" value="提交"/>
</form>
[/html]

---

4、step属性：

1. 
   
2. <form>
   
3.         <input id="w3cfuns_step" name="w3cfuns.com" required step="10" min="0" max="100" type="number"/>
   
4.         <input type="submit" value="提交"/>
   
5. </form>
   

复制代码

step属性控制input元素的值增加或减少的步幅，例如你想让用户输入得值在0-100之间，但是必须是10的倍数时，则如上代码所示，点击下方运行看效果。


立即运行：[html]
<form>
        <input id="w3cfuns_step" name="w3cfuns.com" required step="10" min="0" max="100" type="number"/>
        <input type="submit" value="提交"/>
</form>
[/html]

转载于:https://www.cnblogs.com/zhp404/articles/4210071.html