Tips and Tricks

Tips for HTML Forms Design

Make your web forms unique with CSS

By Catalin Bocanu, Web News Editor

17th of September 2007, 18:22 GMT

Adjust text size:

The design of the forms for your website could have various ways of impact over your site visitors. The structure of your web forms could also influence the way they are processed. The forms should require from your visitors only the minimal quantity of necessary information regarding a certain topic.

For example in case you design a login form you should use cookies and checkboxes to allow visitors to type their username and password only once. While the cookie will be active on the visitor's computer, he or she will not have to fill in the login form again, because they will be automatically redirected to the password protected content. Every form must have a title and its elements must be labeled according to their destination. The form in ensemble must be easy to understand by all visitors in order to be used. The formatting of the form elements

plays an important role in this sense.

The simplest method you should choose when you design forms is the utilization of CSS (Cascading Style Sheets) for the rapid creation and easy modification. You can also use a form generator, but the results will not be always optimal. The next example presents the forms elements formatting with the aid of CSS (a simple feedback form):

[CODE=0]

form {
border: 3px solid red;
padding: 8px;
background-color: blue;
color: yellow;
}
textarea,input,button {
background-color: green;
border: red 3px solid;
color: red
}

Name:

Phone:

Email:

Message:

[CODE=1]

Between the head tags you can define the CSS for the form in which you can include text font, color, border color and thickness and more. You can also format individual elements such as checkboxes, radio buttons, text input fields. Then, in the body of the document you define the form elements delimited by the form tag and after you finish, preview the form in a web browser. You can easily change parameters for the CSS in order to optimize the form appearance.

Try to use high color contrast scheme, but limit the number of colors used. This example is without complex formatting, meant to show you how easy it is to develop and test web forms by using CSS. When you design new web forms, you should have in mind that it is indicated to use validation scripts that will assure a correct feedback from your visitors. There are many free javascripts and PHP form validators. But first you must design the form and then decide what fields must be validated.

The validation techniques are also complex and you should limit the number of fields that must support validation in order to obtain the best results. You should keep in mind that the success of your e-commerce website, forum, blog or any other website that require visitors feedback through forms, resides in your form design, position on page and filling in simplicity. If you use a form generator (it usually provides the validation script), then you can optimize your web form appearance by applying the corresponding CSS to its elements.

TAGS:

HTML Forms | Forms Design | Forms Validation | Forms Fields | Form Processing

SEARCH THE NEWS ARCHIVE :

Today's News | Yesterday's News | News Archive

User opinions:

No user comments yet.

Be the first to express your opinion using the form below!

Share your opinion:

SUBMIT PROGRAM \| ADVERTISE \| GET HELP \| SEND US FEEDBACK \| RSS FEEDS \| ENTER NEWS SITE \| ENGLISH BOARD \| ROMANIAN FORUM
© 2001 - 2008 Softpedia. All rights reserved. Softpedia™ and the Softpedia™ logo are registered trademarks of SoftNews NET SRL.	Copyright Information \| Privacy Policy \| Terms of Use \| Update your software \| Archive

NEWS CATEGORIES: