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:

• We will not have the opportunity to cover the processing of form data, i.e. what happens after the user clicks the “Submit” button. HTML allows for the creation of the form, but allows for limited from validation, and that only in HTML5: that is, HTML creates the textboxes, etc, in our form, but does not check what the user types inside them. Even if you use HTML, you must also use at least one other web development language to double-check the validation, together with all the other tasks: inserting the validated user data into a database with MySQL, or checking it as a username/password combination, or sending the submitted information in an eMail. Typically these languages include JavaScript, PHP, Perl, ASP.Net, or some alternative. Processing of form data is covered in later articles.

• The form we create will work just fine (up until the moment the user presses submit), but will look terrible. We use CSS to control the appearance of forms, which is again covered in a later article.

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).