Forms: other types of field

 

The first forms tutorial was mainly about getting started and the <INPUT> field. In this one we're going to learn about other fields, and a few tricks.

The <TEXTAREA> field

If you want a one-line text box, you use <INPUT type="text">. If you want a multiple-line box, you use
<TEXTAREA rows=number cols=characters></TEXTAREA>
For instance: <TEXTAREA rows=3 cols=60></TEXTAREA> produces:

Please enter your comments:

The field should have a name, of course, but there's no "value" attribute. If you want text to appear in the box, you write it between the <TEXTAREA> and the </TEXTAREA> tags.For instance:
<TEXTAREA rows=3 cols=60>This will appear in the box</TEXTAREA> produces:

The size of the box doesn't limit the user: if s/he types longer lines that the width of the box, they will scroll sideways; and if s/he types more lines than the height of the box, they will scroll vertically.

 

The <SELECT> field

This gives you a drop-down menu, or scrollable box, depending on how you define it. Basically it's rather like a list: instead of <OL> or <UL> you use <SELECT>, and instead of <LI> you use <OPTION>. For example:

<SELECT size=3 multiple>
<OPTION selected>Apples
<OPTION>Bananas
<OPTION>Cherries
<OPTION>Strawberries
</SELECT>

This gives you a 4-line scrollable box, of which 3 lines are visible (that's the "size=3"), with a different fruit on each line. You can choose more than one line (that's the "multiple" attribute. If you leave it out, the user can only choose one line).The first line, "Apples" is pre-selected, but the user can change the selection by clicking a different line, or add to the current selection by shift-clicking another line or lines. This menu looks like this:

 

Using a Form to Create a Custom Button

Sometimes you want a button that links to a page address when you click it. An easy way to do it is to put it in a form and define the method as "link", like this:

<FORM METHOD="LINK" ACTION="html-res.html">
<INPUT TYPE="submit" VALUE="Web writing resource list">
</FORM>

That looks like this:

You've defined a regular "submit" type button with the text you want on it, but when it's clicked, it sends to the server the request to link to the page whose URL is given in the "action" attribute.

You can't put any other field in the same form. If you want 4 buttons side by side, you have to put each in a separate form. (To align them nicely, put them in a table Each form in a separate cell.)

 

Using a graphics button in a form

If you don't like grey buttons, the easiest way to get colored ones is to make them in a graphics program. The way to use a graphics file in a form instead of a plain grey button is:

<INPUT TYPE="image" SRC="images/bluebutton.gif" HEIGHT="31" WIDTH="141" BORDER=0 ALT="send it in!">

type="image" tells the browser to look for an image file; src= specifies its URL, all the rest is explained in the tutorial on inserting images in pages. The image works as if it were a "submit" button, i.e. type="image" tells the browser: "this is a submit button but use the graphic instead of generating a button yourself".

You end up with:

It will do whatever your form is defined to do. Obviously you can't define two "submit" buttons to do different things in the same form, since the action to be taken when the form is submitted is defined in the <FORM> command, once. So this button will actually do the same as the previous one in this tutorial (link to the list of HTML resources)l. To make it do something different, I would close the previous form and start a new one.

 

Now take a look at some tips on how to design forms for ease of use

 

Back to course entry page

Written by J. Koren for Unesco
©1998