HTML Input Types — Complete Reference

Aa

Text inputs

For collecting written data

Texttype="text"

The default single-line text field. Accepts any character.

Full name

<input type="text">

Passwordtype="password"

Masks the typed characters for sensitive input.

Password

<input type="password">

Emailtype="email"

Validates email format. Shows email keyboard on mobile.

Email address

<input type="email">

URLtype="url"

Validates URL format. Expects http:// or https://.

Website URL

<input type="url">

Teltype="tel"

Shows numeric keypad on mobile. No format validation by default.

Phone number

<input type="tel">

Searchtype="search"

Styled as a search field. May show a clear button in some browsers.

Search

<input type="search">

Textarea<textarea>

Multi-line text input. Resizable by the user. Not an input type but commonly grouped here.

Your message

<textarea rows="4"></textarea>

#

Number & range

For numeric values

Numbertype="number"

Numeric input with spinner controls. Supports min, max, and step.

Quantity

<input type="number" min="1">

Rangetype="range"

A slider for selecting a value within a range. Great for settings.

Volume

60

<input type="range" min="0" max="100">

📅

Date & time

For temporal values

Datetype="date"

Date picker with calendar UI. Returns YYYY-MM-DD format.

Pick a date

<input type="date">

Timetype="time"

Time picker for hours and minutes. Returns HH:MM format.

Pick a time

<input type="time">

Datetime-localtype="datetime-local"

Combined date and time picker without timezone info.

Date & time

<input type="datetime-local">

Monthtype="month"

Select a month and year. Returns YYYY-MM format.

Select month

<input type="month">

Weektype="week"

Select a specific week. Returns YYYY-W## format.

Select week

<input type="week">

☑

Choice inputs

For selecting options

Checkboxtype="checkbox"

Toggle boolean values. Multiple checkboxes can be checked.

HTML CSS JavaScript

<input type="checkbox">

Radiotype="radio"

Select one option from a group. Uses the same name attribute to group them.

Free plan Pro plan Enterprise

<input type="radio" name="plan">

Select<select>

Dropdown menu for selecting one option from a list.

Country

Colortype="color"

Native color picker. Returns a hex value like #ff0000.

Pick a color

#e63946

<input type="color">

↑

Actions & other

Buttons, file upload, hidden & more

Submittype="submit"

Submits the surrounding form. Default button in a form.

<input type="submit" value="Submit">

Resettype="reset"

Resets all fields in the form to their default values.

<input type="reset" value="Reset">

Buttontype="button"

A clickable button with no default behavior. Controlled via JavaScript.

<input type="button" value="Click">

Filetype="file"

File upload picker. Use accept attribute to limit file types.

Upload a file

<input type="file" accept="image/*">

Hiddentype="hidden"

Not visible to users. Used to pass data like CSRF tokens or IDs with form submissions.

[hidden — not visible to user]
name="userId" value="42"

<input type="hidden" value="42">

Imagetype="image"

A graphical submit button. Uses an image instead of text.

<input type="image" src="btn.png">

Text inputs

Number & range

Date & time

Choice inputs

Actions & other

🚀 Take Your HTML Forms Live