Now before there was HTML5 a simple <input> type text field would do the trick in-order to allow your users to enter an email address, but HTML5 gave us a new way to allow your users to enter an email address and have it checked to see if it's a valid email address all by using the new email value for the <input> element's type attribute.
The new email value for the type attribute creates the <input type="email" /> control also called the email address control, which is used for entering one email address that the browser can check
to see if it's a valid email address. You may also enter multiple email
addresses using the multiple attribute, which I will show you how to do
later on in this tutorial.
Now let me explain what a valid
email address is. A valid email address begins with the "local-part"
followed by the "@" (at sign) followed by the "domain", for example,
local-part@domain or in other words, joe-blow@example.com is the syntax
of a valid email address.
The "local-part" of an email address
can be up to 64 characters long and the domain name itself may have a
maximum of 253 characters. But there is one problem with this however,
the maximum length of a forward or reverse path length of 256 characters
restricts the entire email address to be no more than 254 characters
long.
The local-part of the email address may include any of the ASCII characters below:
- Uppercase and lowercase English letters (a–z, A–Z)
- Digits that range from 0 to 9
- The characters ! $ # % & * + = - / ? ^ _ ` { | } ~
- And the character . (dot, period, full stop) given that it is not the first or last character of the local-part, also the dot, period or full stop should not appear two or more times consecutively for example, (Joe..Blow@example.com).
The domain name part of an
email address has to follow the strict guidelines that must match the
requirements for a hostname, that consist of letters, digits, hyphens
and dots.
If you specify the value attribute for the <input>
element, the value attributes value must have a value that is a single
valid email address. Else, if the multiple attribute is set the value
attributes value must have a value that is a valid email address list. I
will explain later on what an email address list is when I explain the
multiple attribute later on in this tutorial.
As with all <input> types, the user may submit the form with the <input> type email field empty unless the required attribute is present.
Now let me show you how to code in the new email value for the <input> element's type
attribute to create our HTML5 web page, in-order to allow our users to
enter an email address to our forms and have it checked if it's a valid
email address by a user agent like a browser for instance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<form>
<input type="email">
</form>
</body>
</html>
And here is how to code the new email value for the <input> element's type attribute for HTML5 to create our XHTML5 web page.
<?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="email" />
</form>
</body>
</html>
Now let me explain and show you how to use the multiple attribute for the <input> element.
- multiple
- The multiple attribute for the <input> element is new to HTML5 and indicates that the user is allowed to enter more than one value at a time.The multiple attribute is a boolean attribute, which means that the multiple attribute needs no value for HTML5 web pages, all you have to do is include the word multiple in the desired <input> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the multiple attribute will need to have a value of multiple, for instance multiple="multiple" in-order for the attribute to validate in XHTML.Now when the multiple attribute is placed with the new email value for the <input> element's type attribute, which creates the <input type="email" /> control it indicates that the value of the <input type="email" /> field can be a list of comma-separated valid email addresses for instance, (joe-blow@example.com, some.one@example.com, another-email.address@example.com). So in other words the multiple attribute basically allows the user to enter one or more valid email addresses.If you specify the value attribute for the <input> element and the multiple attribute is specified the value attributes value must have a value that is a valid email address list that is comma-separated.Here is how to code the <input> element's multiple attribute for HTML5.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <form> <input type="email" multiple> </form> </body> </html>And here is how to code <input> element's multiple attribute for XHTML.<?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="email" multiple="multiple" /> </form> </body> </html>
300Ribu Dapat Website
0 komentar:
Posting Komentar