type (HTML attribute)

Spec
Depr. Version
No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

type=" { button | checkbox | file | hidden | image | password | radio | reset | submit | text } "

Description

Of all the attributes that can be applied to an input, the type attribute is the one that has the biggest impact. With a change of this value, the appearance and behavior of the input can change dramatically, from a simple text input or a masked password field, to controls such as radio buttons, checkboxes, and even images. The possible values and their applications are detailed in the list below:
"button"
This is a simple clickable button that doesn’t actually do anything per se (unlike a Submit button, which sends the form data to the location defined in action). The input button type is usually used along with JavaScript to trigger some kind of behavior (for example, using a button to open a help page in a new window). Here’s a button definition:
<input type="button" value="Click me. I basically do
    nothing"/>
"checkbox"
This type of input is used when you need users to answer a question with a yes or no response. There’s no way that users can enter any data of their own—their action is simply a case of checking or unchecking the box. When the form is submitted, the server will be interested in the value attribute attached to the control, and the state of the checkbox (checked or unchecked). When you’re specifying a checkbox input, the control should come first, and be followed by the associated text, as shown in Figure 1:
<input type="checkbox" name="chknewsletter"
    id="chknewsletter" value="newsletter-opt-in"/>
  <label for="chknewsletter">Send me the monthly
      newsletter</label>
Figure 1. A checked (or ticked) checkbox A checked checkbox
"file"
This input type is used for file uploads. When the attribute is set to "file", two controls appear in the browser: a field that looks similar to a text input, and a button control that’s labeled Browse…. The text that appears on this button can’t be changed, and a file upload control is generally difficult to style with CSS. The file upload control has an optional attribute, accept, which is used to define the kinds of files that may be uploaded.

Figure 2 shows the rendering of the below markup, which creates a file upload control:

<input type="file" name="picture" id="picture"
    accept="image/jpeg, image/gif"/>
Figure 2. A file upload control File upload control
"hidden"
A hidden form input is one that, though it doesn’t appear on the page, can be used for storing a value. The value in a hidden field may be set at page-load time (it may be written using server-side scripting, as in the example below), or it may be entered or changed dynamically, via JavaScript.

Here’s an example in which the "hidden" input element obtains its value from a PHP variable called $strCustomerId:

<input type="hidden" name="hdnCustId"
    value="<?php echo $strCustomerId; ?>"/>
"image"
The image input type is usually used in place of a standard submit button, which may be a bit boring and conservative for your form design (or perhaps your marketing department is demanding something a little more “on brand”). In some cases, you could instead use a standard submit button and style it accordingly with CSS (background color, font style etc), but the amount of control you have in styling submit buttons depends on the browser (Safari on Mac being a case in point). But when the CSS-styled submit just isn’t cutting it, you may need to use an input of type "image". When using an input of type "image", you’ll also need to specify a src (where the image can be found) and an alt attribute (alternative text for the image, in case it’s missing or cannot be viewed for some other reason). Finally, when using this type of input, not only is this changing how the control looks to the user, it’s also passing through additional information to the server about where on the image the user clicks (with x,y co-ordinates like an image map), should that information be useful or critical to how you process the form as a result.
<input type="image" src="submit.jpg"
    alt="Submit your details"/>
"password"
The password field is almost identical to the standard text input:
<input type="password" name="pin" id="pin"
    maxlength="4" size="6"/>
The password input has exactly the same set of attributes as the text input, but differs visually in that characters entered in this type of field are masked in the browser, so that entered characters appear as asterisks or blobs, as shown in Figure 3.
Figure 3. A masked password field A masked password field
"radio"
The "radio" button control is arguably the most complex type of input control. To explain how this control works, it’s worth thinking about the origin of its name. In old-fashioned radio sets, tuning between stations wasn’t achieved by using the “scan” facility, or even rotating a dial. Rather, a series of buttons that were linked to a handful of radio stations could be chosen, one at a time—pressing one button in the range would cause any other button to pop out. The same effect is in play here. Only one control can be selected from a range, and if you select another, the previously selected input is deselected. For this control to work, though, each radio button in the range that you want users to choose from must have the same name attribute, as shown below. With a radio input, the control should come first, followed by the associated text:
<div><input type="radio" name="station" id="rad1"
    value="Radio 1"/> <label for="rad1">Radio 1</label></div>
<div><input type="radio" name="station" id="rad2"
    value="Radio 2"/> <label for="rad2">Radio 2</label></div>
<div><input type="radio" name="station" id="rad3"
    value="XFM"/> <label for="rad3">XFM</label></div>
<div><input type="radio" name="station" id="rad4"
    value="4Music"/> <label for="rad4">4Music</label></div>

The browser representation is shown in Figure 4.

Figure 4. Radio buttons Radio buttons
Because each control has the same name (in this case, "station"), only one can be picked from the list. The value for each control differs, though, so if users chose "XFM" as their favorite radio station in the example above, that would be the value associated with the field name of "station". Also note that, unlike all the other form markup examples, the name and id values differ for this type of control. The id is used for the purposes of linking the control to its label text, and must be unique.
"reset"
The "reset" input is visually similar to the "button" and "submit" types—it’s like a button control that can be clicked on or pressed, and accepts no data from the user. However, a reset control is a very destructive control to introduce to a web page, as pressing it will clear all the data already entered into the form in which the reset button resides, usually causing a fair amount of user rage! While the use of this control constitutes perfectly valid HTML, it’s used less and less these days, as it’s too easy for users to accidentally action the reset button with either a mouse click or while tabbing through the page with the keyboard. If you do feel that a "reset" button is warranted, consider adding some JavaScript to the page—something that can double-check the pressing of the button with a message that asks, “Are you sure you want to clear everything and start again?” However, it’s probably best to avoid this input, letting users easily refresh or reload a page to start again, if they want to. The markup below shows a reset button:
<input type="reset" name="cmdReset" id="cmdReset"
    value="Clear form data"/>
"submit"
This is the magic button—the one that users press to send all the form data they’ve entered. Once it’s clicked, there’s no going back! The "submit" input displays the text that you specify in the value attribute, but if no value is specified, the button face will simply display the word Submit. The markup below creates a submit button that displays the words Send this Application:
<input type="submit" name="cmdSubmit" id="cmdSubmit"
    value="Send this application"/>
"text"
This is the most common kind of input that you’ll encounter on the Web, and that you’ll need most often as you’re building your own forms. The "text" input creates a single-line box that the user can enter text into, and has a number of attributes, such as size, maxlength, disabled, readonly, name, and tabindex.

Example

The type is set to "text" for this input:

<input type="text" name="txtsearch" id="txtsearch" size="20"/>

Value

The possible values for type include "button", "checkbox", "file", "hidden", "image", "password", "radio", "reset", "submit", and "text".

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

Related Products