Input Types
This chapter deals with the input types belonging to the <input> element.
Input Type: text
<input type="text"> is used to define a one-line input field that is used for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Try it Yourself
This is the manner in which the HTML code above will be shown in a browser:
First name:Input Type: password
<input type="password"> is used to define a password field:
Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Try it Yourself
This is the manner in which the HTML code above will be shown in a browser:
User name:The characters that are present in a password field are kept masked (shown as asterisks or circles).
Input Type: submit
<input type="submit"> is used to define a button for submitting form input to a form-handler.
The form-handler is acutally a server page having a script that is used for processing input data.
The form-handler is mentioned in the form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit"
value="Submit">
</form>
Try it Yourself
This is the manner in which the HTML code above will get displayed in a browser:
If you are omitting the submit button's value attribute, the button will be getting a default text:
Example
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form>
Try it Yourself
Input Type Reset
<input type="reset"> is used to define a reset button that will be resetting all the form values to its default values:
Example
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit"
value="Submit">
<input type="reset">
</form>
Try it Yourself
This is the manner in which the HTML code above will be shown in a browser:
If you are changing the input values and then clicking on the "Reset" button, the form-data will be changed to its default values.
Input Type: radio
<input type="radio"> is used to define a radio button.
Radio buttons is used to allow a user to select ONLY ONE choice among a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male"
checked> Male<br>
<input
type="radio" name="gender" value="female"> Female<br>
<input
type="radio" name="gender" value="other">
Other
</form>
Try it Yourself
This is the manner in which the HTML code above will be shown in a browser:
MaleInput Type: checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes is used to allow the user to select ZERO or MORE options available out of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike">
I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Try it Yourself
This is the manner in which the HTML code above will be shown in a browser:
I have a cakeInput Type: button
<input type="button"> defines a button:
This is the manner in which the HTML code above will be shown in a browser:
HTML5 Input Types
HTML5 added several new input types:
Input types which are not supported by old web browsers, will be behaving as input type text.
Input Type: number
The <input type="number"> is used for input fields that will be containing a numeric value.
You can place restrictions for the numbers.
based on the browser supported, the restrictions can be applied to the input field.
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1"
max="5">
</form>
Try it Yourself
Input Restrictions
Given below is a list of few common input restrictions (some of them are new in HTML5):
| Attribute | Description |
|---|---|
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will be learning more in detail about input restrictions in the next chapter.
Example
<form>
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
</form>
Try it Yourself
Input Type: date
The <input type="date"> is utilised for giving input fields which should have a date.
based on the browser support, a date picker can be used to show up in the input field.
Restrictions can also be added to the input:
Example
<form>
Enter a date before 1980-01-01:
<input
type="date" name="bday" max="1979-12-31"><br>
Enter a date after
2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Try it Yourself
Input Type: color
The <input type="color"> can be used for giving input fields which will be containing a color.
Based on the browser support, a color picker may be displayed in the input field.
Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Try it Yourself
Input Type: range
The <input type="range"> can be made use to give input fields which should be having a value within a range.
Based on the browser support, the input field displayed can also be shown as a slider control.
You can be using the following attributes for specifing restrictions: min, max, step, value.
Input Type: month
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Try it Yourself
Input Type: week
The <input type="week"> will be allowing the user for selecting a week and year.
Based on the browser support, a date picker can be displayed in the input field.
Input Type: time
The <input type="time"> will be allowing the user for selecting a time (no time zone).
based on the browser support, a time picker can be displayed in the input field.
Input Type: datetime-local
The <input type="datetime-local"> is used for allowing the user for selecting a date and time (no time zone).
Based on the browser support, a date picker can be displayed in the input field.
Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Try it Yourself
Input Type: email
The <input type="email"> can be used to give input fields which should be containing an e-mail address.
based on the browser support, the e-mail address during submission can be automatically validated.
Some of the smartphones can recognize the email type, and also adds ".com" to the keyboard for matching email input.
Input Type: search
The <input type="search"> can be used for search fields (a search field acts like a regular text field).
Input Type: tel
The <input type="tel"> is utilised for giving input fields which can have a telephone number.
The tel type is supported only in Safari 8 at present.
Input Type: url
The <input type="url"> is utilised for giving input fields that should be containing a URL address.
based on the browser support, the url field during submission can be automatically validated.
Some of the smartphones identify the url type, and also adds ".com" to the keyboard for matching url input.