types of input

There are many different types of form input - eleven, to be precise. Four of these create different types of form button. The rest are covered below. Almost all use the <input> tag, though there is one exception as we'll see. As <input> is placing an object on the page (namely the form box) and not formatting text, it tends to take the single slash ending rather than the closing tag (that is, <input [attributes] />). You must specify for yourself any caption that you want to place beside the box to guide the user of your form. (See the page about the <label> tag for more information.)

The form below should give you some idea of how most of the input types can be used. Have a look at it, fill it in and see what happens when you press the submit button (once again though the destination of this form is not a real e-mail address). Once you've done that, read on and we will look at each element in turn. I stress again, however, that these tags do not do any real work with the form, they are just appearance tags. Form processing is dealt with later.

Text and Password Boxes

These are the simplest form elements. The visitor to your page can basically type what they want into the box. The HTML for the text box looks like this (note that all the code given on this page is slightly simplified):

<p><i>What is your name?</i><br>
<input type="text" name="yourname" size="15" maxlength="30" />

The password box is exactly the same in HTML terms, though the type is now equal to "password". The difference is, as I'm sure you've realised, that the input is hidden by asterisks (something you should be familiar with from logging on to the university system, or using e-commerce sites). In both cases, all we have to define is the name of this form element. There is no compulsory value attribute, because it will be set to whatever the user types in. However, you can still set a value which will appear as text in the box prior to the user's entry; you might use this to suggest a particular input. Some of the other forms used through this lesson have a preset value in this way.

Note the other two optional attributes: size and maxlength. size defines the length of the field on the screen, and maxlength the maximum number of characters you can enter (if you type more than the size, it will simply scroll along).

There is a kind of alternative tag here, <textarea>. In practice it works just the same as the type="text" option, but does allow you to specify the size of the box more precisely. It works best with large text entries. An example was seen on the example of multipart images so I won't repeat it here.

Back to the form

Radio boxes

Radio boxes are used when you have two or more mutually exclusive options. As you'll have noticed when you filled in the form above, you can't choose both options. The code for these boxes looks like this:

<i>What is your Sex?</i>
    <input type="radio" name="mf" value="f" />Female
    <input type="radio" name="mf" value="m" />Male

Radio boxes now require the value attribute. Because nothing is actually being typed into a radio box you need tell the browser what a "mark" in a particular box represents. So if I were to type 'Drew' into the text box above, the form element named yourname would return 'Drew' when it is submitted, but when I click on the 'Male' button in the radio boxes, the form element mf returns 'm', as that is the value associated with that button by the code above. If you're still unsure about this return to the page on name/value pairs and re-read it.

Theoretically there's no reason why the different elements of a radio box need to be next to each other, as it is their shared names which bring them into association, not physical proximity. But it would be rather confusing for the user if they were not close together. Note that you can also have any number of radio boxes, you are not limited to two. However many you have, though, you can always only click one.

Back to the form

Selection boxes

In HTML these aren't big boxes of chocolates you get in your Xmas stocking. Rather, they're the next type of form element, and the exception to the rule that all form input is done with <input> tags. Instead, there are two other tags working together, the <select> tag and the <option> tag. They work in similar fashion to the list tags <ul> and <li> respectively. <select> defines the start and end of the list of options, and it is in this tag that the name of this form element is defined. <option> then defines each particular element. You will always need the closing <select> tag - and now that XHTML 1.0 has become much stricter about this sort of thing, you must always close your <option> tags as well.

<p>What do you think of this website?</p>
<select name="what">
  <option value="Excellent">Excellent</option>
  <option value="Vgood">Very Good</option>
  <option value="Good">Good</option>
  <option value="OK" selected="selected">OK</option>
  <option value="difficult">OK but hard to follow</option>
  <option value="rubbish">No use at all</option>
</select>

The <option> tags contain the values, and when you select one, you will "associate" the chosen value with the name defined in the <select> tag. Be sure you are clear about the distinction between the value returned by the form, and the text which actually appears in the selection box: as you'll notice, they do not have to be the same. Usually you want short, snappy values as this makes processing a lot easier, so see how "OK but hard to follow" (which is descriptive for the user) has been reduced down to "difficult" (which gets sent back to the server when the form is submitted). Notice also the use of the selected attribute, which defines the option that appears selected when the page is first loaded, in this case "OK".

<select name="leedsarea" size="4" multiple="multiple">

Back to the form

Check boxes

At first glance, check boxes may look more complicated than some other elements, as the checkboxes in the example are included in amongst many table tags. But if you look closely they are not that difficult to work out. This is the code:

<p>Which of these ACOM options have you also taken?</p>
<table>
  <tr>
    <td>Wordprocessing Techniques</td>
    <td><input type="checkbox" name="options" value="wpt" /></td>
  </tr>
  <tr>
    <td>Data Handling and Presentation</td>
    <td><input type="checkbox" name="options" value="dhp" /></td>
  </tr>
  <tr>
    <td>Graphics</td>
    <td><input type="checkbox" name="options" value="gfx" /></td>
  </tr>
  <tr>
    <td>Relational Databases</td>
    <td><input type="checkbox" name="options" value="rdb" /></td>
  </tr>
  <tr>
    <td>IT, Politics and Society</td>
    <td><input type="checkbox" name="options" value="ips" /></td>
  </tr>
</table>

The key difference between the check box and the radio box is that the check box options are not mutually exclusive. That is, you can tick none, one, two or indeed any number of them. As with radio buttons and text boxes, check boxes are specified by an <input> tag. You'll have noticed that all of the checkboxes above have the same name, just different values. Have a look at the page on form processing to see how these turn out, when submitted.

If you wish, you can use the additional attribute checked="checked" to state that a particular checkbox (or radio button) should be selected when the page in question is loaded. This acts rather like the selected="selected" attribute for selection boxes. You might also want to use check boxes when there is just one box to be checked (e.g., "Tick here to join our mailing list"). This is perfectly acceptable; just assign it a unique name. Better to use a check box than a radio box in this case.

Back to the form

File selection box

That's it for the input types specified on the form above, but there are a couple of others you should know about. The first is a way to get users to attach a file to the form. If you're going to include the following input type you need to make a change to your <form> tag; the enctype attribute needs to be "multi-part/form-data rather than "text/plain". The <input> tag then looks like this:

<p>Please attach your CV file to the form</p>
<input type="file" size="15" />

The key difference, as you can see, is the addition of a "browse" button. If you click on that button you'll see that "pseudo-Explorer" is opened up, enabling you to find the file you want to attach. You can also specify size and maxlength as for the text box, only it's not really a good idea to specify maxlength. You don't know how convoluted a given user's directory structure is going to be; you might keep all your files in neat little structures like M:\www\cvfile.doc but others might have much longer file pathnames. size only restricts the size of the box on the screen, so you're safe with that.

One word of warning. If you're going to be accepting files from the general public, get yourself a good virus checker. I'll say no more.

Back to the top

Hidden elements

This might seem rather pointless, but there might be technical reasons behind its use. An <input> tag with type="hidden" does not appear on the screen, but sends its name/value pair back with the rest of the form anyway. Because there's no on-screen entry, the user of the form can't change the value. If you used this box it would be to send some kind of "control" information back with the rest of the form - for instance, if you have similar forms on different web sites, you might send back some info which says which site this particular form was used on.

<input type="hidden" name="formorigin" value="HTML site" />

Back to the top

Back to the menu for lesson 9