Recipe 7.15. Integrating Form Feedback with a Form

Problem

You want to show users which parts of a form are required.

Solution

First, place an icon and text warning next to form labels of fields that are required (see Figure 7-23).

Apply a class attribute with a value of required to the label and form elements that are required in order to successfully process a form.

<form  name="msgform" method="post" action="/process.php">  <fieldset>   <legend>Contact Information</legend>   <label for="fmtitle" accesskey="i">T<span >i</span>tle</label>   <select name="fmtitle" >    <option value="ms">Ms.</option>    <option value="mrs">Mrs.</option>    <option value="miss">Miss</option>    <option value="mr">Mr.</option>   </select>   <label for="fmname" accesskey="n"><span >N</span>ame</label>   <input type="text" name="fmname"  />   <label for="fmemail" accesskey="e" > <span >E</span>mail <img src="/books/3/27/1/html/2/alert.gif" /> Required</label>   <input type="text"  name="fmemail"   />  </fieldset>  <fieldset>   <legend>Your Message</legend>   <label for="fmstate" accesskey="y">Subject</label>   <input type="text" name="fmcountry"  />   <label for="fmmsg" ><span >M</span>essage  <img src="/books/3/27/1/html/2/alert.gif" /> Required</label>   <textarea name="fmmsg" accesskey="m"  rows="5" cols="14"  ></textarea>  </fieldset>  <input type="submit" name="submit" value="send"  /> </form>

Figure 7-23. Required icon and warning text

Apply rules to change the text and border color of the forms (see Figure 7-24):

label {  margin-top: .33em;  display: block; } input {     display: block;     width: 250px; } textarea {     width: 250px;     height: 75px; } label.required {  color: #c00;  font-weight: bold; } textarea.required, input.required  {  border: 1px solid red;  background-color: #eee; }

Figure 7-24. Modified required form fields

Discussion

Modifying form and label elements with color and bold text lets users readily know what the problem areas of their form are.

Adding the word "required" and a warning icon also help to clue users to problems with their form submission. In case a user's browser doesn't support CSS, the text and image will then be the only clues for users as to what needs to be corrected in order for the form to be submitted correctly.