Dealing with Forms


  1. Purpose
  2. Forms
  3. Input
  4. Text Fields
  5. Radio Buttons
  6. Check Boxes
  7. Action Attribute and Submit Button

Purpose

An HTML form is a section of a document containing normal content, markup, special elements
called controls (check boxes, radio buttons, menus, etc.), and labels on those controls.

Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.),
before submitting the form to an agent for processing (e.g.,to a Web server, to a mail server, etc.)


Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information in a form.

Elements like text fields, text area fields, drop-down menus, radio buttons, check boxes, etc.

A form is defined with the <form> tag.

        <form>
.
input elements
.
</form>

Input

The most used form tag is the <input> tag.

The type of input is specified with the type attribute.

The most commonly used input types are explained below.


Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

        <form>
First name:</input type="text" name="firstname" /> <br />
Last name:</input type="text" name="lastname" />
</form>

How it looks in a browser:

First name:
Last name:

Note that the form itself is not visible.

Also note that in most browsers, the width of the text field is 20 characters by default. 


Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

        <form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

How it looks in a browser:

Male
Female

Note that only one option can be chosen.


Check Boxes

Check Boxes are used when you want the user to select one or more options of a limited number of choices.

        <form>
        I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

How it looks in a browser:

I have a bike:
I have a car:
I have an airplane:

Action Attribute and Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to the server.

The form's action attribute defines the name of the file to send the content to.

The file defined in the action attribute usually does something with the received input.

        <form name="input"
action="http://www.public.marcric.com/html_form_receiver.php" method="post">
Name: <input name="name" size="20" type="text" /> <br><br>
Age: <input name="age" size="3" type="text" />
<input value="Send" type="submit" />
</form>

How it looks in a browser:

Name:

Age:

If you type some characters in the text field above, and click the "Send" button, the browser
will send your input to a page called "html_form_receiver.php".

The page will show you the received input formated.

If you want to see the "html_form_receiver.php" content, click here.