Whether your website has a simple contact form or your web app has many forms scattered around your application, form design is crucial to usability.
A form is a set of input fields which allow the user to interact with the website usually to store information somewhere. This “somewhere” is often in an email or a database hosted on the websites servers. HTML (Hyper Text Markup Language ) has design patterns for each of the form elements. Each element has been constructed for a specific purpose and the form elements you use should be carefully considered in order to gather the information you want.
Text fields
Text fields should be used to gather small amounts of alphanumeric data.
Text areas
Text areas are similar to text fields but are more useful when you want to gather larger amounts of alphanumeric data.
Radio buttons
Radio buttons allow the user to select a single item from a list of items.
Option selectors
These drop-down boxes are similar to radio buttons, as they only yet the user select one option of many, but whereas a list of radio buttons can take up a lot of screen space, options selectors are more condensed.
Multiple option selectors
These allow users to select multiple options from a list of options.
Check boxes
Similar to multiple option selectors, check boxes allow users to select multiple options from a list of options.
Buttons
Traditionally form buttons are the elements that tell your web browser to do something with the data in the form e.g. send of an email, login to a social network. Nowadays these actions can be fired off by any form element. The button is still the most used for actions however, and web users expect buttons to be in charge of setting off actions.
Labels
Maybe the most important form element of all. Labels tell users what fields require what information. Labels are the story tellers and directors. Without them, users would be lost in a sea of anonymous form elements.
