Click to skip over navigation

lecture menu

virtual lectures

handout

lecture intro

ordinary forms

creative forms

form principles

input types I you are here

input types II

accessibility

styling

mailto processing

CGI

conclusion

  

lecture 9: input types I

<< previous slide

return to lesson 9 index

next slide >>

Most form elements are placed on the page by means of the <input> tag. (This is one of those tags which does not format text so previously did not need a closing tag - in XHTML 1.0 remember to put the / at the end of the tag, though.) <input> can render a pretty wide variety of box types, and this is controlled by means of the attribute, type.

This and the next slide demonstrate some of the general principles of input types, but are not a comprehensive list. The handout and the online teaching materials give all the details you will need, including how you can use attributes to control the appearance of the element.

1. free-form elements

These are elements into which the user can type whatever they want. Their shared characteristic is that they do not need the value attribute. The form elements in this category are text boxes, password boxes and text area tags. (Remember - details are on the handout.) The box below is a password box: try seeing what happens when you type something into it.


The tag for this element is:

<input type=password" name="box1" size="15" />

No value is needed - it will be assigned as whatever the visitor types.

2. choosing selections

If you want to restrict the inputs visitors can make, you can get them to select one or more options from a list. There are basically three form elements which you can use to do this: radio boxes, selection boxes and check boxes. The examples below are radio boxes: you can see how you are only allowed to click one of these. (If you want to allow more than one choice, use check boxes - see the handout or teaching materials.)

What sex are you?

Female
Male
Undecided

Have a look at the last of these three tags:

Undecided <input type="radio" name="box2" value="x" />

The value attribute is now essential. The visitor cannot type whatever they want, so we need to decide what value to assign to their choice (or, more specifically, to the named element "box2"). You will see from the handout that something similar is done with each of the elements in this category.



<< previous slide

return to lesson 9 index

next slide >>