Forms

Correct Answer: (c) Form

A Form (`<form>`) is an HTML element that acts as a container for all input elements such as text fields, checkboxes, radio buttons, submit buttons, etc. It collects data from the user and sends it to a server for processing.

Correct Answer: (a) get

The GET method appends form data to the URL as key-value pairs (URL variables), e.g., `http://example.com/page?name=John&age=20`. It is used when the data is not sensitive and the amount of data is small.

Correct Answer: (c) post

The POST method sends form data as an HTTP request body (HTTP post transaction). The data is not visible in the URL, making it more secure and suitable for sending large or sensitive data.

Correct Answer: (c) A way to input data into a website or an application

A web form provides an interface through which users can enter and submit data (such as login credentials, registration details, search queries, etc.) to a website or web application for processing.

Correct Answer: (d) `<optgroup>`

The `<optgroup>` tag is used to group related options within a `<select>` drop-down list. It helps organise long lists of options into labelled categories, improving readability. Example:
\text{&lt;optgroup label="Swedish Cars"&gt;}
\text{&lt;option value="volvo"&gt;Volvo&lt;/option&gt;}
\text{&lt;/optgroup&gt;}

Correct Answer: (a) Fiat

The `selected` attribute is placed inside the first `<option>` tag (`<option selected="" value="Fiat">Fiat</option>`). The `selected` attribute pre-selects an option when the page loads. Therefore, Fiat will be the selected option by default. In the other options, `selected` appears only as a value string, not as an HTML attribute.

Answer:

Forms are used in web pages for the following reasons:

1. Data Collection: Forms allow websites to collect information from users, such as name, email address, password, feedback, etc.
2. User Interaction: They provide an interactive interface between the user and the web application.
3. Data Submission: The collected data can be sent to a web server for processing (e.g., login authentication, registration, online shopping).
4. Search Functionality: Search bars on websites are implemented using forms.
5. Surveys and Feedback: Online surveys, polls, and feedback forms are created using HTML forms.

In short, a form acts as a bridge between the user and the server, enabling two-way communication on the web.

Answer:

The `<form>` tag supports the following important attributes:

| Attribute | Description |
|-----------|-------------|
| `action` | Specifies the URL of the server-side script/page that will process the form data after submission. Example: `action="submit.php"` |
| `method` | Specifies how form data is sent to the server. Two values: `get` (data appended to URL) and `post` (data sent in HTTP body). |
| `name` | Assigns a name to the form, used to reference the form in scripts. |
| `target` | Specifies where to display the response after form submission. Values: `_blank` (new window), `_self` (same window), `_parent`, `_top`. |
| `enctype` | Specifies how form data should be encoded before sending. Used with `method="post"`. Common value: `multipart/form-data` (for file uploads). |
| `autocomplete` | Specifies whether the browser should autocomplete form fields. Values: `on` or `off`. |
| `novalidate` | When present, specifies that the form data should not be validated on submission. |

Example:
```html
<form action="process.php" method="post" name="myForm" target="_self">
<!-- form elements here -->
</form>
```

Answer:

The following table differentiates between the GET and POST methods:

| Basis | GET Method | POST Method |
|-------|-----------|-------------|
| Data Transmission | Data is appended to the URL as query string (URL variables). | Data is sent in the HTTP request body, not visible in URL. |
| Security | Less secure — data is visible in the browser address bar and server logs. | More secure — data is not visible in the URL. |
| Data Length | Limited data can be sent (URL length restriction, ~2048 characters). | No restriction on the amount of data that can be sent. |
| Caching | Requests can be cached and bookmarked. | Requests are not cached and cannot be bookmarked. |
| Use Case | Used for non-sensitive data like search queries. | Used for sensitive data like passwords, file uploads, form submissions. |
| Syntax | `<form method="get">` | `<form method="post">` |
| Example URL | `page.php?name=John&age=20` | Data is hidden in the request body. |

Answer:

The differences between Text Field and Text Area are as follows:

| Basis | Text Field | Text Area |
|-------|-----------|----------|
| Tag Used | `<input type="text"/>` | `<textarea></textarea>` |
| Lines of Input | Accepts input in a single line only. | Accepts input in multiple lines. |
| Size | Fixed single-line box. | Can be resized; rows and columns can be specified. |
| Attributes | Uses `size`, `maxlength`, `value`, `placeholder`. | Uses `rows`, `cols`, `placeholder`. |
| Use Case | Used for short inputs like name, email, phone number. | Used for longer inputs like comments, messages, descriptions. |
| Self-closing | Self-closing tag (`<input/>`) | Has both opening and closing tags (`<textarea></textarea>`). |

Example of Text Field:
```html
<input type="text" name="username" placeholder="Enter name"/>
```

Example of Text Area:
```html
<textarea name="comments" rows="5" cols="30">Enter your comments here</textarea>
```

Answer:

Radio Buttons in HTML forms are used when the user needs to select only one option from a group of predefined options. When one radio button in a group is selected, all other radio buttons in the same group are automatically deselected.

Key Points:
- Created using `<input type="radio">`.
- All radio buttons in a group must have the same `name` attribute so that only one can be selected at a time.
- The `value` attribute specifies the data sent to the server when the form is submitted.
- The `checked` attribute pre-selects a radio button.

Attributes:
- `type="radio"` — defines it as a radio button.
- `name` — groups radio buttons together.
- `value` — the value submitted to the server.
- `checked` — pre-selects the option.

Example:
```html
<form action="submit.php" method="post">
<p>Select your Gender:</p>
<input type="radio" name="gender" value="Male"> Male<br/>
<input type="radio" name="gender" value="Female"> Female<br/>
<input type="radio" name="gender" value="Other"> Other<br/>
<input type="submit" value="Submit"/>
</form>
```

In the above example, the user can select only one gender option because all three radio buttons share the same `name="gender"`.

Answer:

Attributes of Checkbox (`<input type="checkbox">`):

| Attribute | Description |
|-----------|-------------|
| `type` | Set to `"checkbox"` to create a checkbox. |
| `name` | Name of the checkbox, used to identify it when form is submitted. |
| `value` | The value sent to the server when the checkbox is checked. |
| `checked` | Pre-selects (checks) the checkbox when the page loads. |
| `disabled` | Disables the checkbox so the user cannot interact with it. |
| `id` | Assigns a unique identifier to the checkbox. |

Example:
```html
<form>
Select your hobbies:<br/>
<input type="checkbox" name="hobby" value="Reading"> Reading<br/>
<input type="checkbox" name="hobby" value="Music" checked> Music<br/>
<input type="checkbox" name="hobby" value="Sports"> Sports<br/>
</form>
```

Difference between Checkbox and Radio Button:

| Basis | Checkbox | Radio Button |
|-------|----------|--------------|
| Selection | Allows multiple selections from a group. | Allows only one selection from a group. |
| Type attribute | `type="checkbox"` | `type="radio"` |
| Deselection | Can be individually checked or unchecked. | Selecting one automatically deselects others in the group. |
| Use Case | Used when multiple options can apply (e.g., hobbies, interests). | Used when only one option is valid (e.g., gender, yes/no). |
| Shape | Appears as a square box. | Appears as a circular button. |

Answer:

Submit Button:
- Created using `<input type="submit" value="Submit"/>`.
- When the user clicks the Submit button, the form data is sent to the server at the URL specified in the `action` attribute of the `<form>` tag.
- The data is transmitted using the method specified (`get` or `post`).
- A form can contain more than one submit button.
- Purpose: To submit/send the filled form data to the server for processing.

Example:
```html
<input type="submit" value="Register Now"/>
```

Reset Button:
- Created using `<input type="reset" value="Reset"/>`.
- When the user clicks the Reset button, all form fields are cleared and reset to their initial/default values.
- It does NOT send any data to the server.
- Purpose: To clear all the data entered by the user in the form and restore the form to its original state.

Example:
```html
<input type="reset" value="Clear Form"/>
```

In summary: The Submit button sends data to the server, while the Reset button clears all input fields in the form.

Answer:

A drop-down list in HTML is created using the `<select>` and `<option>` tags. The following attributes are necessary/important:

Attributes of `<select>` tag:

| Attribute | Description |
|-----------|-------------|
| `name` | (Necessary) Identifies the drop-down list when form data is submitted to the server. |
| `size` | Specifies the number of visible options in the list. |
| `multiple` | Allows the user to select multiple options. |
| `disabled` | Disables the drop-down list. |

Attributes of `<option>` tag:

| Attribute | Description |
|-----------|-------------|
| `value` | (Necessary) Specifies the value sent to the server when that option is selected. |
| `selected` | Pre-selects an option when the page loads. |
| `disabled` | Disables a particular option. |

Example:
```html
<form action="submit.php" method="post">
<label>Choose a City:</label>
<select name="city">
<option value="delhi" selected>Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="chennai">Chennai</option>
<option value="kolkata">Kolkata</option>
</select>
<input type="submit" value="Submit"/>
</form>
```

The `name` attribute in `<select>` and the `value` attribute in `<option>` are the most necessary attributes for a functional drop-down list.

Answer:

It is better to use the `<textarea>` element instead of `<input type="text">` in the following situations:

When to use `<textarea>`:
1. Large amounts of text: When the user needs to enter a large amount of text, such as comments, feedback, descriptions, messages, or essays.
2. Multi-line input: When the input is expected to span multiple lines (e.g., postal address, product review, bio/about section).
3. Visible editing area: When you want the user to see and edit a larger block of text at once.

Why `<textarea>` is better in these cases:
- The `<input type="text">` element is a single-line input field. If the user types more text than fits in the box, it scrolls horizontally, which is inconvenient.
- The `<textarea>` element provides a multi-line input area where the user can see several lines of text at once, making it easier to read and edit.
- The `<textarea>` can be resized by the user (in most browsers) using the resize handle.
- The `rows` and `cols` attributes of `<textarea>` allow the developer to control the visible size of the input area.

Example:
```html
<!-- Single line - suitable for name -->
<input type="text" name="username" placeholder="Enter your name"/>

<!-- Multi-line - suitable for feedback -->
<textarea name="feedback" rows="6" cols="40"
placeholder="Write your feedback here...">
</textarea>
```

Conclusion: Use `<textarea>` whenever the expected input is long, multi-line, or paragraph-style text, as it provides a much better user experience than a single-line text field.

Note: The actual form image is not visible in the source. A typical student registration form is created below as a representative example. Adjust field labels as per the actual image shown in your textbook.

```html
<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form action="" method="post">

<label>First Name:</label>
<input type="text" name="firstname" placeholder="Enter First Name"/><br/><br/>

<label>Last Name:</label>
<input type="text" name="lastname" placeholder="Enter Last Name"/><br/><br/>

<label>Date of Birth:</label>
<input type="text" name="dob" placeholder="DD/MM/YYYY"/><br/><br/>

<label>Gender:</label>
<input type="radio" name="gender" value="Male"/> Male
<input type="radio" name="gender" value="Female"/> Female<br/><br/>

<label>Email:</label>
<input type="text" name="email" placeholder="Enter Email"/><br/><br/>

<label>Phone:</label>
<input type="text" name="phone" placeholder="Enter Phone Number"/><br/><br/>

<label>Address:</label><br/>
<textarea name="address" rows="4" cols="35"
placeholder="Enter your address">
</textarea><br/><br/>

<label>Course:</label>
<select name="course">
<option value="science">Science</option>
<option value="commerce">Commerce</option>
<option value="arts">Arts</option>
</select><br/><br/>

<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="Reading"/> Reading
<input type="checkbox" name="hobby" value="Music"/> Music
<input type="checkbox" name="hobby" value="Sports"/> Sports<br/><br/>

<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>

</form>
</body>
</html>
```

Save this file as: `task1.html`

Note: The actual form image is not visible in the source. A typical login/feedback form is created below as a representative example. Adjust field labels as per the actual image shown in your textbook.

```html
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h2>User Feedback Form</h2>
<form action="" method="post">

<label>Name:</label>
<input type="text" name="name" placeholder="Enter your name"/><br/><br/>

<label>Email:</label>
<input type="text" name="email" placeholder="Enter your email"/><br/><br/>

<label>Age Group:</label>
<select name="agegroup">
<option value="below18">Below 18</option>
<option value="18-25">18 - 25</option>
<option value="26-40">26 - 40</option>
<option value="above40">Above 40</option>
</select><br/><br/>

<label>How did you hear about us?</label><br/>
<input type="radio" name="source" value="Internet"/> Internet<br/>
<input type="radio" name="source" value="Friend"/> Friend<br/>
<input type="radio" name="source" value="Advertisement"/> Advertisement<br/><br/>

<label>Services Used:</label><br/>
<input type="checkbox" name="service" value="Support"/> Customer Support<br/>
<input type="checkbox" name="service" value="Delivery"/> Delivery<br/>
<input type="checkbox" name="service" value="Online"/> Online Services<br/><br/>

<label>Your Feedback:</label><br/>
<textarea name="feedback" rows="5" cols="40"
placeholder="Write your feedback here...">
</textarea><br/><br/>

<input type="submit" value="Send Feedback"/>
<input type="reset" value="Clear"/>

</form>
</body>
</html>
```

Save this file as: `task2.html`

Analysis of the Code:

Let us analyse the given code step by step:

Given Code (with analysis):

```html
<form action="http://prog/user" method="post">
<p>
<!-- Label for firstname (empty label - no visible text) -->
<label id="fname" for="firstname"></label>
<!-- Text input box 1 (empty text field) -->
<input id="fname" type="text"/>

<!-- Label for lastname (empty label - no visible text) -->
<label id="fname" for="lastname"></label>
<!-- Text input box 2 (empty text field) -->
<input id="fname" type="text"/>

<!-- Label for email (empty label - no visible text) -->
<label id="name" for="email"></label>
<!-- Text input box 3 (empty text field) -->
<input id="mail" type="text"/>

<!-- Radio button: Male -->
<input id="mail" type="radio" name="Gender" value="Male"> Male<br/>
<!-- Radio button: Female -->
<input id="email" type="radio" name="Gender" value="Female"> Female<br/>

<!-- Submit button with value "Send"
(Note: duplicate type attribute - only first type="submit" is valid) -->
<input id="email" type="submit" value="Send"/>

<!-- Text input with default value "Formal"
(Note: type="fname" is invalid, browser treats it as type="text") -->
<input type="text" id="email" value="Formal"/>
</p>
</form>
```

Expected Output Description:

When this code is run in a browser, the following will be visible on the screen:

1. Three empty text input boxes (one after another, since the `<label>` tags have no text content, no label text is visible).
2. Two radio buttons labelled Male and Female (only one can be selected at a time since both share `name="Gender"`).
3. A Submit button labelled "Send".
4. A text input box pre-filled with the value "Formal".

Important Observations / Errors in the Code:
- All `<label>` tags are empty (no text between opening and closing tags), so no label text appears on screen.
- Duplicate `id` attributes (e.g., multiple elements with `id="fname"`) — this is invalid HTML; `id` must be unique.
- `type="fname"` is not a valid input type; the browser will default it to `type="text"`.
- The element `<input id="email" type="submit" value="Send" type="reset" value="Formal"/>` has duplicate `type` and `value` attributes — only the first occurrence is used by the browser, so it renders as a Submit button with value "Send".

Corrected / Clean Version of the Code:
```html
<!DOCTYPE html>
<html>
<head><title>User Form</title></head>
<body>
<form action="http://prog/user" method="post">
<p>
<label for="firstname">First Name:</label>
<input id="firstname" type="text"/><br/><br/>

<label for="lastname">Last Name:</label>
<input id="lastname" type="text"/><br/><br/>

<label for="mail">Email:</label>
<input id="mail" type="text"/><br/><br/>

<input type="radio" name="Gender" value="Male"/> Male<br/>
<input type="radio" name="Gender" value="Female"/> Female<br/><br/>

<input type="submit" value="Send"/>
<input type="text" value="Formal"/>
</p>
</form>
</body>
</html>
```