Mission Log

We love talking about interactive design and development.

Forms in HTML5

Forms haven't changed much in HTML5, but it's always good to review best practices.

Type

Utilize the ‘type’ for inputs. This is helpful in signaling the browser what type of input field we're dealing with. For instance, it could be plain text, image, file, password, hidden, radio, etc.

<input type="text"/>

New in HTML5, you can declare different, more specific input types. On touch devices it will control the keyboard, and depending upon the context, allow the user easier access to certain keys. For example: the 'email' input type typically will call up the '@' symbol on the keyboard for the user. For example:

<input type="email"/>

Name & ID

Utilize the ‘type’ for inputs. On touch devices it will control the keyboard, and depending upon the context, allow the user easier access to certain keys. For example: the 'email' input type typically will call up the '@' symbol on the keyboard for the user.

<input name="email" id="email" type="email"/>

Typically we build my forms with both name and id fields, so later in the process we can implement additional features without revising our markup. A little forethought can really make future revisions a lot smoother.

Label

Labels are super handy elements that are sibling elements (and in some cases a parent element). These should always be utilized to show the name of the input it's associated with, or to prompt the user for the correct piece of data. (Hint: With checkbox inputs, it's helpful to wrap the label tag around the checkbox. The entire label is clickable for the user, and it makes it easier for the user to get a check in that checkbox.)

<label for="email">What is your email address?</label>
<input name="email" id="email" type="email"/>

Placeholder Attribute

Placeholder attributes are a great tool to show a user example content, or ask a question. Beware not to abuse placeholders. They are not a replacement for a label, instead the W3 spec specifically calls it out as a hint to what the user should insert.

<label for="name">What is your email address?</label>
<input name="email" id="email" type="email" placeholder="person@example.com"/>

Validation

With HTML5, you can do even do basic in-browser validation in some of the modern browser like Firefox. Have a look at their developer's guide for some helpful information.

Conclusion

With HTML5, forms haven't changed much, but there are some new and handy new features that we can utilize. Take a look over at the W3 at some of the latest helpful revisions in the HTML5 spec. Plan your forms out, and give some forethought to what features may come in the future. Using unique ID, adding clases to control display, and specific values will work to your advange as a developer, as well as improving the user's experience.

Comments

Interested in working with us?

Contact Us Now