Input Element
The <input> element is one of the most important form elements in HTML. It is used to collect different types of user input on a web page, like names, passwords, email addresses, dates, and more.
Depending on its type attribute, it can appear as a text box, radio button, checkbox, file uploader, and more making it versatile for all kinds of forms.
Depending on its type attribute, it can appear as a text box, radio button, checkbox, file uploader, and more making it versatile for all kinds of forms.
Example: Name Input
<form> Enter your name: <br> <input type="text" name="username"></form>Output:
.webp)
Common HTML Input Types
Here is a list of useful input types in HTML:
Example: Student Details Form
Output:
.webp)
Here is a list of useful input types in HTML:
| Input Type | Description |
|---|---|
| text | A single-line text input |
| password | Hides text input (e.g. for passwords) |
| Validates input as an email address | |
| number | Numeric input only |
| radio | Select one option from a group |
| checkbox | Select one or more options |
| file | Upload files |
| submit | Submit the form |
| reset | Reset the form |
| button | Generic button for custom actions |
| date | Select a date |
| datetime-local | Select date and time |
| color | Choose a color |
| tel | Input for phone numbers |
| url | Validates as a URL |
| range | Slider input ( range between values ) |
Example: Student Details Form
<h2>Student Registration Form</h2><form> <label for="name">Name:</label> <input type="text" id="name" placeholder="Enter name" required><br><br>
<label for="email">Email:</label> <input type="email" id="email" placeholder="Enter email" required><br><br>
<label for="password">Password:</label> <input type="password" id="password" placeholder="Enter password"><br><br>
<label for="age">Age:</label> <input type="number" id="age" min="1"><br><br>
<label for="dob">Date of Birth:</label> <input type="date" id="dob"><br><br>
<label>Gender:</label><br> <input type="radio" id="male" name="gender" value="male"><label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"><label for="female">Female</label><br><br>
<label>Hobbies:</label><br> <input type="checkbox" id="reading" value="Reading"><label for="reading">Reading</label><br> <input type="checkbox" id="sports" value="Sports"><label for="sports">Sports</label><br><br>
<label for="file">Upload Photo:</label> <input type="file" id="file"><br><br>
<input type="submit" value="Register"></form>Output:
Key Point
- Always use meaningful labels with inputs.
- Use type attributes to control the behavior of the <input> element.
- Combine with <form> to send the data to a server.
- Add required to make any field mandatory.