HTML Forms

 

1. Form Element (<form>):

  • The <form> element is used to create an HTML form, which allows users to input data that can be submitted to a server for processing.
  • Syntax: <form action="URL" method="GET/POST" [other attributes]> ... </form>
    • action: Specifies the URL where the form data will be submitted.
    • method: Specifies the HTTP method to be used for sending form data (GET or POST).
    • Other attributes: Additional attributes like id, name, target, etc.

2. Form Controls:

  • Form controls are elements within the <form> that allow users to interact and input data.
  • Common form controls include:
    • Input Controls: <input>
    • Select Control: <select>
    • Textarea Control: <textarea>
    • Button Controls: <button>, <input type="submit">, <input type="reset">

3. Input Control (<input>):

  • The <input> element is used to create input fields for various types of data, such as text, numbers, email, etc.
  • Syntax: <input type="text" name="fieldName" [other attributes]>
    • type: Specifies the type of input control (e.g., text, password, email, number, etc.).
    • name: Specifies the name of the input field, which is used to identify the input data when the form is submitted.
    • Other attributes: Additional attributes like placeholder, value, required, disabled, etc.

4. Select Control (<select>):

  • The <select> element is used to create a dropdown list of options.
  • Syntax:
  • <select name="fieldName" [other attributes]> <option value="value1">Option 1</option> <option value="value2">Option 2</option> ... </select>
      • name: Specifies the name of the select control.
      • <option>: Defines an option within the dropdown list, with the value attribute specifying the value to be submitted when selected.

    5. Textarea Control (<textarea>):

    • The <textarea> element is used to create a multiline text input field.
    • Syntax: <textarea name="fieldName" [other attributes]>Initial text...</textarea>
      • name: Specifies the name of the textarea control.
      • rows and cols: Optionally specify the number of rows and columns for the textarea.

    6. Button Controls:

    • <button>: Creates a clickable button within the form.
    • <input type="submit">: Creates a submit button that, when clicked, submits the form data to the server.
    • <input type="reset">: Creates a reset button that, when clicked, resets all form controls to their default values.

    7. Form Submission:

    • When a form is submitted (either by clicking a submit button or programmatically), the data entered into the form controls is sent to the server specified in the form's action attribute.
    • The method used to submit the form data (GET or POST) is specified by the form's method attribute.

    8. Form Validation:

    • HTML5 introduces built-in form validation features, such as the required attribute, which specifies that an input field must be filled out before submitting the form.
    • Additionally, you can use JavaScript for more complex form validation logic.

    HTML forms are fundamental for collecting user input on web pages. By understanding the various form elements and their attributes, you can create interactive and user-friendly web forms.

    Here's an example of a simple HTML form with various form controls:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample Form</title> </head> <body> <h2>Sample Form</h2> <form action="/submit-form" method="POST"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <label for="gender">Gender:</label> <select id="gender" name="gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> </select><br><br> <label for="bio">Bio:</label><br> <textarea id="bio" name="bio" rows="4" cols="50" placeholder="Write something about yourself..."></textarea><br><br> <input type="checkbox" id="agree" name="agree" required> <label for="agree">I agree to the terms and conditions</label><br><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> </body> </html>

    Explanation:

    • This form includes various input fields such as text input, email input, password input, select dropdown, textarea, and checkbox.
    • The form is set to submit data to /submit-form URL using the POST method.
    • Each input field has a corresponding <label> element to provide context for the user.
    • The required attribute is used for fields that must be filled out before submitting the form.
    • The form also includes submit and reset buttons for form submission and resetting, respectively.

    You can save this code in an HTML file and open it in a web browser to see how the form looks and behaves.

Post a Comment

0 Comments