The <form> tag creates interactive controls that allow users to enter data and submit it to a web server for processing. It is a fundamental part of web development, enabling user interaction with a website, such as filling out contact forms, login forms, and surveys. A basic form structure looks like this:

<form action="submit_form.php" method="post">
    <!-- Form elements go here -->
</form>
                                    

The action attribute specifies the URL where the form data will be sent. The method attribute defines how the data is transmitted. Common values include post (sends data in the request's body) and get (appends data to the URL).

Form controls, such as input fields, checkboxes, and buttons, can also be managed using JavaScript. When handled with JavaScript, these controls do not necessarily need to be enclosed within a <form> tag. However, if the data needs to be submitted to a server, using the <form> tag is recommended for proper structure and functionality. We get the inputted values from controls through the id and name attributes.

• text
  • Defines a single-line text input field for user input.
  • <input type="text" name="username" placeholder="Enter your username">
  • Instead of placeholder, we can use value. Check the difference by entering some text.
• password
  • Defines a password input field. The characters typed are hidden.
  • <input type="password" name="password" placeholder="Enter your password">
• email
  • Defines a field for entering an email address. This field validates the format automatically (e.g., it checks for @).
  • <input type="email" name="email" placeholder="Enter your email">
• number
  • Defines a field for numeric input. We can set a range using min and max attributes. Use step to define increments (e.g., step="0.1" for decimal values).
  • <input type="number" name="age" min="18" max="100" placeholder="Enter your age">
• checkbox
  • Defines a checkbox. Users can select one or more options.
  • <input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter
  • Subscribe to newsletter
• radio
  • Defines a radio button. Users can select one option from a group. The name attribute groups radio buttons together.
  • <input type="radio" name="gender" value="male" id="male"><label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">Female</label>
  • Male
  • Female
• file
  • Defines a file upload button.
  • <input type="file" name="profile_pic" accept=".jpg,.png">
• submit
  • Defines a button that submits the form data.
  • <input type="submit" value="Submit">
• reset
  • Defines a button that resets all form fields to their default values.
  • <input type="reset" value="Reset">
• color
  • Defines an input field for selecting a color.
  • <input type="color">
• search
  • Defines an input field for entering search queries. It is optimized for search-related input.
  • <input type="search">
• date
  • Defines an input field for selecting a date.
  • <input type="date">
• time
  • Defines an input field for selecting a time. We can set a range using min and max attributes.
  • <input type="time" min="09:00" max="18:00">
• button
  • Defines a generic button, often used with JavaScript for custom actions.
  • <input type="button" value="Click me" onclick="alert('Button clicked!')">
  • The button below, without type="button", would behave like a submit button.
  • <button type="button" onclick="alert('Button clicked!')">Click me</button>
  • Click me
• <progressbar>
  • Represents the progress of a task. Use the value attribute to indicate progress and the max attribute to set the maximum value.
  • <progress value="75" max="100"></progress>
• textarea
  • Defines a multi-line text input field, often used for comments or messages. To block resizing it, use (in CSS): resize: none;.
  • <textarea name="message" rows="4" cols="10" placeholder="Enter your message"></textarea>
• <select>
  • Defines a drop-down menu for selecting one or more options.

  • 
    <select name="country">
        <option value="USA">USA</option>
        <option value="Canada">Canada</option>
        <option value="UK">UK</option>
    </select>
                                                    

  • USA Canada UK

Example: <input type="radio" name="gender" value="male" id="male" disabled checked>.

The type attribute in the <input> tag also supports other values like url, tel, range, and hidden.