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 comments:
Post a Comment