HTML Input Types
This chapter describes the different types for the HTML <input> element. The type you choose changes how the field looks and behaves.
The available types are: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, and week.
Tip: The default value of the type attribute is text.
Input Type Text
<input type="text"> makes a single-line text input field.
Example
A form with text fields for a first and last name.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Text</title>
</head>
<body>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Input Type Password
<input type="password"> makes a password field. The characters typed into it are masked, shown as dots or asterisks.
Example
A form with a username text field and a password field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Password</title>
</head>
<body>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
Input Type Submit
<input type="submit"> makes a button that sends the form data to a form-handler. The handler is usually a server page with a script, set in the form's action attribute.
If you leave out the submit button's value attribute, the button shows the browser's default text.
With a value
A submit button with the label "Submit".
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Submit</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Default button text
The same form, but the submit button has no value, so it shows the default text.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default Submit Text</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
</body>
</html>
Input Type Reset
<input type="reset"> makes a reset button that sets all form fields back to their default values.
If you change the values and then click "Reset", the form data goes back to the defaults.
Example
A form with a submit button and a reset button.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Reset</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Input Type Radio
<input type="radio"> makes a radio button. Radio buttons let the user pick only ONE of a small set of choices.
Example
Radio buttons for choosing one favorite web language.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Radio</title>
</head>
<body>
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
Input Type Checkbox
<input type="checkbox"> makes a checkbox. Checkboxes let the user pick zero or more of a small set of choices.
Example
Three checkboxes the user can tick independently.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Checkbox</title>
</head>
<body>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
</body>
</html>
Input Type Button
<input type="button"> makes a clickable button.
Example
A button that shows an alert when clicked.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Button</title>
</head>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>
Input Type Color
<input type="color"> is for fields that should hold a color. Depending on the browser, a color picker may appear.
Example
A color picker field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Color</title>
</head>
<body>
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
</body>
</html>
Input Type Date
<input type="date"> is for fields that should hold a date. Depending on the browser, a date picker may appear.
You can use the min and max attributes to limit which dates are allowed.
Basic date
A simple date field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Date</title>
</head>
<body>
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
</body>
</html>
Date restrictions
Date fields limited with min and max.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Restrictions</title>
</head>
<body>
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
</body>
</html>
Input Type Datetime-local
<input type="datetime-local"> is a date-and-time field with no time zone. Depending on the browser, a date picker may appear.
Example
A date-and-time field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Datetime-local</title>
</head>
<body>
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
</body>
</html>
Input Type Email
<input type="email"> is for fields that should hold an email address. Depending on the browser, the address can be checked automatically when the form is submitted. Some phones add ".com" to the keyboard for email fields.
Example
An email field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Email</title>
</head>
<body>
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
</body>
</html>
Input Type Image
<input type="image"> uses an image as a submit button. The path to the image goes in the src attribute.
Example
An image acting as a submit button.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Image</title>
</head>
<body>
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
</body>
</html>
Input Type File
<input type="file"> makes a file-select field with a "Browse" button for uploading files.
Example
A file-select field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type File</title>
</head>
<body>
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
</body>
</html>
Input Type Hidden
<input type="hidden"> makes a hidden field that the user does not see. It lets developers send data with the form that the user cannot see or change, such as which database record to update.
Note: The value is hidden from the page, but it can still be seen and edited with the browser's developer tools or "View Source". Do not use hidden inputs for security.
Example
A form with a visible field plus a hidden field carrying a customer id.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Hidden</title>
</head>
<body>
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type Month
<input type="month"> lets the user pick a month and year. Depending on the browser, a date picker may appear.
Example
A month-and-year field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Month</title>
</head>
<body>
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
</body>
</html>
Input Type Number
<input type="number"> makes a numeric input field. You can limit which numbers are allowed with attributes like min and max.
Example
A numeric field that only accepts values from 1 to 5.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Number</title>
</head>
<body>
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
</body>
</html>
Input Restrictions
Here are some common attributes for limiting what can be entered in an input:
checked— the field is pre-selected when the page loads (forcheckboxorradio).disabled— the field is disabled.max— the maximum value allowed.maxlength— the maximum number of characters.min— the minimum value allowed.pattern— a regular expression the value must match.readonly— the field cannot be changed.required— the field must be filled in.size— the width of the field in characters.step— the allowed number intervals.value— the default value.
You will learn more about input restrictions in the next chapter.
Example
A numeric field from 0 to 100 in steps of 10, with a default value of 30.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Restrictions</title>
</head>
<body>
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
</body>
</html>
Input Type Range
<input type="range"> makes a slider for a number whose exact value is not important. The default range is 0 to 100, and you can change it with min, max, and step.
Example
A slider for a volume value from 0 to 50.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Range</title>
</head>
<body>
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
</body>
</html>
Input Type Search
<input type="search"> is for search fields. A search field works like a normal text field.
Example
A search field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Search</title>
</head>
<body>
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
</body>
</html>
Input Type Tel
<input type="tel"> is for fields that should hold a telephone number. You can use the pattern attribute to set the expected format.
Example
A phone-number field with a pattern.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Tel</title>
</head>
<body>
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
</body>
</html>
Input Type Time
<input type="time"> lets the user pick a time (no time zone). Depending on the browser, a time picker may appear.
Example
A time field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Time</title>
</head>
<body>
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
</body>
</html>
Input Type Url
<input type="url"> is for fields that should hold a web address. Depending on the browser, the value can be checked automatically when submitted. Some phones add ".com" to the keyboard for url fields.
Example
A URL field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Url</title>
</head>
<body>
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
</body>
</html>
Input Type Week
<input type="week"> lets the user pick a week and year. Depending on the browser, a date picker may appear.
Example
A week field.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Week</title>
</head>
<body>
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
</body>
</html>