Friends

Rabu, 12 Oktober 2011

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

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>

0 komentar:

Posting Komentar

#
### ###