# Input Elements

The `<input>` element is used where the user can enter data. The input tag is used within **&lt; form&gt;** element.

**Example:**

```xml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="Fname">First Name:</label>
        <input type="text" required placeholder="First Name" > <br>

        <label for="Mname">Middle Name:</label>
        <input type="text" required placeholder="Middle Name"><br>

        <label for="Lname">Last Name:</label>
        <input type="text" required placeholder="Last Name"><br>

        <label for="DOB">DOB:</label>
        <input type="date" name="DOB" id="DOB"><br>

        <label for="Gender">Gender:</label>

        <input type="radio" name="Gender" id="Gender">
        <label for="Male">Male</label><br>

        <input type="radio" name="Gender" id="Gender">
        <label for="Male">Female</label><br> 

 
<label for="Mobile No">Mobile No</label>
<input type="tel" name="" id=""> <br>
<label for="Email">Email</label>
<input type="email" name="" id=""> <br>

Highest Education:<input type="radio" name="HE" id="">10th  <input type="radio" name="HE" id="">12th <input type="radio" name="HE" id="">Graduation <br>

<input type="button" value="save">
<input type="submit" value="submit">

       

    </form>
</body>
</html>
```

## **&lt;input&gt; types**

1. **Text** \- creates a single-line text input field, where the user can type any text input.
    
2. **Button -**creates a button with no default functionality.
    
3. **Checkbox** \- A check box allowing single values to be selected/deselected.
    
4. **Color -** creates a color picker.
    
5. **Date -** creates a date (year, month, and day).
    
6. **Datetime-Local -** creates a date and time.
    
7. **Email -** creates an input field that allows the user to input an email address.
    
8. **File -** Allow the user to upload a file or multiple files.
    
9. **Hidden -** This creates an invisible input field that the user can not see.
    
10. **Image -** Define an image as the submit button.
    
11. **Month -** Allow the user to enter month and year (Year-Month).
    
12. **Number -** Allow the user to enter a number.
    
13. **Password -** A single-line text field whose value is obscured. Will alert the user if the site is not secure.
    
14. **Radio -** Let the user select exactly one option from a list of predefined options.
    
15. **Range -** Creates a range picker from which the user can select the value.It has a Default range value from 0 to 100. 
    
16. **Reset -** Creates the button which clears all the form values to their default value
    
17. **Search -** Allows the user to enter their search queries in the text fields
    
18. **Submit -** A button that submits the form.
    
19. **Tel -** Defines the field to enter a telephone number
    
20. **Time -** Let the user easily enter a time (hours & minutes).
    
21. **Url -**Let the user enter and edit a URL.
    
22. **Weak -**Lets the user pick a week and a year from a calendar.
