Pub Pixel Avatar Image

How To Allow Your Users To Enter An Email Address To Your Web Pages Forms Using HTML5

Published:

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

Article Details

Views: 507

First Published:

Word Count: 1067

Edition: 1

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 is 256 characters which restricts the entire email address to be no more than 254 characters long. This is because the Simple Mail Transfer Protocol (SMTP) which is used for sending and receiving email, encases an email address in angle brackets (< >) for example, <joe-blow@example.com>.

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 period also known as a baseline dot, full stop or dot character (.) given that it is not the first or last character of the local-part, also the dot, baseline dot, period or full stop character 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 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="email" multiple="multiple" />
 </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.