HTML Input Types
HTML form input types are discussed in this section. The HTML <input> element has several types that are discussed in this chapter.
Listed below are the different types of HTML form inputs that you can use in HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Tip: A helpful hint about HTML form input types is that the “text” value of the type property is always used as the default.
- HTML Input Types:
- The Input Type Text:
- Html Input Type Password:
- Input Type Reset:
- Input Type Submit:
- Input Type Checkbox:
- Input Type Radio:
- Input Type Button:
- Input Type Date:
- Input Type Color:
- Input Type Number:
- Input Type Datetime-local:
- Input Type File:
- Input Type Email:
- Input Type Month:
- Input Restrictions:
- Input Type Search:
- Input Type Range:
- Input Type Tel:
- Input Type Time:
- Input Type Week:
- Input Type Url:
- Test Yourself with Exercises!:
- HTML Input Type Attribute:
- Benefits of HTML Input Types:
The Input Type Text:
A single-line text input field is determined by the <input type=”text”> attribute in html input type :
Example
A browser will display the HTML code above as follows:
First name:
Last name:
The text input can also be limited like you can set the max character to be filled. See example below:
Example:
Html Input Type Password:
When we use <input type=”password”> in HTML forms, a password field is created as follows:
Example
Here is how the HTML code above will appear in a browser:
Username:
Password:
Note: Masking is applied to hide characters in password fields ( displayed as asterisks or circles).
Password type can also be limited to the minimum and maximum length and also define the password input. See the example below:
Example:
Input Type Reset:
Utilizing the HTML form <input type=”reset”>, you can modify all form values to their default values by clicking the reset button:
Example
Below is an example of how the HTML code we have written will look in a web browser:
In HTML form input types, if you alter the input values and then click the “Reset” button, the form data will be set back to the default values if you change the input values and click the Reset button.
Input Type Submit:
<input type=”submit”> provides a button for sending form data to a form handler in HTML form input types.
A server page containing a script for processing input data serves as the form handler in most cases.
The action property of the form indicates the form-handler:
The varieties of HTML form input are shown here!
Example
A browser will render the HTML code above as follows:
You will get the following default text if you ignore the value attribute for the submit button when it comes to html input type:
Example
Input Type Checkbox:
A checkbox is specified using the <input type=”checkbox”> tag in an HTML form.
Users can select ZERO or MORE options from a limited number of options using checkboxes.
Example
A browser will render the HTML code above as follows:
The checkbox is also validated using Javascript like we see in our daily life forms that there is the terms and condition checkbox and we have to read and mark it up for continuing forward. Here is an example how it is done:
Example:
Input Type Radio:
A radio button is specified by the HTML form input type <input type=”radio”>.
A user may only pick Single option from a small list of options using radio buttons:
Example
As you can see, a browser displays the HTML code as follows:
Radio buttons can also be validated with the help of javascript. In case the user forgets to select the radio button it will pop up the alet msg. See the example below:
Example:
Input Type Button:
A button is established as an HTML form input with the tag <input type=”button”>.
Example
In a web browser, the preceding code will look like this:
The is button has a property of disabled like you can add a button but it will not work because it actually disabled. See example below:
Example:
Input Type Date:
When it comes to input types for HTML forms, the <input type=”date”> tag is the one that’s used for fields that need to include a date.
A date picker may or may not appear in the input field, depending on the functionality provided by the browser.
Example
If you want to add restrictions to dates, you can use the min and max attributes as follow:
Example
Input Type Color:
When it comes to input types for HTML forms, the <input type=”color”> tag is the one that’s used for fields that need to hold a color.
A color picker may or may not appear in the input field, depending on the capabilities offered by the browser as it comes to html input type.
Example
Input Type Number:
A numeric input field is defined by the <input type=”number”> tag. It is also possible to set restrictions on what numbers are accepted.
Here is an example of a numeric input field that can receive values from 1 to 5:
Example:
A numeric input field can be set to default value so it represents a integer to placed in it. See example below:
Example:
Input Type Datetime-local:
The <input type=”datetime-local”> tag denotes a date and time input field that does not take into account the current time zone.
It is possible for a date picker to appear in the input field of HTML form input types; however, this is dependent on the browser support.
Example
Input Type File:
For the purpose of uploading files, the <input type=”file”> tag creates a file-selection field and a button labeled “Browse.”
Example:
The file input can be specified which file will be acceptable you can define the format youself. See example below:
Example:
Input Type Email:
For text boxes where an email address should be entered, use the <input type=”email”> tag.
It is possible for browsers to do an automated validation of the email address upon submission.
Several smart phones can tell when you’re trying to send an email, and they’ll automatically append “.com” to the keypad.
Example:
The emails can or cannot be correct sometimes. You can place the pattern in your input field so that the valid emails can be put in it.
Here is how its done:
Example:
Input Type Month:
The user is given the option of selecting both the month and the year through the <input type=”month”>.
A date picker may or may not appear in the input field, depending on the browser’s capabilities.
Example:
Month input can be set to min and max date. Here is how we can do that:
Example:
Input Restrictions:
Some common input restrictions can be found in the following list:
| Attribute | Overview |
|---|---|
| min | An input field’s minimum value. |
| checked | When the page loads, an input field should be pre-selected (for type=”checkbox” or type=”radio”). |
| disabled | A disabled input field is specified. |
| pattern | Checks the input value against a regular expression. |
| required | A required input field (must be filled out). |
| size | An input field’s width is calculated in characters. |
| step | Provide an input field with legal number intervals. |
| value | An input field’s default value. |
| readonly | Make an input field read-only (not editable). |
| max | Sets the maximum value for an input field. |
| maxlength | Limit input fields to a certain number of characters. |
Next, you will learn about input restrictions.
An example of an input field with a numeric value range of 0 to 100, in 10 step increments, appears below. 30 is the default value:
Example
Input Type Search:
For search fields, the <input type=”search”> is used (search fields behave like regular text fields).
Example:
Input Type Range:
An <input type=”range”> allows you to enter a number whose exact value is not relevant.
There is a default range of 0 to 100.
In combination with the min, max, and step attributes, however, you can restrict which numbers are acceptable:
Example:
Input Type Tel:
Input fields containing telephone numbers should use the <input type=”tel”>.
Example:
Input Type Time:
Users can select a time by selecting an <input type=”time”> (there is no time zone option).
Input fields can display a time picker depending on browser support.
Example:
The time input range can be set using the min and max value here is how:
Example:
Input Type Week:
The user can choose a week and year with the <input type=”week”>.
Input fields can include a date picker depending on browser support.
Example:
Input Type Url:
Using the <input type=”url”> ensures that URL addresses are included in input fields.
When the url field is submitted, the browser can automatically validate it.
To match url input, some smartphones add “.com” to the keyboard.
Example:
HTML Input Type Attribute:
| Tag | Overview |
|---|---|
| <input type=””> | Indicates what type of input should be rendered |
Benefits of HTML Input Types
HTML input types are powerful attributes used to create input fields that can accept various types of data. They offer numerous benefits that make them an essential tool for web developers.
- Improved User Experience : HTML input types provide an intuitive user interface that enables users to input data quickly and efficiently, resulting in a better user experience. Users can easily and accurately input data, reducing frustration and increasing satisfaction.
- Reduced Development Time: HTML input types come pre-built with functionality, allowing developers to save time by avoiding the need to create custom input fields. This reduces development time and speeds up the process of creating web pages.
- Cross-Platform Compatibility: HTML input types are supported by most web browsers, providing cross-platform compatibility. This ensures that users can access web pages irrespective of the device used. The same input type will work seamlessly on different platforms, eliminating the need for developers to create different input fields for different devices.
- Validation: HTML input types offer in-built validation, preventing users from submitting incorrect data. This saves time and enhances the accuracy of data collected. Developers can set up specific validation rules, such as required fields, minimum and maximum length, and data format, ensuring that data is entered correctly.
- Enhanced Security: HTML input types such as password and email fields are designed to secure sensitive information, ensuring that it is not easily accessed by unauthorized individuals. This helps to protect user data and prevent identity theft.
- Improved Accessibility: HTML input types can include labels and other elements that improve web page accessibility by providing additional information for screen readers and other assistive technologies. This ensures that users with disabilities can access and use web pages effectively.
- Easy Integration: HTML input types can easily integrate with JavaScript and other web technologies, enabling developers to add advanced functionality to web pages. This allows for the creation of dynamic web pages with advanced features and interactivity.
