- Parts of a Form Element
- Setting Up the Styles
- Adding the Classes
Adding the Classes
After you set up your classes, it’s time to set up your form. Don’t worry about making it look pretty in the HTML code (that’s what the CSS is for), but do use the for attribute with labels to associate them with a form field.
<label for="firstName">Name</label> <input class="formInputText" type="text" name="firstName" id="firstName" value="First" size="12" maxlength="16" tabindex="1" onfocus="clearField(this)" />
I’m also using a simple JavaScript function that allows me to prepopulate the value of the field and then erase it when the user clicks in the field.
function clearField(obj) { if (obj.defaultValue==obj.value) obj.value = ’’; }
Of course, this technique can also be used to add further dynamic interactivity with the form.