There are many things to take into consideration when creating a form, you want to make it match your site as much as you possibly can. This can be done using CSS and some HTML tags that you may not already know.
Accessibility
The first thing to make sure is that your form is accessible to all users, one way of providing this is to use the label tag. The label tag is basically like a label on a food product, it is the description or the name of the form element. E.G. My feedback form.
| <p><label for="name">Name</label> :
<input type="text" name="name" id="name" /></p> <p><label for="email">Email</label> : <input type="text" name="email" id="email" /></p> <p><label for ="comment">Comments / Question</label> :</p> <p><textarea name="comment" rows="10" cols="30" id="comment"> </textarea></p> <p><input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" /></p> |
Here we have my feedback form, as you can see the name for the form elements are the same as the labels, this declares which label goes with which form element. Basically it's saying:
| <label for="name">Name</label> :
<input type="text" name="name" id="name" /> I am the label for that element, I am associated with it. |
You may be thinking what is the point of this, you can see the text you know exactly where to input the data. In some cases you may have a form with not enough space to lay it out as neatly as you would like, in this case you could use the label to make sure the user inputted the correct data into the correct field. Click on the text next to the input box below to see your cursor placed inside the text box.
:
You see the benefits this can have? Good. Now onto customizing other things about your forms.
Appearance
Think of a form element the same way as a DIV tag, tags can be applied to them in the same way. For example:
| .submit {
background-color: #DDEEFF; border: 1px solid: #9CC8F4; color: #777; font-family: verdana, sans-serif, "Times New Roman", serif; font-size: 12px; } |
And:
| <p><input class="submit" type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" /></p> |
Here you can see we have applied the previous styles to the SUBMIT button, while leaving the reset button default, here's what happens:
The same goes for any other form element, such as an input box:
:
This should put you well on your way to customizing forms to blend in with your site. Have fun playing around with them.
