Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Form Controls

Last updated Oct 17, 2003.

By Molly Holzschlag

Controls define the kind of input option that will appear onscreen. Controls are produced in HTML and XHTML syntactically an attribute value and are placed along with the name attribute within an input element string. This in turn alerts the browser to display the desired control.

The controls available include:

  • text. Creates an input text box that consists of a single line. Width of the box is controlled by the size attribute.

  • password. Exactly like text, except the characters input by the site visitor will reflect back as asterisks. No additional security is added by using this option, it's merely a display feature.

  • checkbox. Creates a box that can be checked. You can have multiple check boxes in a selection, and all of them may be checked if applicable.

  • radio. This creates a radio button. You can have as many radio buttons as you want in a given subject area, but only one may be selected.

  • submit. This control creates the familiar "Submit" button, which appears as a raised button with a push-button look in visual browsers. The label on the control can be customized using the value attribute.

  • reset. The same in appearance and customization features as submit, this control will return the form to the original values it had when loaded. This could be a completely clear form, or if the form was prepopulated with information, using reset will return the form to those values.

  • file. This creates a file selection control. The site visitor can then upload a file from the local hard drive to the server.

  • hidden. Hidden controls are those that don't render in the browser. They are used to insert information for the recipient of the form data. For example, this can be used to send additional information to a form processing script, such as script version information, saving information from a prior form, and so on. However, "hidden" in this context only means that the information is not rendered. It is still viewable in the source.

  • image. Allows for the insertion of a custom image. This gives the designer the ability to use a graphic for submit and reset instead of the default option.

  • button. Creates a push button. These must be associated with a script in order to work because there is no built-in action for them.

Listing 1 shows a working form using a variety of elements and controls.

Listing 1 A Working Form in XHTML

<form method="post" action="/cgi-bin/mailscript">

First Name: <input type="text" name="firstname" size="25" maxlength="0" />
<br />

Last Name: <input type="text" name="lastname" size="25" maxlength="0" />
<br />

Email: <input type="text" name="email" size="25" maxlength="0" />

<p>Favorite Activity:</p>

<p>Reading <input type="checkbox" name="reading" /></p>


<p>Listening to music <input type="checkbox" name="music" checked="checked" /></p>


<p>Gender:</p>

<p><input type="radio" name="gender" value="male" /> Male<br />
<input type="radio" name="gender" value="female" checked="checked" />Female<br />
<input type="radio" name="gender " value="undisclosed" />Prefer not to say</p>

State:
<select>
<option value="arizona">Arizona</option>
<option value="california">California</option>
<option value="nevada" selected="selected">Nevada</option>
</select>

<p>Do you have additional concerns?</p>

<textarea rows="5" cols="25">

</textarea>

<input type="submit" value="send it!" />

<input type="reset" value="do it over" />

</form>

If you want to use an image to customize your Submit and Reset buttons, you can do so by first creating the image and then following one of two options.

The first option is to insert the image directly into the Submit or Reset control, as follows:

<input type="image" src="images/go.gif" width="50" height="25" alt="go"
value="submit" />

This results in a seamless look, with the button fitting into the design of the page.

The second option is to use the button element, which is a non-empty element, containing some text description. This sets the image into the Submit button:

<button name="submit" value="submit" type="submit">
Send <img src="images/go.gif" width="50" height="25" alt="go"></button>

NOTE

The second option is rarely used.