HTML Forms: Some Tips

An excellent reference about HTML forms (and CSS) is Styling HTML forms, from Mozilla (MDN). The gist is that it's tricky, in various ways, to apply CSS to the actual form elements, such as input fields, because of remaining inconsistencies among browsers. This is one reason why jQuery UI and its pre-made themes are so popular: The form elements in each theme look the same, reliably, across browsers and operating systems.

Differences among browsers are illustrated here. You might be surprised at how much the appearance of form elements varies.

You can use CSS to position elements in a form and (mostly) style fonts around and inside form elements. So there is no reason for a form to look ugly. All form elements can be lined up neatly and spaced gracefully.

A great reference for making forms (not only styling them) also comes from MDN: HTML forms guide. A good place to see examples of all the HTML form elements and how to make them: The native form widgets.

  1. It's important to structure a form properly. (See How to structure an HTML form.)
  2. One form must be enclosed in one pair of <form> tags.
  3. Never nest a form inside another form.
  4. Submit: A form can have only one Submit button: <input type="submit">
    The Submit button automatically submits all the form data. How it is submitted is determined by the method in the <form> tag, or by JavaScript, or both.
  5. Reset: A form can have only one Reset button: <input type="reset">
    The Reset button automatically clears all the form data.
  6. You may put more than one form on a page. Each form must be inside its own pair of <form> tags. But think carefully: Can everything work inside one form instead?
  7. Form elements such as <input> CAN be used without <form> tags, BUT in such cases, you will need to write JavaScript or jQuery to handle those elements. Otherwise, they won't do anything.
  8. Fieldsets: For any set of radio buttons, all buttons in that set should be enclosed in a pair of <fieldset> tags. Each set of radio buttons needs its own pair of <fieldset> tags. (See How to structure an HTML form.) This is demonstrated in the radio buttons example here. Most sets of checkboxes should be treated the same.
  9. Legends: Use <fieldset> and <legend> when a set of radio buttons or checkboxes requires a legend (a description or question) above the set. When you have a single checkbox (such as "I have read the terms and conditions") or a pair of radio buttons (such as yes/no), do not use <fieldset> or <legend>. (See Creating Accessible Forms.)
  10. Labels: Correct use of the <label> tag makes a form more accessible for people with disabilities. Match the for="" and id="" values to properly associate the label with its matching form element. (See Creating Accessible Forms.) This is also demonstrated in the radio buttons example here.
  11. Name and ID: When a completed form will be sent to a database (that is, to a server), each element on the form needs both name and value in the HTML. These are not optional! The database needs to receive a name-value pair for each item so it can store the submitted data. The id does not "stand in" for name. id and name have different roles.
  12. Input: The <input> tag has many possible attributes, and each of these should be used with precision (see complete list). Among the most common are: text, password, radio, checkbox, submit, reset, and button. The hidden attribute can be especially useful for handling data.
  13. Textarea: Inexperienced HTML coders often have trouble remembering that <input type="text"> is completely different from <textarea>. Yes, both are used for entered text. But the tags are different. See the textarea example here.
  14. Validation: Form validation is VERY important in professional Web development work. If you're responsible for producing a form that will contain ANY kind of personal data, or a form that is submitting to ANY server, make sure to test, test, and test again. Security holes can crash a website or compromise passwords, financial information, etc. (See Best Practices for Hints and Validation in Web Forms.) Also see the validation example here.
  15. Saving form data: Your form must be on the Web, and when submitted, it must specify a script or program on a Web server that will handle the form data. You need a live Web site, hosted, to process form data. Or you can use Google Forms or some other third-party solution. See the form actions page here.
  16. Captcha: The idea behind these often-annoying "type this text" devices is that a bot or spammer program can't read the characters that must be typed, and so the captcha protects the site from spam comments or emails. ReCaptcha is a free captcha that is friendly to blind users. (You need your own domain name or server access to use ReCaptcha.)

Return to the index.