Pub Pixel Avatar Image

Learn How To Let Your Users Enter A Web Pages URL Address Into Your Forms Using HTML5

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 1073

First Published:

Word Count: 773

Edition: 1

Now HTML5 introduces a way for you and your users to enter a web address into a form. A web address is also known as a URL (Uniform Resource Locator) and a URI (Uniform Resource Identifier), which is a special type of text that specifies where an identified resource is located and the mechanism for retrieving it.

In-order to enter a URL address in HTML5 you will need to use the type attributes new value url for the <input> element. The <input type="url" /> control will create a text entry control that will allow you or your users to enter a single absolute URL web address. The browser or user agent will then try to validate the data entered into the <input type="url" /> field to make sure it is in the correct URL format if not it will then return an error message.

The syntax for a web pages absolute URL must specify the protocol such as http:// or ftp://, for example. You will also need to include the domain name and port, for instance www.example.com and the file name if needed, such as file-name.htm to make up an absolute URL.

So if you encounter a form that asks you to enter your web sites web address. The form will probably be expecting a web address like http://www.example.com/ and not something like "123 fake URL."

The <input type="url" /> control when displayed in the iPhone displays an altered virtual keyboard that has been optimized for web addresses. The space bar has been replaced with three virtual keys for instance a period, a forward slash, and a .com button. If you press and hold the .com button for a while also known as a long press you will be able to choose other common suffixes like .org or .net.

In Opera version 11.01 if you just type in the web address, for example www.example.com and leave out the protocol http:// for instance. Opera will append the http:// protocol to the web address, so www.example.com will become http://www.example.com.

An Important note that you should remember is that you cannot insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into your web address for your <input type="url" /> value.

Browsers that don't support HTML5 will interpret the <input type="url" /> control as if it was exactly like <input type="text" /> control.

Here is how to code the <input type="url" /> field HTML5 style.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>  
</head>
<body>

 <form>
  <input type="url">
 </form>

</body>
</html>

Here is how to code the <input type="url" /> field for XHTML5.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <form>
  <input type="url" />
 </form>

</body>
</html>

Now that you know how to add the <input type="url" /> control, what if you want to specify a web pages absolute URL value for the <input type="url" /> control. In-order to do this you will need to use the value attribute.

The value attribute when specified must have an absolute URL which can optionally include leading and/or trailing space characters or it can have no value at all with no leading and trailing white space.

Here is how to code the value attribute for the <input type="url" /> control.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head> 
<body>

 <form>
  <input type="url" value="http://www.example.com/">  
 </form>

</body>
</html>

And here is how to code an empty value for the value attribute for the <input type="url" /> control.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>  
</head> 
<body>

 <form>
  <input type="url" value="">
 </form>

</body>
</html>

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.