codescracker


html

HTML INPUT Tag Types



« Previous Tutorial Next Tutorial »


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

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test