HTML 5 Forms

By Mark DuBois
Director of Education

Details, details, details


It is April, 2015 as I write this post. HTML5 is supported by the majority of modern browsers. HTML5 contains a lot of semantic markup. For those who don’t know – semantic markup means that the HTML markup reinforces the meaning of the information on the web page. Yes, I often encounter pages written in an antiquated view of HTML. As a web designer or developer, I would think we should take advantage of these capabilities as often as possible/ practical. It doesn’t take more than a few moments when developing a page.

Permit me to provide a simple example. I often complete forms on my smartphone. I can’t count the number of times I have to use additional keys because someone who designed the form I am trying to complete had no understanding of the capabilities of HTML5. For example, one can code for a text input element which contains email. One can code this in multiple ways. Given this is 2015, I think the appropriate attribute should be type=”email” instead of type=”text” (and here is why).

I created two very simple forms. In the first example, I chose to use a semantic attribute. Note how the phone keyboard automatically detected that and provided a keyboard with the @ symbol included (very handy when entering an email address)

mark dubois form image





However, many forms I encounter use the older approach of type=”text” (note the keyboard which then pops up). I now have to tap another key (123) to get to the @ symbol. This is an extra step. It slows me down. I personally find it frustrating. Beyond that, search engines won’t know this input field is for email addresses.

Yes, this is a ridiculously simple example. I did this for a couple of reasons.
First, we are in the middle of a number of web design contests. Aspiring professionals should be developing good habits and practices. They should know all the semantic features of HTML5 and employ them where appropriate.
Second, we should all be taking advantages of these improvements. If we want our web page rank to increase on search engines, our pages should validate. Our pages should use semantic markup and so forth. It takes typing 1 extra character to use proper markup for the input field in question (is it really all that difficult to type email instead of text)?

As always, I look forward to your comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.