HTML Forms

HTML forms are the core of web interaction, used to collect user input data. From simple search boxes to complex registration pages, forms are everywhere.

The `<form>` Element

The <form> element is the container for all form controls. It defines the start and end of a form.

<form action="/submit-page" method="get">
  <!-- Form controls go here -->
</form>

The <form> element has two important attributes:

action: Specifies the server-side URL where data will be sent when the user submits the form.
method: Specifies the HTTP method used to send form data. The most common values are:
- GET: Appends form data to the end of the URL (e.g., ?name=value&name2=value2). Suitable for non-sensitive data, like search queries. Has length limitations.
- POST: Sends form data in the body of the HTTP request. Suitable for sensitive information (like passwords) or large amounts of data. No length limitations.

The `<input>` Element

The <input> element is the most versatile and core form control. Its behavior is determined by the type attribute.

Common `type` Values:

text: Single-line text input field.

<label for="username">Username:</label><br>
<input type="text" id="username" name="username">

password: Password input field where entered content is hidden.

<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">

radio: Radio button. Among a group (with the same name attribute), users can only select one.

<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>

checkbox: Checkbox. Users can select zero, one, or multiple options.

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>

submit: Submit button. Clicking triggers the form submission.
```
<input type="submit" value="Submit">
```
button: A clickable button that has no default behavior. Usually used with JavaScript.
```
<input type="button" value="Click Me" onclick="alert('Hello!')">
```

The `<label>` Element

The <label> tag provides a text label for form controls. It has two important benefits:

Improves accessibility: Screen readers will read the label, helping users understand the input field's purpose.
Improves user experience: When users click on <label> text, the browser automatically focuses on the associated form control. For checkboxes and radio buttons, clicking the label is equivalent to clicking the button itself.

By setting the <label>'s for attribute to the id of the corresponding control, you can associate them.

Other Common Form Elements

<textarea>: Defines a multi-line text input area, suitable for comments, messages, and other long text.
```
<textarea name="message" rows="10" cols="30">
Write your message here...
</textarea>
```
<button>: Similar to <input type="submit">, but the <button> element can contain richer content, like text and icons.
```
<button type="submit">
  <img src="icon.png" alt=""> Submit
</button>
```

<select> and <option>: Creates a dropdown selection list.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
</select>

#HTML Forms

#The <form> Element

#The <input> Element

#Common type Values: