CLASS X FORM TAG AND ITS ELEMENTS HTML NOTES

Here’s a complete HTML example that demonstrates a form containing a textbox, radio buttons, checkboxes, a password field, a list, and a combobox (dropdown list):

Textbox (<input type="text">):
- Used for single-line text input.
- Example: A field for entering a name.
Radio Buttons (<input type="radio">):
- Allows the user to select one option from a group.
- Example: Gender selection.
Checkboxes (<input type="checkbox">):
- Allows the user to select one or more options.
- Example: Selecting hobbies.
Password Field (<input type="password">):
- Used for password input, where characters are hidden.
- Example: A field for entering a password.
List (<select size="n">):
- Displays a scrollable list of options.
- The size attribute defines how many options are visible at a time.
- Example: Selecting a favorite color.
Combobox (Dropdown List) (<select>):
- Allows the user to select one option from a dropdown list.
- Example: Selecting a country.
Submit Button (<input type="submit">):
- Sends the form data to the server when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form Example</title>
</head><body>
    <h1>Sample Form</h1>
    <form action="/submit_form" method="POST">
        <!-- Textbox -->
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your name"><br><br>
        <!-- Radio Buttons -->
        <label>Gender:</label><br>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br>
        <input type="radio" id="other" name="gender" value="other">
        <label for="other">Other</label><br><br>
        <!-- Checkbox -->
        <label>Hobbies:</label><br>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">Reading</label><br>
        <input type="checkbox" id="traveling" name="hobbies" value="traveling">
        <label for="traveling">Traveling</label><br>
        <input type="checkbox" id="cooking" name="hobbies" value="cooking">
        <label for="cooking">Cooking</label><br><br>
        <!-- Password Field -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password"><br><br>
        <!-- List -->
        <label for="colors">Favorite Color:</label>
        <select id="colors" name="colors" size="3">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select><br><br>
        <!-- Combobox (Dropdown List) -->
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="usa">United States</option>
            <option value="canada">Canada</option>
            <option value="uk">United Kingdom</option>
            <option value="india">India</option>
        </select><br><br>
        <!-- Submit Button -->
        <input type="submit" value="Submit">
    </form>
</body></html>

This form demonstrates how various input fields can be combined in an HTML form. You can test it by copying and pasting the code into an HTML file and opening it in a web browser.