demosthenes.info

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 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 Attributes: required, placeholder & autofocus

html / forms

Estimated reading time: 2 minutes

HTML5 offers over a dozen new input types, along with several fresh . Used together, they make web forms far more powerful and flexible, while eliminating or reducing much of the previous need for and to validate user data. This article focuses on attributes that can be added to every form: required, placeholder and autofocus.

Placeholder text

The first is a feature that has been a feature of forms for some time, albeit one created via JavaScript: placeholder text within an <input>.

<input type=text name=firstname id=firstname placeholder="Enter your first name here">

Note that a <label> tag should still be present: most screen readers for the blind do not yet read placeholder text. The content of the <label> element says what the input is for; the placeholder text is simply a hint or guide. So the entire code would be:

<label for=firstname accesskey=f>First name</label>
<input type=text name=firstname id=firstname placeholder="Enter your first name here">

placeholder replaces previous techniques that have used a combination of CSS and/or JavaScript to create the same effect. You can style the placeholder text in some, but not all, browsers, using proprietary CSS:

input::-webkit-input-placeholder, input:-moz-placeholder { color: #999; }

A few reminders:

  • Never use placeholder as a substitute for <label>
  • Always make the placeholder text as generic as possible, otherwise it is likely that users may assume that the form has already been filled out for them.

autofocus

We have always been able to control the order of focus in a form with the tab index attribute, but outside of JavaScript there was no way to make a particular field active by default, with the cursor inside it… and even the JavaScript solutions were a little tacky and prone to error. Now we can use the following:

<input type=text name=firstname id=firstname autofocus=true>

Please be careful with this: “stealing focus” from users is, generally speaking, a poor interface decision.

required

Up until now there has been no way in HTML to insist that certain fields be filled out before the user can submit a form. That has been one of the primary purposes of form validation with PHP and/or JavaScript. HTML5 can now build that insistence into a form:

<form action=formhandler.php>
<label for=firstname accesskey=f>First name</label>
<input type=text name=firstname id=firstname required>
<label for=lastname accesskey=l>Last name</label>
<input type=text name=lastname id=lastname>
<input type=submit>
</form>

In Firefox, pressing the submit button without entering information into the first field will result in the browser displaying the following:HTML5 required field

required most often is applied with the pattern attribute, which uses regular expressions to validate user data. The error message associated with an invalid input can be customised with CSS, JavaScript, using the title attribute, or a combination of all three.

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.