As a front-end developer, it is always important to have usability and user experience in mind during the duration of a project because a front-end developer deals with that the users is able to see on a website.

One of the HTML elements that I deal with often on a project are forms, and they can range from simple contact forms or for large-scale web applications. Generally, the HTML structure for forms are straightforward. However, there are some simple tips you can follow to improve user experience.

Use those <label>‘s

I think a lot of times <label> tags are overlooked. Simply put, these <label> tags define the label for <input> elements. It seems like they don’t do much if you use them, but they actually serve a good purpose. For example, when a user is viewing a form that uses <label> tags, he or she could click on the label with the mouse, and the corresponding input item will be highlighted. To make sure labels highlight the input item, the HTML should look something like this:

<label for="foo">Bar</label>
<input type="text" name="fooBar" id="foo" value="" />

The important thing to keep in mind in the above example is to make sure that the for attribute on the <label> is the same as the id attribute on the <input> element.

Another way to take advantage of <label> tags are to wrap radio and checkbox input items in the label tags. By doing this, when a user clicks on the label for the radio or checkbox input item, the click will select the input item. For an example, try clicking the text for checkbox items on the contact form on the right side of this page. Do you see how the checkbox becomes checked when the text is clicked? That is because of the <label> tag.

Forms on mobile devices need a submit button

I was working on a project recently, and the project entailed having forms on a mobile device. As you may be familiar if you have an Apple product, when you fill out a form there is a “GO” button on the keyboard. In order for this keyboard “GO” button to work, you must have a <input type="submit" /> on your page. Pressing the “GO” button is like clicking on the button, so there needs to be a submit button.

If you don’t want the button to appear on your mobile page, you can always set the CSS for that input element to be position:absolute and visibility:hidden.

Conclusion

Forms can be complicated depending on the length of the form and the amount of information that it needs to process. However, keeping these simple tips in mind will help make the end experience better for the users.

By: Blueprint