HTML Forms and Their Elements

HTML Forms and Common Form Tags

HTML forms are used to collect information from users through a webpage. The <form> tag is the main container that holds different form elements such as text boxes, buttons, radio buttons, checkboxes, and drop-down lists. Every form element has its own purpose. For example, the <input> tag is used to create different types of input fields, <label> is used to describe an input field, <textarea> allows users to enter multiple lines of text, and <select> with <option> is used to create a drop-down list. Tags like <button>, <fieldset>, and <legend> help organize the form and make it easier to understand.

<form>
  <fieldset>
    <legend>Student Information</legend>

    <label for="name">Name</label>
    <input type="text" id="name" name="studentName">

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

Understanding Important Form Attributes

HTML attributes provide additional information to form elements and control how they behave. Attributes like type, id, name, placeholder, value, required, disabled, and readonly are commonly used while creating forms. The name attribute is mainly used to identify form data during form submission. In a normal HTML page without a backend, it does not create any visible change for text fields, but it is useful for grouping radio buttons. When multiple radio buttons have the same name, the browser treats them as one group and allows only one option to be selected.

<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female

Difference Between Input Validation and Display Elements

Some HTML attributes have different purposes depending on the element they are used with. The min and max attributes in an <input> element are used to limit the values that a user can enter. The same attributes inside the <meter> element define the range of a measurement instead of restricting user input. The <meter> tag is useful for displaying values such as battery level, storage usage, or exam score. Unlike <input type="range">, which lets users change a value using a slider, the <meter> element only displays a value and is not used to receive input from the user.

<meter value="70" min="0" max="100"></meter>

<input type="range" min="0" max="100" value="70">