ProblemYou want to show users which parts of a form are required. SolutionFirst, 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 textApply 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 fieldsDiscussionModifying 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. See AlsoA tutorial on integrating form feedback with PHP at http://www.maketemplate.com/feedback/. |