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

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

HTML5的方法:

  1. <form id="form1" action="http://www.w3cfuns.com/">
  2. <input type="submit" value="提交"/>
  3. </form>
  4. <input id="userName" name="userName" form="form1" type="text"/>
  5. <input id="userPwd" name="userPwd" form="form1" type="password"/>
  6. <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. <form>
  2. <input id="w3cfuns_date" name="w3cfuns.com" type="date"/>
  3. <input type="submit" value="提交"/>
  4. </form>

复制代码

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

2、Time类型:

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

复制代码

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


3、DateTime类型:
  1. <form>
  2. <input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/>
  3. <input type="submit" value="提交"/>
  4. </form>

复制代码

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

运行效果如下图:

4、DateTime-Local类型:

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

复制代码

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

运行效果如下图:

5、Month类型:

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

复制代码

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

运行效果如下图:


6、Week类型:
  1. <form>
  2. <input id="w3cfuns_week" name="w3cfuns.com" type="week"/>
  3. <input type="submit" value="提交"/>
  4. </form>

复制代码

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

运行效果如下图:

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

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

复制代码

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

 


2、range类型:

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

复制代码

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


3、search类型:

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

复制代码

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

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

4、tel类型:

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

复制代码

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

 

5、color类型:

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

复制代码

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


6、output标签:

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

复制代码

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

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

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

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

复制代码

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

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


2、pattern属性:

  1. <form>
  2. <input id="w3cfuns_pattern" name="w3cfuns.com" required pattern="d{3}" type="text"/>
  3. <input type="submit" value="提交"/>
  4. </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. <form>
  2. <input id="w3cfuns_min_max" name="w3cfuns.com" required min="3" max="16" type="number"/>
  3. <input type="submit" value="提交"/>
  4. </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. <form>
  2. <input id="w3cfuns_step" name="w3cfuns.com" required step="10" min="0" max="100" type="number"/>
  3. <input type="submit" value="提交"/>
  4. </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]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--url类型-->
<form>
<input name="url" type="url" value="http://www.jikexueyuan.com">
<input type="submit" value="提交">
<br/>
<br/>
<!--email 类型 -->
<input type="email" name="email" value="794023496@qq.com">
<input type="submit" name="提交">
<br/>
<br/>
<!--data 类型-->
<input type="date" name="data" value="" >
<br/>
<br/> <!--time类型-->
<input type="time" name="time" value="10:00">
<br/>
<br/>
<!--datetime类型-->
<input type="datetime" name="datetime" value="">
<br/>
<br/>
<!--datetime-local类型-->
<input type="datetime-local" name="datetime-local" >
<br/>
<br/>
<!--month类型-->
<input type="month" name="month" value="2016-08-26">
<br/>
<br/>
<!--week类型-->
<input type="week" name="week">
<br/>
<br/>
<!--number类型-->
<input type="number" name="number" value="15" max="100" step="5" min="10">
</form>
<!--计算器-->
<script>
function sum() {
var n1=document.getElementById("nu1").valueAsNumber;
var n2=document.getElementById("nu2").valueAsNumber;
document.getElementById("result").valueAsNumber=n1+n2;
}
</script>
<br/>
<form>
<input type="number" id="nu1">+
<input type="number" id="nu2">=
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="sum()">
</form>
<br/>
<!--range类型-->
<input name="range" type="range" value="20" min="0" max="100" step="2">
<br/>
<br/>
<!--search类型-->
<input type="search">
<br/>
<br/>
<!--tel类型-->
<input type="tel">
<!--color类型-->
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value;">
<span id="currentColor"></span>
<br/>
<br/>
<!--output元素追加-->
<script>
function value_change() {
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}
</script>
<form id="testform">
<input type="range" id="range" min="0" max="100" step="5" value="10" onchange="value_change()" >
<output id="output">10</output>
</form>
<br/>
<br/>
<!--表单验证-->
<script>
function check() {
var email=document.getElementById("email");
if(email.value==""){
alert("请输入email");
}else if(!email.checkValidity()){
alert("请输入正确的Email地址!")
return false;
}
}
</script>
<form id="teatform" onsubmit="check()" novalidate="true">
<label for="email">Email</label>
<input name="email" type="email" id="email">
<input type="submit">
</form>
<br/>
<br/>
<br/>
<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form>
</body>
</html>

 
 
 
 
 
 
 

HTML5增加与改良的input元素的更多相关文章

  1. [html5] 学习笔记-改良的input元素种类

    在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...

  2. HTML5 改良的 input 元素的种类

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

  3. html5改良的input元素的种类

    1.url类型.email类型.date类型.time类型.datetime类型.datetime-local类型. month类型.week类型.number类型.range类型.search类型. ...

  4. html5权威指南:定制input元素

    第十三章:定制Inpur元素,http://www.cnblogs.com/polk6/p/5417921.html#Menu3-New input标签最全面的type属性:http://blog.s ...

  5. html5 新增和改良的input 类型实例

    url test1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. web前端学习(二)html学习笔记部分(2)-- 改良的元素(input元素等等)

    1.2.5  HTML5 改良的 input 元素的种类 1.2.5.1  新增的input元素种类中的改良与增加 input 元素的种类 (1) 新增的input元素种类中的url类型.email类 ...

  7. html5 大幅度地增加和改良input元素的种类

    增加和改良input元素 url类型.email类型.date类型.time类型.datetime类型.datetime-local类型.month类型.week类型.number类型.range类型 ...

  8. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

  9. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

随机推荐

  1. bzoj1257[CQOI2007]余数之和(除法分块)

    1257: [CQOI2007]余数之和 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 6117  Solved: 2949[Submit][Statu ...

  2. Ubuntu 18.04 LTS 常见问题解决 2

    1 每次重启后都有system program problem detected sudo gedit /etc/default/apport 然后将打开的文件中的enabled=1改为0,原因暂时不 ...

  3. SpringBoot的配置文件加载顺序以及如何获取jar包里的资源路径

    一.读取配置文件的四种方式 这四种配置文件放置方式的读取优先级依次递减,具体可以查看官方文档. 1.1jar包同级目录下的config文件夹里的配置文件 其实我以前就见过这种方式了,只是不知道怎么做的 ...

  4. python堆排序实现TOPK问题

    # 构建小顶堆跳转def sift(li, low, higt): tmp = li[low] i = low j = 2 * i + 1 while j <= higt: # 情况2:i已经是 ...

  5. URAL 7077 Little Zu Chongzhi's Triangles(14广州I)

    题目传送门 题意:有n根木棍,三根可能能够构成三角形,选出最多的三角形,问最大面积 分析:看到这个数据范围应该想到状压DP,这次我想到了.0010101的状态中,1表示第i根木棍选择,0表示没选,每一 ...

  6. mysql 三大范式【转载】

    第一范式(1NF,normal format):字段不能再分. 这是字段的原子性.例如:字段“学期时间”:2014-9-1,2015-1-15. 这个字段“学期时间”可以再分为“学期开始时间”,201 ...

  7. Execution of 'source /usr/hdp/current/oozie-server/conf/oozie--env.sh: oozie admin -oozie http://nssa-sensor3:11000/oozie -status' returned 255.解决办法(图文详解)

    不多说,直接上干货! 问题详情 解决办法 Copy/Paste oozie.services property tag set from oozie-default.xml to oozie-site ...

  8. 你有学习者综合征吗?Web 开发是重灾区

    [导读]:学习者综合征的主要表现:学而不用,不停学习,却没有真正实际应用知识来做东西.如果过去的一年里,学习的语言或框架超过三个,那可能已经感染学习者综合征了.Web 开发是重灾区咯. 你有学习者综合 ...

  9. Javaweb之xml

        1 XML概述     1.1 XML是什么? eXtensible Markup Language可扩展标记语言          1.2 XML作用         主要是用于描述数据,而 ...

  10. python * urllib_urlopen( )

    python * urllib_urlopen( ) Python urllib 库提供了一个从指定的 URL 地址获取网页数据,然后对其进行分析处理,获取想要的数据. 一.urllib模块urlop ...