HTML INPUT Tag Types

A form is composed of controls, such as text box, drop-down list, check-box, and radio button that enable the user to enter the information. You can create these controls by using the INPUT tag. To do this, you need to set the type attribute of the INPUT tag to the name of the control. For example, <INPUT type="text"> creates a control of text box type.

Types of INPUT Tag

Here are the list of INPUT tag types in HTML

  • text and search
  • tel
  • url
  • email
  • password
  • datetime-local
  • datetime, date, month, week, and time
  • number and range
  • file
  • hidden
  • checkbox
  • radio
  • submit
  • reset

Now let's discuss all the above types of the INPUT tag one by one.

HTML text and search Type

A text box (or text field) is a rectangular-shaped box that facilitates a user to enter the information. It is used to collect single line information, such as name, date of birth, telephone number, or e-mail, from the user.

You can create a text box inside a form by setting the type attribute of the INPUT tag to text; for instance, <INPUT type="text">. In addition, the attributes of the input tag that specifies the features of the text box are as follows :

  • Name - Provides a name to the text box, so that the program that handles the information provided in the form can identify the text box. For example, <INPUT type="text" name="username">
  • Size - Defines the size of the text box. It defines the number of visible characters that can be seen in the text box. For example, <INPUT type="text" name="username" size="30">
  • Maxlength - Specifies the maximum number of characters the user can enter in the text box.
  • Value - Specifies the default text that you want to display in the text box when the form is first loaded

HTML tel Type

The tel type of the input control is used to enter the telephone numbers. In this type, you can only enter numbers, as it does not accept alphabets. There is no specific syntax to specify the telephone number in the input control, as there is a wide variety of valid telephone numbers.

You can also specify particular pattern to enter the telephone number by using the pattern attribute of the INPUT tag.

HTML url Type

The url type of the input control is used to enter a valid path of a Web page. A valid url of a website consists of a protocol, a domain name, and a pathname. The most widely used protocols are Hypertext Transfer Protocol (HTTP) and File Transfer Protocol (FTP).

The value of the url field is automatically validated when you submit the form.

HTML email Type

the email type of the input control is used to enter a valid e-mail address, which should contain a @ symbol and a dot (.). The value of the e-mail field is automatically validated when you submit the form.

You can also enter more than one e-mail address in the e-mail field by using the multiple attribute, which specifies that the multiple e-mail addresses can be entered in the input control.

HTML password Type

A password is used to protect the secret information that a user does not want to share with others. You can create a password field by using the INPUT tag and setting its type attribute to password. The password field is similar to the text box but the text entered in the password field is not in a readable format, as the asterisk symbol or dot is displayed in the place of the characters.

Therefore, it is also referred as a masked text box. The attributes of the INPUT tag that specifies the features of the password field are as follows :

  • Name - Provides an internal name to the password field, so that the program that handles the form identifies the field. The name attribute is set through the INPUT tag.
  • Size - Defines the length of the password field. If the size is not specified, the browser takes the default size, which is 20.
  • Maxlength - Specifies the maximum number of characters that the user can enter in the password field.
  • Value - Specifies the value that is to b displayed in the password field is in the masked form, which means that the value is reflected as dots or asterisks.

HTML datetime-local Type

The datetime-local type of the input control is used to enter the date and time in the input control. When the date and time is defined as the type of the input control, a date time picker is provided on a form to select the date, month, year, and time.

You can select the date and time according to your appropriate time zone. In addition, you can set the minimum and maximum date and time values by using the min and max attributes. If you want to convert the seconds into the milliseconds, you can use the step attribute.

HTML datetime, date, month, week, and time Types

You can also set the type of the input control to datetime, date, month, week, and time separately.

The datetime type allows you to enter year, month, day, hour, minute, second, and fraction of a second in the Coordinated Universal Time (UTC).

The date type allows you to enter the day, month, and year by using the date time picker.

The month type allows you to enter the month in the input control. You can also set the minimum and maximum month by specifying the min and max attributes of the month type, respectively.

The week type is used to enter a week of a month.

The time type is used to enter only time in the input control.

HTML number and range Types

The number types is used to enter only numbers in the input control. You cannot enter any alphabet as the number type does not accept it and prompts you to enter only numbers at the time of submitting the form. The min and max attributes can be used to specify the minimum and maximum number to be entered in the input control. The range type of the input control allows you to enter a value within a specific range.

HTML file Type

The file type allows a user to select a file stored in the local computer and send it to the server on submission on the form. You need to set the type attribute to the file to create a file selection field. A user can either type the pathname of the file directly into the file selection field or use the browse option to select the pathname of the file from a system-specific dialog box.

In case of using the browse option, even if the pathname exceeds the maxlength specified, the browser accepts the complete pathname. The attributes of the file selection field are as follows :

  • Size - Defines the width of the visible text on the file selection field
  • Maxlength - Specifies the maximum number of character that can be entered in the file selection field
  • Accept - Specifies the type of files that can be submitted through a file upload

HTML hidden Type

A hidden field is used to pass along variables and values from one form to another, without forcing the user to re-enter the information.

In addition, it is not displayed by the browser. You can create a hidden field by using the INPUT tag and setting its type attribute to hidden. The attribute of the INPUT tag that specifies the features of the hidden field are as follows :

  • Name - Specifies a name of the hidden field
  • Value - Specifies the value that is to be displayed by default in the hidden field

HTML checkbox Type

A checkbox is used to select or deselect one or more items from a given set of items that are displayed on the form. It helps a user to select the items quickly and easily by providing the options.

You can create a checkbox by setting the type attribute of the INPUT tag to checkbox. The attribute of the INPUT tag that specifies the features of the checkbox field are as follows :

  • Name - Provides a name to the checkbox field. The following example shows the user of the name attribute :
    <input type="checkbox" name="cars">
  • Value - Determines the value that should be transmitted to the server after selecting the corresponding option on the checkbox. The following example shows the user of the value attribute :
    <input type="checkbox" name="cars" value="audi">
  • Checked - Provides the default item, which has to be sent to the server along with the items that are selected by the user. In addition, a user can clear the checked item as per the requirement. The following example shows the user of the checked attribute :
    <input type="checkbox" name="cars" value="audi" checked="yes">

HTML radio Type

The usage of a radio button is almost similar to a checkbox except that, in a check box more than one item can be selected, however, in a radio button, only one item can be selected.

Therefore, a radio button can be described as a field having a list of items from which a user has to select a single item. The radio button field can be created by setting the type attribute of the INPUT tag to radio. The attributes of the INPUT tag that specifies the features of the radio button field are as follows :

  • Name - Provides a name to the radio button field. Unlike the check box where different items can be named differently, each radio button in a group has the same name. The following example shows the use of the name attribute :
    <input type="radio" name="cars">
  • Value - Refers to the value that should be transmitted to the server when the corresponding option for the radio button is selected. The following example shows the user of the value attribute :
    <input type="radio" name="cars" value="audi">
  • Checked - Provides the default item, which is selected and sent to the server if the user does not select any item. If the user selects any other item from the list, the default item is automatically deselected. The following example shows the use of the checked attribute :
    <input type="radio" name="cars" value="audi" checked="yes">

HTML submit Type

When a user clicks the submit button, the form is sent to the address specified by the URL. You can create a submit button by setting the value of the type attribute of the INPUT tag to submit. The attributes of the INPUT tag that specifies the features of the submit button are as follows :

  • Name - Specifies the name of the submit button
  • Value - Specifies the label that is displayed on the submit button

HTML reset Type

When a user clicks the reset button, information of all the fields in the form are erased and set to the default values. The reset button is created by setting the type attribute of the INPUT tag to reset. The attributes of the INPUT tag that specifies the features of the reset button are as follows :

  • Name - Specifies the name of the reset button
  • Value - Specifies the label that is displayed on the reset button

HTML Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋