In our previous article, we discussed how to create tables in HTML and how to add data to them. In this episode we will go over forms and how to collect data from users. We will learn to create text fields, radio buttons, check-boxes, buttons, drop-down menus, and much much more. There is a lot of ground to cover in this one, so let's go ahead and get started.
Back in the olden days, we used to have to walk to the DMV and wait in line for nine hours, come back the following day because the DMV is only open eight hours, wait in line another four hours, get a form and a whole bunch of underpaid government attitude, fill out the stacks of paper by hand, wait in line some more, only to find that the stupid clerk gave you the wrong paperwork. Oh and by the way, before she can give you the right form, you have to go wait at the back of the line.
Fortunately for you youngsters, you can conduct most of your business online, thanks to our friend, the form. A form consists of an area upon which you place form elements. Form elements are used to collect information from the user and consist of text fields, drop-down menus, radio buttons, checkboxes, textarea fields, submit buttons, and so forth.
To create a form you use the <form> tag. Below we will create a form with some text boxes:
<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="occupation"
The result of this code is:
You will notice in the code that we use the <input> tag for input fields and that we define the type of input field using the <type> attribute.