Chapter 4: Forms

Class: X | Subject: Information and Computer Technology

---

Key Concepts

What is a Form?

• A form is an HTML object used for collecting data from the user., Form fields include: text field, text area, drop-down box, radio buttons, checkbox, and command buttons., HTML forms pass data to a server for processing., The <form> element acts as a container for all input elements., The action attribute specifies the processing agent (usually a server-side script).

Form Syntax

<form method="get|post" action="URL">
  <input>
  <input>
</form>

• The <form> tag has both a start and an end tag., The <input> tag does not have an end tag., There can be as many <input> tags as needed.

Method Attribute

GET Method:

• Appends form-data to the URL as name/value pairs., URL length is limited (~3000 characters)., Data is visible in the URL, never use for sensitive data., Useful when user wants to bookmark the result., Default method if not specified., Format: URL?name=value&name=value

POST Method:

• Appends form-data inside the body of the HTTP request., Data is not shown in the URL., No size limitations., Form submissions with POST cannot be bookmarked.

Input Tag

The <input> tag collects information from the user.

Common Attributes of <input>:

Attribute	Description
name	Internal name for the field (used as reference by programs)
size	Width of the field (number of visible characters)
maxlength	Maximum number of characters that can be entered
type	Type of input: text, radio, checkbox, submit, reset
value	Default value or the value submitted when selected
align	Alignment on the form (TOP, MIDDLE, BOTTOM, RIGHT, LEFT, etc.)
tabindex	Order of field activation when Tab key is pressed
checked	Pre-selects a radio button or checkbox

Form Controls

1. TextBox Field (type="text"), Displays a single-line text input., Accepts size, maxlength, name, value, align, tabindex attributes.

2. Text Area (<textarea>), Displays a multi-line text input., Has both start and end tags: <textarea>...</textarea>., Used for email bodies, comments, etc.

Textarea Attributes:

Attribute	Description
cols	Width of the textarea (number of characters)
rows	Number of visible text lines
name	Internal name for the field
tabindex	Tab order number
wrap	Text wrapping: off (no wrapping), virtual (wraps on display), physical (wraps as entered)

3. Radio Buttons (type="radio"), Allows selection of one option out of many., All radio buttons in a group must have the same name attribute., The value attribute defines what is submitted when selected.

4. Checkboxes (type="checkbox"), Allows multiple selections of items., A collection of checkboxes can share the same name (forming a group)., Each checkbox has a different value.

5. Command Buttons (type="submit" or type="reset")

• Submit button: Submits the form data to the URL specified in the action attribute. A form can have more than one submit button.
• Reset button: Resets all form controls to their initial/default values.

6. Drop-Down Box (<select> and <option>), Contains a list for the user to select from.

• <SELECT> must contain at least one <OPTION>., Both have start and end tags.

Select Attributes:

Attribute	Description
name	Internal name for the dropdown
size	Number of visible items in the list
multiple	Allows multiple selections

Option Attributes:

Attribute	Description
value	Internal value submitted when selected
selected	Pre-selects this option by default

---

Important Definitions

Term	Definition
Form	An HTML object used for collecting data from the user
GET method	Sends form data appended to the URL as name/value pairs; visible in the URL
POST method	Sends form data inside the HTTP request body; not visible in the URL
TextBox	Single-line text input field
TextArea	Multi-line text input field
Radio Button	Toggle button allowing selection of one option from many
Checkbox	Input allowing multiple selections from a group
Submit Button	Sends form data to the server
Reset Button	Resets all controls to initial values
Drop-Down Box	A list control for selecting one or more items

---

Code/Syntax Examples

Basic Form with TextBoxes

<form>
  Father's Name:
  <input type="text" size="20" name="FName">
  <br>
  Mother's Name:
  <input type="text" size="20" name="MName">
</form>

TextArea with Submit Button

<form method="post" action="mailto:youremail@gmail.com">
  <textarea rows="5" cols="30" wrap="physical" name="comments">
    Enter Comments Here
  </textarea>
  <input type="submit" value="Email Yourself">
</form>

Radio Buttons

<form>
  What type of lighting you have in your room?<br>
  Lighting type:
  <input type="radio" name="Ltype" value="tube">TubeLight
  <input type="radio" name="Ltype" value="bulb">Bulb<br>
  Lighting Size:
  <input type="radio" name="LSize" value="Long">Long
  <input type="radio" name="LSize" value="medium">Medium
  <input type="radio" name="LSize" value="short">Short
</form>

• All "Lighting type" options share name="Ltype" so only one can be selected., All "Lighting Size" options share name="LSize" so only one can be selected.

Checkboxes

<form>
  I love to eat Chocolate:
  <input type="checkbox" name="sweet" value="Chocolate"><br>
  I love to eat Ladoo:
  <input type="checkbox" name="sweet" value="Ladoo"><br>
  I love to eat Cake:
  <input type="checkbox" name="sweet" value="Cake">
</form>

• Multiple checkboxes can be selected simultaneously.

Submit and Reset Buttons

<form method="post" action="mailto:youremail@email.com">
  <input type="submit" value="Email Yourself">
  <input type="reset">
</form>

Drop-Down Box

<form method="post" action="mailto:youremail@email.com">
  Taste of food
  <select multiple name="taste" size="4">
    <option value="indian" selected>Indian</option>
    <option value="chinese">Chinese</option>
    <option value="mexican">Mexican</option>
    <option value="italian">Italian</option>
    <option value="continental">Continental</option>
    <option value="karim">Karim's Special</option>
    <option value="japanese">Japanese Sweets</option>
  </select>
  <input type="submit" value="Email Yourself">
</form>

• size="4" shows 4 items at a time.
• multiple allows selecting more than one item.
• selected pre-selects "Indian" by default.

---

Key Points

1. A form collects data using various input controls and sends it to a server via the action attribute.
2. GET appends data to the URL (visible, limited size); POST sends data in the HTTP body (hidden, no size limit).
3. GET is the default method. Never use GET for sensitive data.
4. TextBox accepts single-line input; TextArea accepts multi-line input.
5. Radio buttons allow only one selection from a group (all share the same name).
6. Checkboxes allow multiple selections (all share the same name).
7. Submit button sends form data; Reset button clears all fields to defaults.
8. A <SELECT> element must contain at least one <OPTION>.
9. The selected attribute in <OPTION> pre-selects an item.
10. The <input> tag does not have an end tag.

---

Practice Questions

Multiple Choice (selected):

1. A container for all input elements?, (c) Form
2. Method to send form data as URL variables?, (a) get
3. Method to send form data as HTTP post?, (c) post
4. Purpose of a web form?, (c) A way to input data into a website or application
5. Element for groups of options in a select menu?, (d) <optgroup>
6. Which option is selected with <option selected value="Fiat">Fiat</option>?, (a) Fiat

Short Answer:

1. Why are forms used in web pages?
2. Explain all attributes of the Form tag.
3. Differentiate between GET and POST methods.
4. How are text field and text area controls different?
5. Explain radio buttons with a suitable example.
6. Mention all attributes of checkbox. How is it different from radio button?
7. State the purpose of Submit and Reset buttons.
8. Which attributes are necessary for a drop-down list?
9. When is textarea better than text input?

Lab Tasks:

1. Create a form with Name, Gender (radio), Age (radio), Hobbies (checkboxes), and Submit button.
2. Create a form with Emergency Contact Info, Medical Information, and multiple input types.