HTML Forms ( Part 1 )

What's one of the most easiest and convenient ways of getting information from a visitor on your website ?

The answer, forms. A form can include a set of text fields, checkboxes, radio buttons etc. A visitor supplies data to these forms which are then sent to the server. You're probably reading this and wondering, "Huh ? ....". Proceed with the tutorial lesson, and you will have a grasp of forms at the end of it.

The Form Tag

The form tag, ( <form> ) is important when creating forms. This must be included in all forms you create. The tag surrounds all the form elements such as those we use for the textbox and buttons as you will see below. As with all other tags, the form tag must be closed after you are finished with it ( </form> ).

The Input Element

The most widely used element you will come across is the input element. It is used along with the type attribute to create a textbox, a checkbox, radio buttons etc. as shown below.

The Type Attribute

The type attribute determines the type of input element produced. There are various values that can be used. The table below give quick definitions of some common values associated with the type attribute.

Some Common Values for the Type Attribute

Value	Purpose
text	Used to define a textbox. This is a small text space.
checkbox	Defines a checkbox. User can select multiple options.
radio	Defines a radio button. User can select only one option.
password	Characters entered are hidden when this value is used.
submit	Produces a button which when clicked is supposed to send the information.
reset	Defines a reset button. All values are set to their initial state.

For the rest of this lesson you will be shown code snippets applying some of the above. At the very end you will have produced your very first form !

Textbox

A textbox is generally used when the input from the user is not intended to be significant. It is used generally to take small bits of information.

Let's say the first thing you wanted on your form was a field for the user to supply their first, middle and last name. We could use a textbox for each of these fields. Like this:

<form>

First Name:<input type="text" name="fname" maxlength="50"/>

Middle Name:<input type="text" name="midname" maxlength="50"/>

Last Name:<input type="text" name="lname" maxlength="50"/>

 </form>

right arrow Click to see result

In the example above there is a textbox for three different names. It's typical to give each textbox a unique name that can be used to identify it. The attribute maxlength is used to set the maximum number of characters the person using your form is allowed to enter. If you wanted some default text to be in the text box you would use the value attribute.

Checkbox

A checkbox provides a list of choices to select from. More than one option can be selected ( checked ) at the same time.

The use of checkboxes is very common. An example would be something like:

<form>

What are your interests ?

<input type="checkbox" name="interests" value="Cook" checked/> Cooking

<input type="checkbox" name="interests" value="Fish"/> Fishing

<input type="checkbox" name="interests" value="Swim"/> Swimming

<input type="checkbox" name="interests" value="Run"/> Running

<input type="checkbox" name="interests" value="Dance" checked/> Dancing

</form>

right arrow Click to see result

Note: The value attribute must be included when creating a checkbox.

In the above example there are 5 options. Each option is a separate checkbox. The name attribute has to be the same all around. It groups all checkboxes together.

The value attribute closely relates to the choice. By including the checked keyword, choices are selected as defaults.

You should by now have an understanding of forms. It's one of the easiest topics and one that is quite fun !. The forms lesson continues in Part 2.

Previous Lesson - Tables (Part 2) Next Lesson - Forms (Part 2)