Form
The form above uses CSS to align inputs and labels in a two column configuration. We also use styles for our submit button, fieldset legends, and the hover and focus highlighting of text inputs. The highlighting not only looks good, it helps orient users within the form.
When designing forms, group related inputs using fieldsets with legends. Also use label tags to clearly associate inputs with their labels. Logical grouping of inputs and use of labels enhance usability for all users by clearing up ambiguity in forms. Such techniques provide great advantages to users with disabilities or those using adaptive technologies, as well. Highlighting of inputs when focused helps users with low vision or users using screen magnification. Labels also increase the clickable target area for inputs, which helps users with mobility impairments. You can test this by clicking on the text "First Name". You will notice that clicking it puts the focus in the associated input text field. Screen readers can make incorrect associations between form inputs and their descriptions, thus making forms essentially unusable. Proper use of label tags makes a clear association between form descriptions and inputs, thereby avoiding this problem.