What is Input elements in HTML ?

The <input> element in HTML is a versatile element used within forms to collect user input. It allows users to enter data such as text, numbers, dates, checkboxes, radio buttons, etc., and submit it to a web server for processing.

The <input> element does not have a closing tag and can have various types depending on the type of input expected from the user. Here are some common types of the <input> element:

  • type="text": Single-line text input.

      <label for="name"> Name: </label>
      <input type = "text" id="name" name="name">
    
  • type="password": Password input (masked text).

      <label for="password"> Password: </label>
      <input type="password" id="password" name="password">
    
  • type="checkbox": Checkbox for selecting multiple options.

      <input type="checkbox" id="option1" name="option1" value="option1">
      <label for="option1">Option 1</label><br>
      <input type="checkbox" id="option2" name="option2" value="option2">
      <label for="option2">Option 2</label><br>
    
  • type="radio": Radio buttons for selecting a single option from a group.

      <input type="radio" id="radio1" name="radioGroup" value="radio1">
      <label for="radio1">Radio 1</label><br>
      <input type="radio" id="radio2" name="radioGroup" value="radio2">
      <label for="radio2">Radio 2</label><br>
    
  • type="number": Numeric input field (allows numbers only).

      <label for="quantity">Quantity:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10">
    
  • type="email": Input for email addresses, with basic email format validation.

      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    
  • type="date": Date picker for selecting dates.

      <label for="birthdate">Birthdate:</label>
      <input type="date" id="birthdate" name="birthdate">
    
  • type="file": Allows users to upload files from their device.

      <label for="fileUpload">Upload File:</label>
      <input type="file" id="fileUpload" name="fileUpload">
    
  • type="submit": Creates a submit button to send form data.

      <input type="submit" value="Submit">
    
  • type="reset": Generates a reset button to clear form data.

      <input type="reset" value="Reset">
    
  • type="color": Color picker for selecting colors.

      <label for="color">Choose Color:</label>
      <input type="color" id="color" name="color">
    
  • type="tel": Input field for telephone numbers.

      <label for="phone">Phone:</label>
      <input type="tel" id="phone" name="phone">
    
  • type="url": Input field for URLs.

      <label for="website">Website:</label>
      <input type="url" id="website" name="website">