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.
<form>
tags.<input type="submit">
<form>
tag, or by JavaScript, or both.<input type="reset">
<form>
tags. But think carefully: Can everything work inside one form instead?<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.<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.<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.)<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.<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.<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.Return to the index.