The Email, URL, and Search text boxes

The Email Text Box

HTML5 introduces an email text box. This text box checks for a valid email address. Instead of TYPE="Text" you use TYPE="Email". Here's the code to try:

<FORM>

<INPUT TYPE="Email" PLACEHOLDER="Enter your email address">

<P>
<INPUT TYPE="Submit" VALUE="Submit">

</FORM>

An older browser that doesn't recognise TYPE="Email" will just display a normal text box. So you may as well use the new email TYPE right now, if you need to.
Again, though, browser support is patchy. Only Google Chrome and Firefox support the Email text box. Even then, Firefox lets meme@memecom through, when it should be .com on the end. (Chrome picks this error up and doesn't submit the form.)

The URL Text Box

A URL is a website address, usually with http:// at the front of www. HTML 5 introduced a text box for a URL. Here is the code to try. Notice the type is now URL:

<FORM>

<INPUT TYPE="URL" PLACEHOLDER="Enter a website">

<P>
<INPUT TYPE="Submit" VALUE="Submit">

</FORM>

At the time of writing, only Firefox and Chrome support the URL text box, popping up a message when you don't type the full address (complete with http:// at the front).

Search Boxes

The search box, despite its name, doesn't actually search for anything. All it does is to put an X on the right hand side of a text box. You click on the X and the text in the text box disappears. It's for when you make a mistake and want to start again. The search box only works in Chrome and Safari, at the time of writing. The HTML code is this:

SEARCH: <INPUT TYPE="Search">

In Safari on a windows machine, you'll see this when you type in the text box:

For OS X users the above box will have rounded corners. Browsers that don't support the search box are just normal text boxes without the X. So you can TYPE="Search" instead of TYPE="Text", if you like. At least your Chrome and Safari users will be happy!

In the next lesson, you'll learn about spinners and sliders.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 9 (HTML5 and Forms)