MyException - 我的异常网
当前位置:我的异常网» HTML5 » HTML5表单之Input 部类-url

HTML5表单之Input 部类-url

www.MyException.Cn  网友分享于:2013-01-17  浏览:0次
HTML5表单之Input 类型-url

<input type="url">,定义包含URL地址的输入域 (H5新对象)。用于表示语义上的url地址的输入域,会自动验证url域的值,外观上与type="text"的input输入类型没有差异.。

 简单说就是用于应该包含 URL 地址的输入字段,并且会在提交表单时对 url 字段的值自动进行验证。

 (提示:iPhone 的 Safari 浏览器会识别 url 输入类型,然后改变触摸屏的键盘来适应它(添加 .com 选项)

小例子:

 

<form action="/example/html5/demo_form.asp" method="get">
网页:<input type="url" name="user_url" /><br />
<input type="submit" />
</form>
 【注意:input的url是浏览器内定的检测,各家浏览器支持也不一样,最好是自己写js去判断】

兼容:IE与safari不兼容,但是手机iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。

 

创建 Input URL 对象,可以通过使用 document.createElement() 方法来创建 <input type="url"> 元素:

 

<h3>演示如何创建 URL 字段</h3>
<p>点击按钮来创建 URL 字段。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "url");
    x.setAttribute("value", "http://www.google.com");
    document.body.appendChild(x);
}
</script>
 
  【优点】
 1.- 可以针对性编写css样式,input[type=email]或input[type=url]
 2.- 可以做更多的语义定义
3.-移动应用适配性:移动浏览器将会为email和url弹出特殊的键盘,不用用户手动切换。
 最初我认为添加多余的input type很多余,但深入思考后觉得有助于提高用户体验,你认为呢?

 

【拓展】:HTML5表单教程之input新增加的URL类型与email类型应用与对比

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

1、URL类型:

<form> 
        <input name="urls" type="url" value=""/> 
        <input type="submit" value="提交"/> 
</form> 

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

 

 2.Email类型:

<form> 
        <input name="urls" type="email" value=""/> 
        <input type="submit" value="提交"/> 
</form> 

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

 

 

文章评论

如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
如何成为一名黑客
如何成为一名黑客
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
鲜为人知的编程真相
鲜为人知的编程真相
漫画:程序员的工作
漫画:程序员的工作
我的丈夫是个程序员
我的丈夫是个程序员
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员应该关注的一些事儿
程序员应该关注的一些事儿
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
 程序员的样子
程序员的样子
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
我是如何打败拖延症的
我是如何打败拖延症的
中美印日四国程序员比较
中美印日四国程序员比较
程序员都该阅读的书
程序员都该阅读的书
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员的鄙视链
程序员的鄙视链
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
Java程序员必看电影
Java程序员必看电影
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
编程语言是女人
编程语言是女人
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
每天工作4小时的程序员
每天工作4小时的程序员
旅行,写作,编程
旅行,写作,编程
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
代码女神横空出世
代码女神横空出世
10个调试和排错的小建议
10个调试和排错的小建议
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
老程序员的下场
老程序员的下场
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
一个程序员的时间管理
一个程序员的时间管理
程序员和编码员之间的区别
程序员和编码员之间的区别
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员必看的十大电影
程序员必看的十大电影
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有