Input type of HTML5 form - url

<input type="url">, defines the input field (H5 new object) containing the URL address. The input field used to represent the semantic url address will automatically verify the value of the url field, and the appearance is no different from the input input type of type="text".

Simply put, it is used for an input field that should contain a URL address, and the value of the url field is automatically validated when the form is submitted.

(Hint: iPhone's Safari browser will recognize the url input type and change the touchscreen keyboard to fit it (add .com option)

Small example:

<form action="/example/html5/demo_form.asp" method="get">
网页：<input type="url" name="user_url" /><br />
<input type="submit" />
</form>

[Note: The input url is the default detection of the browser, and the support of each browser is different. It is best to write js to judge by yourself]

Compatibility: IE is not compatible with safari, but the safari browser in the mobile iPhone supports the url input type and works with it by changing the touchscreen keyboard (adding the .com option).

To create an Input URL object, you can create an <input type="url"> element by using the document.createElement() method:

<h3>Show me how to create a URL field</h3>
<p>Click the button to create the URL field. </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>

【advantage】

1.- Can write css style, input[type=email] or input[type=url]

2.- More semantic definitions can be made

3.-Mobile app adaptability: Mobile browsers will pop up special keyboards for emails and urls without the need for users to switch manually.

At first I thought it was redundant to add extra input types, but after thinking about it, I thought it would help improve the user experience, what do you think?

[Extension]: Application and comparison of the newly added URL type and email type of input in HTML5 form tutorial

In the past, when we made this type of input box, we used a lot of JS verification. Now, with HTML5, it is not so troublesome to write this effect. Let me introduce to you two new types of HTML5 input applications. .

1. URL type:

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

After setting this type, it looks similar to a normal element in appearance, but if you put this type in the form, when you click the submit button, if the input box is not a URL address, it will not be submitted.

2. Email type:

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

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

<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弹出特殊的键盘，不用用户手动切换。

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格式，如果不是，则无法提交。

Input type of HTML5 form - url

Guess you like