HTML Forms:

HTML forms are crucial for user interaction on the web. They enable users to submit data to a server for processing. Let's explore the various components and attributes associated with HTML forms.

  1. Basic Form Structure:
    • The <form> element is used to define an HTML form. It encloses all the form elements.
     <form action="/submit" method="post">
 <!-- Form elements go here -->
 </form>
    1. action: Specifies the URL where the form data will be sent.
    2. method: Defines the HTTP method for sending form data, typically "get" or "post."

  2. Text Input:
    • The <input> element with the type="text" attribute creates a single-line text input field. 
        <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    Output:-

    1. id: Unique identifier for the input.
    2. name: Name of the input, used when submitting the form.

  3. Password Input:
    • The <input> element with type="password" creates a password input field.
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    Output:-

  4. Email Input :
    • The email input enforces the entry of a valid email address.
    Example:- 
    <tlabel for="email">Email:</label>
    <input type="email" id="email" name="email">
    Output


  5. Radio Buttons:
    • Radio buttons are created using the <input> element with type="radio". They are often used in groups where users can select only one option.
    Example:- 
    <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>

    Output:-

    • name: Should be the same for radio buttons in the same group.

  6. Checkboxes:

    • Checkboxes are created using the <input> element with type="checkbox". Users can select multiple options.
    Example:- 
    <input type="checkbox" id="subscribe" name="subscribe" value="yes">
    <label for="subscribe">Subscribe to newsletter</label>
    Output:-

  7. Dropdown Lists:
    • The <select> element is used to create a dropdown list, and <option> elements define the options within the list.
    Example:- 
     <label for="course">Course:</label>
    <select id="course" name="course">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="js">JavaScript</option>
    </select>
    Output:-

  8. Textarea:
    • The <textarea> element creates a multiline text input field.
    Example:- 
     <label for="message">Message:</label>
 <textarea id="message" name="message" rows="3" cols="40"> </textarea>

    Output:-
    • rows and cols: Define the number of rows and columns for the textarea.

  9. Submit Button:
    • The <input> element with type="submit" creates a button that submits the form.
    Example:- 
    <input type="submit" value="Submit">
    Output:-

  10. Reset Button:
    • The <input> element with type="reset" creates a button that resets the form fields to their default values.
    Example:- 
    <input type="reset" value="Reset">
    Output:-

  11. Form Attributes:
    12. Additional attributes for the <form> element:
    • action: Specifies the URL where the form data will be sent.
    • method: Defines the HTTP method for sending form data, typically "get" or "post."
    • target: Specifies where to open the response from the server (e.g., in a new window).



    Example
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Form Example</title>
</head>
<body>
    <h1>Contact Us</h1>

    <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

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

     <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50" required></textarea>

      <input type="submit" value="Submit">
    <input type="reset" value="Reset">
    </form>
</body>
</html>
    Output
    Contact Us