<form>
The form tag

The HTML <form> tag is used to create an interactive form that allows users to enter and submit data. Forms are essential for user interactions such as logging in, signing up, searching, and submitting feedback.

The <form> element acts as a container for various input elements like text fields, radio buttons, checkboxes, and submit buttons.

Basic Syntax

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

     <input type="submit" value="Submit">
</form>

Common Attributes of <form>

action - Specifies the URL where form data is sent after submission. <form action="/submit-form">

method - Defines how the form data is sent.

  • "GET" (default) - Sends data in the URL query string.
  • "POST" - Sends data in the request body (more secure for sensitive data).

    • <form action="/submit" method="post"><form action="/submit" method="post">

    autocomplete - Enables or disables autofill.

    <form autocomplete="on">

    target - Specifies where to display the response (_self, _blank, _parent, _top).

    <form action="submit.php" target="_blank">

    Common Form-Associated Tags

    <input> - User Input Fields

    The <input> tag is used to collect user input. Common types include:

    <input type="text" name="username" placeholder="Enter your name">
    <input type="password" name="password" placeholder="Enter your password">
    <input type="email" name="email" required>
    <input type="checkbox" name="subscribe"> Subscribe to newsletter
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <input type="submit" value="Submit">

    <label> - Descriptive Labels

    The <label> tag improves accessibility by linking labels to inputs.

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

    <textarea> - Multiline Input

    For long text inputs like messages or descriptions:

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

    <select> - Dropdown Menus

    The <select> tag creates a dropdown list.

    <label for="country">Country:</label>
    <select id="country" name="country">
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
    </select>

    <button> - Custom Buttons

    You can use a <button> instead of an <input type="submit">.

    <button type="submit">Submit Form</button>

    <fieldset> and <legend> - Grouping Fields

    These tags group related form elements.

    <fieldset> <legend>Personal Information</legend> <label for="name">Name:</label> <input type="text" id="name" name="name"> </fieldset>

    Example: Complete Form

    <form action="/submit" method="post">
    <fieldset>
    <legend>Sign Up</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <label for="country">Country:</label>
    <select id="country" name="country">
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
    </select>
    <input type="checkbox" name="terms" required> I accept the terms and conditions
    <button type="submit">Register</button>
    </fieldset>
    </form>
    Sign Up Male Female I accept the terms and conditions

    input types list

    text - Single-line text input.

    password - Hidden text input for passwords.

    email - Input for email addresses with validation.

    number - Numeric input with optional step control.

    tel - Input for telephone numbers.

    url - Input for website URLs with validation.

    search - Search box input.

    color - Color picker input.

    date - Input for selecting a date.

    datetime-local - Input for date and time (local).

    month - Input for selecting a month and year.

    week - Input for selecting a week of the year.

    time - Input for selecting a time.

    file - Input for file uploads.

    checkbox - Multi-select checkbox input.

    radio - Single-choice radio button.

    range - Slider input for selecting a range value.

    hidden - Invisible input field for storing data.

    - Submit button with an image.

    imagesubmit - Button to submit the form.

    reset - Button to reset form fields.

    button - General-purpose button input.