HTML & CSS: The Good Parts

Required Fields and Other Submission Constraints

There are a few occasions when a field needs to be filled, and the need is self-evident: search and login forms obviously meet that description.

Most of the time, however, it’s only obvious to the developer of a form or an application that a given field must be populated by the visitor prior to submission, even in common-sense cases such as forms to collect mailing addresses (and titled as such). In these cases, form elements need to be marked as “required,” and the corresponding checks need to be written into the site logic.

In other cases, user-submitted data might fall within certain constraints, as is the case with telephone numbers and email addresses especially. Handling these cases will require the use of string value checks and regular expressions.

Stylists have their own work to do in these cases: required fields must be marked appropriately, submission constraints identified in the clear for the visitor, and errors styled (preferably with accompanying feedback on the nature of the error).

Identifying Required Fields

Consider one of the label/control pairs described earlier in Figure 13-1, which delineates the footprints of li container elements, fieldsets, labels, and actual form controls. Assuming that you’re laying out your forms with the styles provided elsewhere in this section, you’ll likely be adding rules comparable to the following:

 .required { position: relative; padding-right: 3.3em; } .required label span.warning { ...