Forms in HTML

What’s a Form?

Forms enable you to get information from someone on a website easily.

A form can include a set of text fields, check boxes, radio buttons etc. A visitor supplies data to these forms which when submitted are sent to a server.

The Form Tag

The form tag ( <form> ) is used to create a form. Contained between form tags are form elements (discussed 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 when creating a form is the input element. It is used along with the type attribute to create text boxes, check boxes, radio buttons submit buttons among others.

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.
Some common values for the type attribute

A text box is generally used when the input from the user is not intended to be significant. Use text boxes when requesting things such as a user’s name or even email.

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

First Name:

Middle Name:

Last Name:

In the example above there is a text box for three different names. It’s typical to give each text box 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.

Checkbox

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

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

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.

Here’s the result:

What are your interests ?
Cooking
Fishing
Swimming
Running
Dancing

Radio buttons also provide the user with options to select from. The major difference between responses for radio buttons and responses for check boxes is that radio buttons limit the input of the user to only one option.

<form>
How many vehicles do you presently own ?
<input type="radio" name="vehicle" value="1"> 1 </input>
<input type="radio" name="vehicle" value="2"> 2 </input>
<input type="radio" name="vehicle" value="3"> 3 </input>
<input type="radio" name="vehicle" value="4"> 4 </input>
</form>

How many vehicles do you presently own ?
1
2
3
4

The Submit Button

When a user is ready to submit their response in a form they use the submit button. <input type=”submit”>  is used to define the actual button.

The action attribute is usually used to specify an external page (which usually has a script) that processes the data inputted from the form.

<form action="processing.php">
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"/>
<input type="submit" value="Submit">
</form>
First Name:

Middle Name:

Last Name:

Note: At the moment the form isn’t connected to any external page called processing.php (since this is just a basic example). However you can easily find a contact form processing script by searching online.