Input Elements in HTML

Input elements are HTML elements that allow users to input data into a webpage or web application. They are an important part of forms, which are used to collect user input, such as names, addresses, and email addresses. There are several types of input elements, each with its own specific purpose and behaviour.

There are many different types of input elements, including text fields, radio buttons, checkboxes, and more. The type attribute is used to specify the type of input element.

  • <input type="text">: This element creates a single-line text field that allows the user to enter a short piece of text, such as their name or email address.

      <input type="text" id="email" name="email">
    
  • <input type="radio">: This element creates a radio button, which allows the user to select one option from a group of options.

      <input type="radio" id="opt-1" name="options" value="opt-1"> 
      <input type="radio" id="opt-2" name="options" value="opt-2">
    
  • <input type="checkbox">: This element creates a checkbox, which allows the user to select multiple options from a group of options.

      <input type="checkbox" id="opt-1" name="options" value="opt-1">
      <input type="checkbox" id="opt-2" name="options" value="opt-2">
      <input type="checkbox" id="opt-3" name="options" value="opt-3">
    
  • Select lists are another type of input element that is used to present a list of options to users. Select lists are defined by the <select> tag, and are made up of option elements, which are defined by the <option> tag.

      <select id="fruit" name="fruit">
          <option value="apple">Apple</option>
          <option value="banana">Banana</option>
          <option value="orange">Orange</option>
      </select>
    
  • Button elements are used to allow users to trigger actions on a webpage or web application. Button elements are defined by the <button> tag.

      <button>Click me</button>