Building web pages with XHTML 1.1

Creates a field where the user can enter one line of text from the keyboard. Use the size attribute to specify the size of the field, in characters; the default is 20. Use the maxlength attribute if you want to limit how much text the user can enter.

Here's an example of a text field and its associated label. See Section 14.2, “The label element: Label a control”.

  <input type="text" name="fave-color" id="fave-text"/>
  <label for="fave-text">What is your favorite color?</label>

A password field works the same as a text field, except that each character entered by the user is displayed as “*”, so that no one looking at the browser window can see what text has been entered. An example:

  <input type="password" name="pwd" id="pwd-field"/>
  <label for="pwd-field">Enter your secret name</label>

Creates an unlabeled checkbox. If the control has a value attribute, that value is passed to the handler script as the value for this control's name. If no value is given, the value “on” will be sent to the handler.

If the control has checked='checked', the checkbox will be set (on) initially. Otherwise, it will initially be cleared (off).

Here is an example:

    <input type="checkbox" name="fish-license" id="eric"/>
    <label for="eric">Does your fish have a license?</label>

Radiobuttons allow the user to select one of a set of mutually exclusive choices. All the radiobuttons in a set have the same name attribute, but each has a different value attribute. When the form is submitted, the value of the currently selected radiobutton will be sent to the handler script.

You should specify checked='checked' for one of the radiobuttons in a set; that radiobutton will be set initially.

Here's an example of a set of three radiobuttons.

The label above the radiobuttons is ordinary text. Note that each input element has the same control name (name attribute). Each radiobutton and its label are placed on a separate line by wrapping them inside a div element.

  Who should investigate the moaning noises?
  <div>
    <input type="radio" name="mystery" id="velma" value="Velma"
        checked="checked" />
    <label for="velma">Velma</label>
  </div>
  <div>
    <input type="radio" name="mystery" id="shag" value="Shaggy" />
    <label for="shag">Shaggy</label>
  </div>
  <div>
    <input type="radio" name="mystery" id="scoob" value="Scooby" />
    <label for="scoob">Scooby</label>
  </div>

This control places two elements on a form: a text field, and a Browse button. The user can upload a file by clicking on the button and navigating to the file using his browser's customary file-browser facility.

Here is an example:

  <input type="file" name="user-file"/>

This control creates a Submit button on the form. Use the value attribute to specify the text that will appear on the button; the default text label is “Submit”.

For an example, see Section 14.1.8, “The reset control: Form clear button”.

An input element with a type='image' attribute creates a graphic Submit button. The src attribute points to the image file.

When the user clicks on this image, the form is submitted, and two name/value pairs are sent to the handler script. The first name/value pair contains the x coordinate where the user clicked on the image, relative to the top left corner; the name for this coordinate is the name from the name attribute with “.x” appended.

Similarly, the y coordinate where the user clicked is sent to the handler; the name is the control name with “.y” appended.

For example, suppose an element is defined like this:

  <input type='image' name='target' src='bullseye.png'/>

The graphic bullseye.png is displayed in the form.

If the user were to click on that graphic at a spot that is 39 pixels from the left side of the graphic, and 7 pixels from the top, the handler script would receive two name/value pairs: target.x=39 and target.y=7.

Creates a Reset button on the form. Use the value attribute to specify the text that will appear on the button; the default text label is “Reset”.

The purpose of a Reset button is to restore the controls on the form to the values they have when the form is first displayed. In particular, a text control will have its value attribute filled in (if it has one); any radiobutton or checkbox with the checked='checked' attribute will be set, and others cleared; and so on.

Here is an example of a submit button and a reset button packed together on the same line by placing them inside a div element.

  <div>
    <input type="submit" value="Send"/>
    <input type="reset" value="Clear"/>
  </div>

You can pass data to the handler script without displaying it on the form by using an input element with type='hidden'. Use the value attribute to specify the data to be passed to the handler script.