Forms are ubiquitous on the web. Any time you provide a username and password to log into a site, add a comment to a blog, or order anything online, you are filling out a form.
This section covers the HTML needed to create a form, as well as touching on the principles of good form design. However, there are two important areas that we will need to leave unaddressed at this time:
Those with more confidence and/or knowledge in HTML are usually tempted to add more markup to their forms to make them “look better”. I know it is frustrating to see a form that doesn’t look the way you want it to, but don’t add markup other than what you see here. You’ll only be adding redundant or irrelevant tags that will get in the way when we add CSS to forms.
Also note that as we add markup to our page and test our form (by entering data into textboxes, making selections from drop-down menus, etc) the browser will remember what we have entered into the form, even after refreshing the page. (This is a feature added to prevent those who do accidentally refresh the page from losing their information). In order to see a truly renewed form, you will have to hard refresh the page. The keyboard shortcut to do this will change from one browser to the next. (
CMD-SHIFT-R for Firefox on the Mac, as one example).