HTML Input Types: <input type=""/> Explained with Examples

Master HTML input types! This comprehensive guide covers `text`, `password`, `submit`, `reset`, `radio`, `checkbox`, `button`, `color`, `date`, and more, with examples and explanations to build effective forms.

HTML Input Types

This guide provides an overview of the different input types available for the <input> element in HTML.

List of Input Types

Here are the various input types you can use in HTML:

  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

Tip: The default type for the type attribute is text.

Input Type: Text

The <input type="text"> defines a single-line text input field.

Syntax

<form>
  <label for="firstName">First Name:</label>

  <input type="text" id="firstName" name="firstName"><br>
  <label for="lastName">Last Name:</label><br>
  <input type="text" id="lastName" name="lastName">
</form>
Output

Input Type: Password

The <input type="password"> defines a password field, where characters are masked (e.g., shown as asterisks).

Syntax

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password">
</form>
Output

Input Type: Submit

The <input type="submit"> defines a button to submit form data to a server for processing.

Syntax
Output

First Name: Alice

Last Name: Smith

[Submit Button]

Input Type: Reset

The <input type="reset"> defines a button to reset all form values to their default state.

Syntax
Output

First Name: Charlie

Last Name: Brown

[Reset Button]

Radio Button

Radio buttons allow users to select one option from a set.

Example

  
Choose your favorite Web language:

Checkbox

Checkboxes allow users to select one or more options.

Example

Button

A button is clickable and can trigger JavaScript functions.

Example

Color Picker

The color picker allows users to select a color.

Example

Date Picker

The date picker allows users to choose a date.

Example

Email Input

The email input ensures valid email addresses are entered.

Example

File Upload

Users can upload files using the file input type.

Example

Hidden Input

Hidden inputs store information not visible to the user.

Example

Number Input

The number input restricts values to numerical data, often with min and max constraints.

Example

HTML Input Restrictions and Types

HTML input elements support various restrictions to control the type and format of user input. Here's a detailed overview with examples:

Common Input Restrictions

Attribute Description
checked Pre-selects an input field (checkbox or radio button) when the page loads.
disabled Disables an input field, preventing user interaction.
max Sets the maximum value for an input field.
maxlength Limits the maximum number of characters allowed in an input field.
min Sets the minimum value for an input field.
pattern Defines a regular expression to validate the input value.
readonly Makes an input field read-only.
required Marks an input field as mandatory.
size Specifies the width (in characters) of an input field.
step Defines intervals for valid numbers in numeric input fields.
value Sets the default value for an input field.

Example: Numeric Input with Restrictions

This example demonstrates a numeric input field with min, max, step, and default values:

Example

Input Types

Range

Defines a slider for selecting a value within a range.

Example

Search

Specifies a search input field.

Example

Telephone

Specifies a field for entering telephone numbers, optionally validated with a pattern.

Example

Time

Allows users to select a time (no time zone).

Example

URL

Specifies a field for entering a URL.

Example

Week

Allows users to select a week and year.

Example