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 behaviour of the input can change dramatically, from a simple text input, a masked password field, to controls such as radio buttons or checkboxes and even images. The various features and usage are detailed in the list below:

• "button" - a simple clickable button that does not actually do anything per se (unlike a submit button that sends the form data to the location defined in the action attribute). The button type of input is usually used along with JavaScript to trigger some kind of behaviour (for example, using a button to open a help page in a new window).

  <input type="button" value="Click me. I basically do nothing" />

• "checkbox" - this type of input is used when the use needs to answer a yes/no type question. There is no way the user can enter any data of their own, it 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). With a checkbox input, the control should come first followed by the associated text, e.g.

  <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, even) checkbox
• "file" - 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 which is labelled ‘Browse’. The text that appears on this button cannot be changed and a file upload control is generally difficult to style with CSS. The file upload control has an optional attribute accept that is used to define what kinds of files may be uploaded.

  <input type="file" name="picture" id="picture"
  accept="image/jpeg, image/gif" />

  Figure 2. A file upload control
• "hidden" - a hidden form input is one that does not appear visually at all but can be used for storing a value in, for whatever reason. The value in a hidden field may be set at page load time (perhaps written in using server-side scripting, as in the example below), or may be entered/changed dynamically via JavaScript.

  <input type="hidden" name="hdnCustId” value="<?php echo $strCustomerId; ?>" />

• "image" - the image input type is 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 are demanding something a little more ‘on-brand’). When using an input of type "image", you will also need to specify a src (where the image can be found) and an alt attribute (alternative text for the image in case it is missing or cannot be viewed for some other reason).

  <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, such that entered characters appear as asterisks or blobs, as shown in #type/fig-masked-password.
  Figure 3. 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 going back to the origin of its name: in old-fashioned radio sets, tuning between stations was not performed by pressing a ‘scan’ button or even rotating a dial, rather a series of buttons that were linked to a handful of radio stations could be chosen, but only 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 to work, though, the range of radio buttons that you want to flip between must all have the same name attribute, as shown below (using an example of picking a radio station, how appropriate!). With a radio input, the control should come first followed by the associated text, e.g:

  <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>
  

  Figure 4. 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 in the example above, if the user chose "XFM" as their favourite radio station, that would be the value associated with the field name of "station". Also note that unlike all the other form markup examples, for this type of control the name and id values differ. The id is used for the purposes of linking the control to its label text, and must be unique.
• "reset" - The "reset" input is similar to the "button" and "submit" types, at least it is visually - a button control that can be clicked/pressed, and no data is entered by the user. However, a reset control is a very destructive control to introduce to a web page, as pressing it will clear all data already entered in the form that the reset button resides in, usually causing a fair amount of expletives to follow. While it may be perfectly valid HTML to use this control, it is used less and less these days as it is all too easy to accidentally action one of these buttons, either by a mouse click or while tabbing through with the keyboard. If you do feel the presence of a "reset" is warranted, it would be advisable to add some JavaScript in too, something that is able to double check with an “Are you sure you want to clear all data and start again?” type message. However, it is probably best not used at all (the user can easily refresh/reload a page to start again, if they so wish).

  <input type="reset" name="cmdReset” id="cmdReset"
  value="Clear form data" />

• "submit" - This is the ‘magic button’, the one that you press to send all the form data that you have entered. Once clicked, there’s no going back! The "submit" input appears with the text that you specify in the value attribute, but if no value is specified, it will simply show on the button face as ‘Submit’.

  <input type="submit" name="cmdSubmit” id="cmdSubmit"
  value="Send this application" />

• "text" - The most common kind of input that you will encounter on the web (and no doubt need when building your own forms). The "text" input creates a single-line box that the user can enter characters into, and has a number of attributes, such as size, maxlength, disabled, readonly, name and tabindex.