Forms (Creation)

This next section is about forms. A form is an interactive document in HTML. There are many different types of forms; such as a client information/registration form, questionaire forms, even your favorite search engine (i.e. Yahoo, Alta Vista, Infoseek, etc.) is a type of a form. Although there are so many types of forms, we will look at general forms. Forms start with the <FORM></FORM> tag set. You can name your form with the NAME="..." attribute inside the <FORM> tag. Once the form has been initialized, you need to create a way for the user to interact with the form. To do that, you need to add the <INPUT> tag. You can name these tags the same way you do the <FORM> tag. <INPUT> can be in a number of types. After typing <INPUT>, you need to type TYPE= to specify what type of input you are going to be using. For instance, if you want to add radio buttons for multiple choice, you'd type TYPE=RADIO as many times as you have choices. So you know what choice the user made, you can add VALUE=your value name which will be sent to your form processor. You can even set a default button to be selected by typing TYPE=RADIO CHECKED. Once you're done, your tags may look like this: <INPUT NAME="input name" VALUE=your value name TYPE=RADIO CHECKED>. The image above shows how the text box you see is created when you click the link below.

Click to see Demo 11

The form was made within a table. In the first cell of each row, we typed the title of the input box. Then we added the input box in the second cell. You can make the length of each box longer or shorter by typing SIZE=number within the <INPUT> tag. Say you wanted to have only five numbers in your zip code input box and no more, you can ensure this by typing MAXLENGTH=number. You can also set an initial value for your input box to read. If you want "First name only" to be the default text, add VALUE="First name only" to your code. Now, your input tags may look like this: <INPUT NAME="input name" SIZE=number VALUE="First name only" MAXLENGTH=number>

In some cases, you may want to protect the users information that is being entered. For these reasons, you want to add a password input. A password input is the same as an input box, only the characters displayed are bullets or asteisks. To create this, you type <INPUT TYPE=PASSWORD>.

When radio buttons become too consuming for your site, you can create a list that takes up less space by adding a drop-down box called a selection list. To do this, you create it like you would an ordered or unordered list. You start with a block that looks like this:

<SELECT NAME=name of your list>
</SELECT>

Now, instead of everyone seeing every option you have, like the fifty United States, you can have them click on the drop-down box and make their choice. To add these options, you add them the same way you would a list box. Here's how:

<SELECT NAME=name of your list>
  <OPTION>First option
  <OPTION>Second option
  <OPTION>Third option
  <OPTION>Fourth option
  <OPTION>Fifth option
</SELECT>

If you want the user to be guided to the most popular choice first, you can use the SELECTED addition to the <OPTION> tag. To do that, make your tag look like this:

<OPTION SELECTED>selected option

You can add a similar effect to your radio buttons by typing CHECKED. One place you don't want to add one of these options, although if you did, you'd add it the same as with your radio buttons, is the check box. Check boxes are a way of letting the user select all that apply instead of one item. To create this, you'd type:

<INPUT TYPE=CHECKBOX NAME=input name>choice for user to select

Some forms are more useful if you have a way of adding additional comments to the information the user is submitting. To do this, you'd type:

<TEXTAREA ROWS=number of rows COLS=number of columns NAME=name of your text box WRAP=off, soft, or hard>
This is where you type any default text.
</TEXTAREA>

In the above example, you can set your number of rows, your number of columns, the name of your text field, and how you want word wrap to work; off, meaning you have one continuous line, soft, meaning the text wraps in the box but not in the form processor, or hard, meaning the text wraps in both the box and the processor.

Question: Seems like I'm starting a order form for some company. But, how do they submit the information and what is a processor?

Answer: After this next lesson, you should be able to create a form for businesses or your own business. Next, we'll learn about advanced form properties.