HTML Input Types

Text Input Types

The text type creates a single-line text input field. It's the default if no type is specified.

The password type masks the entered text for security, displaying bullets or asterisks instead of characters.

The email type validates that the input contains a properly formatted email address.

The tel type is for telephone numbers and may trigger a numeric keyboard on mobile devices.

The url type validates that the input is a properly formatted URL.

<!-- Text input (default) -->
<input type="text" name="username" placeholder="Enter username">

<!-- Password (hidden text) -->
<input type="password" name="password" placeholder="Enter password">

<!-- Email (validates format) -->
<input type="email" name="email" placeholder="user@example.com" required>

<!-- Telephone -->
<input type="tel" name="phone" placeholder="123-456-7890">

<!-- URL (validates format) -->
<input type="url" name="website" placeholder="https://example.com">

Number and Range Types

The number type creates an input for numeric values with optional min, max, and step constraints.

Browsers typically show spinner controls (up/down arrows) for incrementing/decrementing the value.

The range type creates a slider control for selecting a number within a range.

Range inputs are useful when the exact value is less important than the relative position within a range.

<!-- Number input with constraints -->
<label for="age">Age (1-120):</label>
<input type="number" id="age" name="age" min="1" max="120" value="25">

<!-- Number with decimal step -->
<label for="price">Price:</label>
<input type="number" id="price" name="price" min="0" step="0.01" value="9.99">

<!-- Range slider -->
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

<!-- Range with step -->
<label for="rating">Rating (1-5):</label>
<input type="range" id="rating" name="rating" min="1" max="5" step="0.5" value="3">

Date and Time Types

The date type shows a date picker for selecting a date (year, month, day).

The time type provides a time picker for selecting a time (hours and minutes).

The datetime-local type combines date and time selection without timezone.

The month type allows selecting a month and year.

The week type allows selecting a week number and year.

<!-- Date picker -->
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2025-12-31">

<!-- Time picker -->
<label for="meeting">Meeting time:</label>
<input type="time" id="meeting" name="meeting" value="14:00">

<!-- Date and time -->
<label for="appointment">Appointment:</label>
<input type="datetime-local" id="appointment" name="appointment">

<!-- Month selector -->
<label for="start">Start month:</label>
<input type="month" id="start" name="start">

<!-- Week selector -->
<label for="week">Select week:</label>
<input type="week" id="week" name="week">

Choice Input Types

The checkbox type creates a checkbox for boolean (yes/no) or multi-select options.

The radio type creates a radio button for selecting one option from a group (same name attribute).

Checkboxes can be independently checked or unchecked.

Radio buttons in a group are mutually exclusive - only one can be selected at a time.

Both types use the checked attribute to pre-select options.

<!-- Checkbox (can select multiple) -->
<label>
  <input type="checkbox" name="newsletter" value="yes" checked>
  Subscribe to newsletter
</label>
<label>
  <input type="checkbox" name="terms" value="accepted" required>
  Accept terms and conditions
</label>

<!-- Radio buttons (select one from group) -->
<p>Gender:</p>
<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>
<label>
  <input type="radio" name="gender" value="other" checked> Other
</label>

File and Color Types

The file type creates a file upload button allowing users to select files from their device.

The accept attribute restricts file types (e.g., image/*, .pdf, .doc).

The multiple attribute allows selecting multiple files.

The color type displays a color picker for selecting a color value in hexadecimal format.

<!-- File upload (single file) -->
<label for="resume">Upload resume:</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">

<!-- Multiple file upload (images only) -->
<label for="photos">Upload photos:</label>
<input type="file" id="photos" name="photos" accept="image/*" multiple>

<!-- Color picker -->
<label for="bgcolor">Choose background color:</label>
<input type="color" id="bgcolor" name="bgcolor" value="#ff0000">

Button Types and Search

The submit type creates a button that submits the form when clicked.

The reset type creates a button that resets all form fields to their default values.

The button type creates a generic button with no default behavior (requires JavaScript).

The search type is semantically for search fields and may trigger special behavior on some devices.

The image type creates a graphical submit button using an image.

<!-- Submit button -->
<input type="submit" value="Submit Form">

<!-- Reset button -->
<input type="reset" value="Clear">

<!-- Generic button -->
<input type="button" value="Click Me" onclick="alert('Clicked!')">

<!-- Search field -->
<input type="search" name="q" placeholder="Search...">

<!-- Image submit button -->
<input type="image" src="submit-button.png" alt="Submit" width="100" height="40">

Hidden Type

The hidden type creates an input field that is not displayed to the user.

Hidden inputs are used to include data in form submissions that users shouldn't see or modify.

Common uses include CSRF tokens, session IDs, or other metadata.

The value attribute sets the data that will be submitted with the form.

<!-- Hidden field for security token -->
<form action="/submit" method="POST">
  <input type="hidden" name="csrf_token" value="abc123xyz789">
  <input type="hidden" name="user_id" value="12345">
  
  <label for="comment">Comment:</label>
  <textarea id="comment" name="comment"></textarea>
  
  <button type="submit">Post Comment</button>
</form>