Input Types for HTML Forms
There are many input types available in HTML5. You can find the list of all input type values here. These input types are generally used for creating HTML Forms.
We’re going to take a brief look at each of them and explain why you should be using them right now. Using these input types saves time and improves user experience. The input types to be discussed are:
text | email | url | tel | number | range | radio | color | date | month | week | time | datetime-local | password | submit | reset
input type="text"
HTML <input> elements with the text type create basic, single-line inputs. Use them when you want users to enter a single-line value. Add the required attribute to ensure that users will fill that field.
Example of using the "text" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="text" required placeholder="Text">
</form>
</body>
</html>input type="email"
The email input type is used to let the user enter and edit an email address, or, if the multiple attribute is defined, more than one email addresses.
Due to the CSS :valid and :invalid pseudo-classes, the input value automatically shows if it is a properly-formatted email address or not.
Example of using the "email" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="email" name="email" placeholder="Email" multiple>
<input type="submit" value="Send">
</form>
</body>
</html>input type="url"
This input type is for web addresses. It is automatically validated to ensure that it's either empty or a properly-formatted URL before the form can be submitted. It is possible to use more than one URL with the help of the multipleattribute.
Example of using the "url" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="url" placeholder="URL" multiple>
</form>
</body>
</html>input type="tel"
The tel input type is used to type and edit a telephone number. This input value is not automatically validated. It functionally is handy with mobile browsers, because smartphones usually recognize the input type and change the keyboard displaying a numeric keyboard.
Example of using the "tel" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="tel" placeholder="Phone Number">
</form>
</body>
</html>input type="number"
The number input type is used to enter a numerical value. It validates and rejects non-numerical entries. With the help of min, max, and step attributes you can control the default value and set minimum, maximum, and starting values.
Example of using the "number" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="number" min="1" max="15" step="1" name="number-of-colors">
</form>
</body>
</html>input type="range"
This input type lets the user specify a numeric value which should be no less than a specified value, and no more than another specified value. Use it when the control’s exact value is not important. It commonly uses a slider or dial control while the number input type shows a text entry box.
If the user's browser doesn't support range, it will fall back and show it as text input. To show the level, use the min and max attributes with the range input type. Add a starting point using the value attribute.
Example of using the "range" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="range" min="0" max="20" value="0">
</form>
</body>
</html>input type="radio"
The input type radio is used to create radio buttons. Radio buttons are generally used to specify a group item. Only one radio button in a group can be selected at the time.
Example of using the "radio" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="radio" name="gender" value="male">Male
<br>
<input type="radio" name="gender" value="female">Female
</form>
</body>
</html>input type="color"
The color input type provides a user interface element that allows users to select a color and returns the hex value for that color. The value attribute is generally used with the color input type to specify which color will be firstly set for users to start choosing. If the value attribute is not specified, it automatically sets "#000000".
Example of using the "color" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="color" name="color" value="#1c87c9" />
</form>
</body>
</html>input type="date"
Date pickers are widely used to help users quickly and easily choose the required date. Use the date input type to create input fields to allow users to enter a date. The resulting value includes the year, month, and day, but not the time. You can use the min and max attributes to ensure that the user will be able to choose only from a specified date range.
Example of using the "date" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="date" name="date" value="2018-01-01" min="2017-01-01" max="2019-01-01">
</form>
</body>
</html>input type="month"
The month input type creates input fields allowing the users to enter month and year. The value is a string with the"YYYY-MM" format, where YYYY is the four-digit year and MM is the month. Use the min and max attributes to set a limit for users.
Example of using the "month" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="month" name="month" value="2018-01" min="2017-01" max="2019-12">
</form>
</body>
</html>input type="week"
The input type week creates input fields which let users to easily choose the year plus the ISO 8601 week number during that year which can be from week 1 to 52 or 53).
Example of using the "week" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="week" name="week" min="2018-W1" max="2018-W52">
</form>
</body>
</html>input type="time"
The time input type is used to create input fields allowing the users to easily enter the time (hours and minutes, sometimes seconds).The value of the time input type is commonly in 24-hour format ("hh:mm"). If the time includes seconds the format is always "hh:mm:ss". If you want the users to mention also seconds, you can do it with the help of the step attribute.
Example of using the "time" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="time" name="time" value="22:00" />
</form>
</body>
</html>input type="datetime-local"
The datetime-local input type is used to create input controls to allow users to easily enter date and time (year, month, day and time in hours and minutes). It shows the user's local time zone.
Example of using the "datetime-local" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="datetime-local" name="meeting" />
</form>
</body>
</html>input type="password"
This input type is used to provide a way for the user to set a password safely. It is presented as a single line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as an asterisk ("*") or a dot ("•"). This character can differ depending on the user agent.
You can set a minimum length for the password using the minlength attribute.
Example of using the "password" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="password" name="password" minlength="6" required placeholder="6 characters minimum" />
</form>
</body>
</html>input type="submit"
The input type submit creates a submit button which submits the form to the server. If you don't define a value, the button will have a default label, chosen by the user agent.
Example of using the "submit" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
</body>
</html>input type="reset"
The input type reset is used to insert a reset button which will allow users to reset all form values to initial values.
Example of using the "reset" input type:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="text" name="name" placeholder="Enter your name">
<input type="reset" value="Reset">
</form>
</body>
</html>Now, when you are done with the input types, let’s see a complete example of a form, where all these input types are used:
Example of using all the input types:
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
margin-bottom: 20px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Fill the Form to Participate in the Big Project</h2>
<form action="/form/submit" method="post">
<fieldset>
<legend>Personal information</legend>
<label for="name"> First name: </label>
<input id="name" type="text" name="firstname" placeholder="First name" required>
<label for="last">Last name:</label>
<input id="last" type="text" name="lastname" placeholder="Last name" required>
<br>
<br>
<label for="age">Age:</label>
<input id="age" type="number" min="10" max="100" step="1" name="number-of-colors">
<label for="website">Website:</label>
<input id="website" type="url" multiple>
<br>
<br>
<label for="address">Email address:</label>
<input id="address" type="email" name="email" placeholder="[email protected]" required>
<label for="tel">Tel.:</label>
<input id="tel" type="tel" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<br>
<br>
</fieldset>
<fieldset>
<legend>Getting to know YOU</legend>
<label for="color">Favourite color:</label>
<input id="color" type="color" name="color" value="#1c87c9" />
<br>
<p>Motivation level:</p>
<input type="range" min="0" max="10" value="4">
<br>
<p>Favourite season:</p>
<input type="radio" name="season" value="winter"> Winter
<br>
<input type="radio" name="season" value="autumn"> Autumn
<br>
<input type="radio" name="season" value="summer"> Summer
<br>
<input type="radio" name="season" value="spring"> Spring
<br>
<p>Favourite music:</p>
<input type="radio" name="music" value="jazz"> Jazz
<br>
<input type="radio" name="music" value="blues"> Blues
<br>
<input type="radio" name="music" value="pop"> Pop
<br>
<input type="radio" name="music" value="rock"> Rock
<br>
</fieldset>
<fieldset>
<legend>Availability</legend>
<label for="project">When you will be ready to start the Project?</label>
<input id="project" type="date" name="date" value="2018-01-01" min="2018-01-01" max="2018-04-01">
<br>
<label for="hours">Mention your preferred working hours:</label>
<input id="hours" type="time" name="time" value="09:00" />
<label for="time">To </label>
<input id="time" type="time" name="time" value="18:00" />
<br>
<label for="password"> Enter your password:</label>
<input id="password" type="password" name="password" minlength="6" required placeholder="6 characters minimum" />
<br>
<br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>