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:

Some popular HTML Input Elements :

• 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">