Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

HTML5 Input Type - Email

With previous versions of HTML you used the form control input type="text" to capture typed data from the user. If the data that the user typed in was anything but trivial text, you had to validate the user's input. Actually, in order to defend against code injection, you always had to validate the user's input. That involved using string methods and or regular expressions, for best security, at the server end.

But now HTML5 gives you several controls that perform the validation in the browser. The input type="email" is one of those controls, and it provides built-in validation of email addresses. The HTML5 email control works only in newer browsers such as Firefox 3.6 or Internet Explorer 9, so until everybody upgrades their browser, you still need to code your own input validation.

I tested the HTML5 email control's validation by entering a text email address without an ampersand (@). Shown below is the result.

Email input box error

Next, I tested the validation by entering just a name and ampersand without the domain. Shown below is the result.

Email input box error

Next, I tested the validation by entering just a name, ampersand and domain without the domain extension (e.g. .com), as shown below.

No email input box error

No, the error message is not missing in the image, there was no error message. Unfortunately the HTML5 email control doesn't think a domain without the domain extension is an error.

Shown below is example code using the HTML5 email control.

Email:
<form>
Email: <input type="email" name="email" />
<input type="submit" value="Sumit" onclick="javascript:alert(this.form.email.value)";/>
</form>

Note that I added some inline javascript to the onclick event of the form's submit button. You wouldn't normally do this, instead you would add method and action attributes to the form tag for submission to the web server. But this is one method you can use to test your form.

In conclusion, I would say that since the HTML5 email control's validation doesn't think a domain without the domain extension is an error, this control is of limited use. It's probably best to continue using string methods and or regular expressions for email address validation.

More HTML Code:
• HTML Select List Basics
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• The HTML Head Tag
• Meta Tag Basics
• Creating a Subscript or Superscript with HTML
• HTML Blockquote Basics
• Make an HTML Element Editable
• HTML Linking Basics
• Line Breaks in HTML
• HTML5 Input Type - Email


Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268