HTML Form Elements

What Are HTML Form Elements?

HTML form elements are HTML tags used within a <form> element to create an interactive form. These elements collect user input, which is then sent to a server for processing.

For example:

<form action="/submit" method="POST">
   <input type="text" name="username" placeholder="Enter your username">
   <button type="submit">Submit</button>
</form>

Common HTML Form Elements

1. <input> Element

The <input> element is one of the most versatile form elements, used to create various types of input fields such as text, email, passwords, radio buttons, checkboxes and more.

Key Attributes:

• type: Specifies the input type (e.g., text, password, email).
• name: Identifies the input field when submitting the form.
• placeholder: Displays a short hint inside the field.

Example:

<form>
   <label for="name">Name:</label>
   <input type="text" id="name" name="name" placeholder="Enter your name" required>
   <button type="submit">Submit</button>
</form>

2. <textarea> Element

The <textarea> element creates a multi-line text input field, useful for collecting longer inputs like comments or feedback.

Example:

<form>
   <label for="message">Message:</label>
   <textarea id="message" name="message" rows="4" cols="50" placeholder="Write your message here"></textarea>
   <button type="submit">Send</button>
</form>

3. <button> Element

The <button> element creates a clickable button. It can be used for submitting forms or triggering JavaScript functions.

Example:

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

• Types of Buttons:
  • submit: Submits the form.
  • button: Executes custom scripts or performs actions when paired with JavaScript.
  • reset: Resets all form fields to their default values.

Example (Reset Button):

<form>
   <input type="text" name="username" placeholder="Enter username">
   <input type="password" name="password" placeholder="Enter password">
   <button type="reset">Reset</button>
</form>

4. <select> Element

The <select> element creates a drop-down list, allowing users to choose from predefined options.

Example:

<form>
   <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>
   <button type="submit">Submit</button>
</form>

5. <label> Element

The <label> element provides a description for form elements and improves accessibility by linking with an input field using the for attribute.

Example:

<form>
   <label for="email">Email:</label>
   <input type="email" id="email" name="email" placeholder="Enter your email">
   <button type="submit">Submit</button>
</form>

6. <fieldset> and <legend> Elements

The <fieldset> groups related form elements, and the <legend> provides a caption for the group.

Example:

<form>
   <fieldset>
      <legend>Personal Information</legend>
      <label for="fname">First Name:</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last Name:</label>
      <input type="text" id="lname" name="lname">
   </fieldset>
   <button type="submit">Submit</button>
</form>

7. <datalist> Element

The <datalist> element provides a list of predefined options for an input field, making it easier for users to select valid data.

Example:

<form>
   <label for="browser">Choose a browser:</label>
   <input list="browsers" id="browser" name="browser">
   <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Safari">
      <option value="Edge">
   </datalist>
   <button type="submit">Submit</button>
</form>

8. <input type=”file”> Element

The <input> element with type=”file” allows users to upload files.

Example:

<form action="/upload" method="POST" enctype="multipart/form-data">
   <label for="file">Upload your file:</label>
   <input type="file" id="file" name="file">
   <button type="submit">Upload</button>
</form>

9. <input type=”hidden”> Element

The <input> element with type=”hidden” stores data that users cannot see or modify. This data is submitted with the form.

Example:

<form action="/submit" method="POST">
   <input type="hidden" name="user_id" value="12345">
   <button type="submit">Submit</button>
</form>

10. <progress> and <meter> Elements

• <progress>: Displays the progress of a task.
• <meter>: Displays a value within a known range.

Example (Progress):

<progress value="70" max="100"></progress>

Example (Meter):

<meter value="2" min="0" max="5" low="2" high="4" optimum="3"></meter>