Join Ray Villalobos for an in-depth discussion in this video Adding labels and basic usability to your forms, part of CSS: Styling Forms.
Most input fields should have some kind of label that tells users what they need to type to fill out the form. Although we can just simply type some text next to the fields, there is a special tag we can use called the label tag, and using it has a few benefits. With the label tag, the information in the form becomes more meaningful and easier to style with CSS. We are going to open up the exercise files folder and open up the Starting Points folder, find the folder for this chapter, and copy the Working Folder on to our desktop. And then we are going to drag that onto Espresso, which will open it up as a project. And I am also going to drag the codesnippets.txt file into the Workspace, double-click on the index file in the Project section.
That will also open it up in the Workspace. Then I am going to Option+Click on the Preview icon, and that will open up a preview of this document. Let's modify the hidden input field to allow someone to turn on or off searching for images with a check box. Go to the codesnippets file and find a section for this chapter, and I'm going to copy this input field right here, go back into our index file, and take this hidden input field out and paste our new version with it so you could see that now we have a check box that allows people to turn searching for images on and off by clicking on it, and we have a label next to the check box that let's people know what this search is for.
Typing a label next to a field looks fine, but it doesn't do a good job of associating the label with the input field. It could just as well belong to this search box right here. Plus someone using an assistive device might have problems understanding which label goes with what input field. Most of the time input field labels go before the input field, but on radio or check box input types, the labels are always after the fields, so those can be especially confusing without labels. Let's go back into our codesnippets file and grab the next piece of code, and we'll go back to our index.html file, and we will replace our form of code right here.
Using labels you can create a label tag and then add a for attribute to the label tag and an ID to the input field. See that we've tied these things together by adding a for attribute here on the label and adding an ID to the input field; that ties these two things together. Having an additional tag around our labels means that we can also style them easily with CSS. Adding a label and associating it with the input field has the added bonus of making the label activate the input field.
If we click on the Images label, we can automatically activate the check box without having to click exactly on the check box. That could be a real benefit, especially since check boxes are sometimes a little bit tiny. This is especially useful on iOS devices. So let's open up the iOS Simulator. We'll open up Safari. When we open up Safari, we'll take our copy of our index file-- I am going to make sure I save it first-- from our Projects file into Safari, and it will pull up the document in there. See that by default the document comes up really tiny on mobile Safari, but I can still click on the Images label and easily activate the form element.
There are a lot of other fields that we can use to help this form perform better and provide other usability features in some browsers, so let's take a look. I am going to quit the iOS Simulator. I am going to go back to my codesnippets file and copy the next version of our form where we've added a lot of other usability features. So in our index file, we'll replace our form fields with a new version that has some additional features. On some browsers, adding a title field like this will bring up a tooltip pop-up after a second.
So if we come over here and we put our cursor on top of the Search field, after a second, you will see that this "Type your search term here" will come up, which is what we typed in into our title field here. You can see we've changed the order so that tapping the Tab will activate the second field and then the first field. Some browsers allow people to tab through different fields, and this is especially useful if layout is complex. You can use the tab index attribute to change the order in which tabs activate the fields. So right here we've changed it so that tapping the Tab activates the second field as opposed to the first field.
Now if I try this on this browser, you'll see that it's not actually working, and this version of Safari that Espresso is using for a preview doesn't work that way. I am going to copy the location of this file, just by triple-clicking here and selecting Copy, and I am going to pull up the Chrome browser and paste the location of the document. And you'll see that if I hit the Tab key, my second field, the Images check box, activates before my first field, which is the Search. So it doesn't work on all browsers, but it's another usability feature that can be useful.
Adding the label, the title, and tab index attributes can go a long way towards providing enhanced usability in your documents, and also has some really handy benefits, like making it easier to choose items and also easier to select the items with CSS.
- Creating forms with the <form> element
- Adding labels and basic usability features
- Navigating elements between browsers
- Styling the background
- Creating input and button fields
- Working with select fields
- Floating and positioning grouped elements
- Using HTML5 input types
- Resizing elements and adjusting the view for mobile devices
- Adding jQuery navigation
- Designing validation feedback