HTML Input Types Documentation
HTML Input Types Documentation
Complete guide to using HTML input elements and their types
Introduction to HTML Inputs
The HTML <input> element is used to create interactive controls for web forms. The type attribute determines what kind of input control is rendered. HTML5 introduced many new input types that provide better user experience and validation.
Common Input Types:
HTML Input Syntax
Basic Input Structure
<input type="text" name="username" placeholder="Enter username">
Input Types and Attributes
| Type | Description | Common Attributes | Example |
|---|---|---|---|
| text | Single-line text input | placeholder, maxlength, value | <input type="text"> |
| password | Masked text input | placeholder, maxlength | <input type="password"> |
| Email address input with validation | placeholder, multiple | <input type="email"> | |
| number | Numeric input with spinner | min, max, step | <input type="number"> |
| tel | Telephone number input | pattern, placeholder | <input type="tel"> |
| url | URL input with validation | placeholder | <input type="url"> |
| date | Date picker | min, max | <input type="date"> |
| time | Time picker | min, max, step | <input type="time"> |
| color | Color picker | value | <input type="color"> |
| file | File upload | accept, multiple | <input type="file"> |
| range | Slider control | min, max, step, value | <input type="range"> |
| checkbox | Checkbox for multiple selection | checked, value | <input type="checkbox"> |
| radio | Radio button for single selection | checked, value | <input type="radio"> |
| submit | Form submission button | value | <input type="submit"> |
| reset | Form reset button | value | <input type="reset"> |
| button | Generic button | value | <input type="button"> |
| hidden | Hidden input field | value | <input type="hidden"> |
Advanced Input Features
Form with Multiple Input Types
<form>
<div>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate" name="birthdate">
</div>
<div>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
</div>
<div>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<input type="submit" value="Register">
</form>
Input with Data List
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
Input Attributes Reference
| Attribute | Description | Example |
|---|---|---|
| placeholder | Hint text displayed in empty input | placeholder="Enter name" |
| required | Makes input mandatory | required |
| disabled | Disables the input | disabled |
| readonly | Makes input read-only | readonly |
| maxlength | Maximum number of characters | maxlength="50" |
| min/max | Minimum/maximum values | min="0" max="100" |
| step | Increment step for numbers | step="0.5" |
| pattern | Regex pattern for validation | pattern="[A-Za-z]{3}" |
| autocomplete | Enables/disables autocomplete | autocomplete="off" |
| autofocus | Automatically focuses input | autofocus |
Best Practices for Using HTML Inputs
Key Guidelines
- Always use appropriate input types for better user experience
- Include labels for all form inputs for accessibility
- Use placeholder text for additional guidance
- Implement proper validation with required attributes
- Group related inputs using fieldset and legend
- Use autocomplete attributes for common fields
- Test forms on different devices and browsers
- Provide clear error messages for validation failures
Complete HTML Form Example
Registration Form with Various Input Types
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1>User Registration</h1>
<form>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname"
placeholder="Enter your full name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="your@email.com" required>
</div>
<div>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-456-7890">
</div>
<div>
<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate" name="birthdate">
</div>
</fieldset>
<fieldset>
<legend>Account Settings</legend>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<label for="theme">Theme Color:</label>
<input type="color" id="theme" name="theme" value="#1abc9c">
</div>
<div>
<label for="volume">Notification Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
</div>
</fieldset>
<input type="submit" value="Create Account">
<input type="reset" value="Clear Form">
</form>
</body>
</html>
HTML Inputs Compiler
Practice creating HTML input elements in the editor below. The live preview will update as you type. Try different input types and attributes!