3.2.1 Forms in HTML

Definition

An HTML form is a section of a web page that contains interactive controls (such as text boxes, radio buttons, checkboxes, and buttons) that allow users to enter and submit data.

Main Idea

HTML controls how web pages appear and navigate based on user input. HTML may display forms containing text boxes and buttons that users can write or click on, like paperwork being filled out. HTML creates spaces where text may be written, items can be selected from lists, and check boxes, etc.

Core Concept

To take input on an online form, one very useful element for establishing several types of input fields is the `<input>` element. It makes it easier to take user input in multiple ways in forms such as buttons, checkboxes, text fields, etc.

Detailed Explanation

Types of Input Elements

List Field: A particular kind of `<input>` element called a 'list field' allows users to choose one or more items from a list of already available options. These are frequently utilized for checkbox groups or drop-down menus.

Radio Button: One more type of `<input>` button is a radio button. It lets the user choose just one possibility from a list of options, which is preferred for choices that are mutually exclusive, like gender.

Checkboxes: Checkboxes are useful for lists of preferences since they allow users to pick multiple choices from a group.

Button: A button is also used to take input and is frequently used for completing forms, navigating to different sites, or executing various functions. The "submit" button is a typical example for transferring information from a form to a server.

Labels: HTML also provides labels which provide information for the user. The `<label>` element is also used to provide a clear title for each input field.

Form Tag: The form that is used to gather user input is defined within the `<form>` tag pair.

Examples

Text Input: For example, in the following lines of code, on the second line, a label provides information that the student's name needs to be entered in the input field which is created with ID 'studentName'. The input field is created in line 3 so that users may enter the student's name.

```html <form> <label for="studentName">Student Name:</label> <input type="text" id="studentName" name="studentName"><br><br> </form> ```

Drop-down List: With the `<select>` tag, a drop-down list can be created for selecting a grade in which the student is. Possible choices of values need to be provided in the next lines so that a drop-down list is created for the user to choose from the provided choices only. For instance, to provide choices of 3 classes from 8 to 10, the code should be:

```html <label for="grade">Grade:</label> <select id="grade" name="grade"> <option value="1">8</option> <option value="2">9</option> <option value="3">10</option> </select><br><br> ```

Radio Buttons: Mutually exclusive scenarios, where only one among many choices can be true at a time, are catered with radio buttons. To create radio buttons, the input type needs to be set as 'radio' followed by the name for which the radio buttons are set up and the respective value, for all the choices.

```html <label for="gender">Gender:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br><br> ```

Checkboxes: On the other hand, for selecting multiple choices, checkboxes are used. To create checkboxes, we just need to specify the input type as 'checkbox' followed by ID. Additionally, assign the label-name with which the checkbox relates and the value. Thereafter, a corresponding text (label) for the user needs to be placed as well. For example, a student can participate in multiple sports, so the input can be taken using checkboxes as:

```html <label for="sports">Sports Participated:</label><br> <input type="checkbox" id="cricket" name="sports" value="cricket"> <label for="cricket">Cricket</label><br> <input type="checkbox" id="badminton" name="sports" value="badminton"> <label for="badminton">Badminton</label><br> <input type="checkbox" id="hockey" name="sports" value="hockey"> <label for="hockey">Hockey</label><br> <input type="checkbox" id="basketball" name="sports" value="basketball"> <label for="basketball">Basketball</label><br> ```

Reset Button: Lastly, there is a reset button using `<input type="reset" value="Reset">` that allows users to click it to clear every field in the form.

The 'for' Attribute

The 'for' attribute, when used alongside the `<label>` element, indicates the form element with which a label is tied. Such input and label need to be placed for every input choice, like checkboxes.

Complete Example: Doctor's Visit Form

Let us design a form for visiting the doctor, for the sake of an appointment for a check-up.

```html <!DOCTYPE html> <html lang="en"> <head> <title>Doctor's Visit Form</title> </head> <body> <h1>Doctor's Visit Form</h1> <form action="submit_form.html" method="post"> <p>Patient Information:</p> <label for="name">Name:</label> <input type="text" name="name" id="name" required><br>

<input type="radio" id="male" name="Gender" value="Male"> <label for="male">Male</label> <input type="radio" id="female" name="Gender" value="Female"> <label for="female">Female</label><br><br>

<input type="checkbox" id="visit1" name="visit1" value="First"> <label for="visit1"> First Visit </label> <input type="checkbox" id="visit2" name="visit2" value="Second"> <label for="visit2"> Follow up Visit </label> <input type="checkbox" id="visit3" name="visit3" value="Regular"> <label for="visit3"> Regular Check-up Visit</label><br><br>

<label for="email">Email Address:</label> <input type="email" name="email" id="email" required><br>

<label for="phone">Phone Number:</label> <input type="tel" name="phone" id="phone" required><br>

<p>Appointment Details:</p> <label for="date">Date of Appointment:</label> <input type="date" name="date" id="date" required><br>

<label for="time">Time of Appointment:</label> <input type="time" name="time" id="time" required><br>

<p>Reason for Visit:</p> <textarea name="reason" id="reason" rows="5" cols="30" placeholder="Describe your reason for visit here..."></textarea><br>

<input type="submit" value="Submit"> </form> </body> </html> ```

Explanation:

• The `form` tag creates a form on line 8.
• The `action` tells the form where the input data will be submitted, like 'submit_form.html'.
• The `method` states the way of submission of data, like 'post'.
• Different sorts of data are collected with various `input type`:
• `text` for names.
• `email` for email addresses.
• `tel` is used for phone numbers.
• `date` takes in the selected date.
• `time` for input time.
• `textarea` element creates a large box to write details for the visit.
• Finally, there is a button for submitting the form.

Intermediate Level

At the intermediate level, you should understand the attributes and their purposes.

• `action`: Where the form data is sent.
• `method`: How the data is sent (GET or POST).
• `type`: The kind of input (text, email, tel, date, time, radio, checkbox, submit, reset).
• `id`: Unique identifier for the element.
• `name`: Name of the input field (used when submitting data).
• `value`: The value associated with the input.
• `required`: Makes the field mandatory.

Important Points

• - HTML forms collect user input.
• - Main elements: `<form>`, `<input>`, `<label>`, `<select>`, `<option>`, `<textarea>`, `<button>`.
• - Input types: text, email, tel, date, time, radio, checkbox, submit, reset.
• - Radio buttons = one choice only.
• - Checkboxes = multiple choices.
• - Drop-down list = `<select>` with `<option>`.
• - `<label>` provides a caption for input fields.
• - `for` attribute links a label to an input.
• - `action` and `method` control where and how data is submitted.
• - `required` makes a field mandatory.

Remember

• - Form = collects user input.
• - 0 = input field.
• - 0 = caption.
• - Radio = one choice.
• - Checkbox = multiple choices.
• - 0 = drop-down.
• - `<textarea>` = multi-line text.
• - Submit = send data.
• - Reset = clear form.

Common Mistakes

• - Forgetting to close the `<form>` tag.
• - Using `name` attribute incorrectly (it is needed for form submission).
• - Confusing radio buttons with checkboxes.
• - Forgetting `for` attribute in `<label>` (it links the label to the input).
• - Using the wrong `type` for input (e.g., using `text` instead of `email`).
• - Forgetting `required` for mandatory fields.
• - Not using `<label>` for accessibility.

Quick Revision

• HTML forms collect user input.
• Elements: `<form>`, `<input>`, `<label>`, `<select>`, `<option>`, `<textarea>`, `<button>`.
• Input types: text, email, tel, date, time, radio, checkbox, submit, reset.
• Radio buttons: one choice; checkboxes: multiple choices.
• `<label>` with `for` attribute links to input.
• `action` and `method` control submission.
• `required` makes field mandatory.

60-Second Revision

• Form = collect input.
• 0 = field; 1 = caption.
• Radio = one; Checkbox = many.
• 0 = dropdown.
• 0 = multi-line.
• Submit = send; Reset = clear.
• `for` links label to input.
• Warning: Radio buttons allow one choice; checkboxes allow multiple choices. Don't confuse them.