I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML5 Form Inputs: search, url & eMail

html / forms

Estimated reading time: 2 minutes, 13 seconds

As the new HTML5 semantic container tags are to <div>, so these new form inputs are to the generic <input type=text> element. Having specific elements for search fields, URLs, eMail address inputs and a color picker allow browsers and devices to be far more powerful and responsive.

Search element

The search element is new to HTML5:

<input type=search name=search id=search>

The search input does not, by itself, initiate a search. What it does deliver are browser-supported features that are useful in searches: the ability to clear the field without typing or clicking a separate button.

The HTML5 <mark> element should be used to highlight search responses.

URL input

The URL input type is designed to take web addresses, such as entering your portfolio URL into a form.

<label for=portfolio accesskey=p>Your website portfolio:</label>
<input type=url name=portfolio id=portfolio>

Again it is not so much about how this element looks, as to the fact that the browser now recognizes that a URL should be entered into the field. The browser could validate this information, lock off or present certain keys (the iPhone presents a .com key to increase the user’s speed in completing the field quicker), or other actions.

eMail input

Like the URL element discussed above, the eMail input is designed to take addresses:

<label for=email accesskey=e>Your eMail address:</label>
<input type=email name=email id=email>

Browsers will understand that this field is designed to take eMail addresses, and will validate any data the user enters.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.