Forms: INPUT, Part I

This is where we start on the real HTML markup for forms. (Remember, this is only half the story-- the other half is the CGI program.) We've already seen how the <FORM> tag works. Now we start creating ways for the user to enter actual data.

INPUT

The most commonly used form tag is INPUT. This is because there are several types of INPUT, like open text inputs, radio buttons, and checkboxes. The most basic version of the tag is <INPUT>, but like <IMG>, various attributes are required to make it work. The type of input is specified using the TYPE attribute (makes sense, yes?). We'll start with text inputs.

Text

A text input is simply a box in which anything can be typed-- letters, numbers, or anything else-- via the keyboard. In most browsers, the box is twenty characters wide, but this can vary. The markup and its effect:

   Markup:   <INPUT type="text" name="socsec">

Result:   

I chose the name of the input for a reason. "socsec" is short for "Social Security," as in the oh-so-famous and theoretically private number. Now, a twenty-character input is a little large for a nine-digit number (ignore the dashes). Wouldn't it be nice to have an input which is nine characters wide?

Fortunately, it's quite possible. This is accomplished using the SIZE attribute. The value of SIZE is a positive integer and translates into the width of the input box. This width is expressed as a number of characters. Therefore, SIZE=9 means the input will be nine characters wide.

   Markup:   <INPUT type="text" name="socsec" size=9>

Result:   

This causes the input box to be nine characters wide-- exactly what we needed. This does not, however, restrict the number of characters which can be input. The user can keep typing past nine characters, so this still isn't a very good way of getting a Social Security number.

Happily enough, you can limit the number of characters which may be input by using the MAXLENGTH attribute. The value of MAXLENGTH is expressed as a number of characters, just as SIZE is. So, let's continue with the Social Security input example. We not only want the box to be nine characters wide, but the maximum number of characters which can be input to also be nine. The tag and its resulting input box would be:

   Markup:   <INPUT type="text" name="socsec" size=9 maxlength=9>

Result:   

As you can see, this creates an input field nine characters wide into which no more than nine characters may be input.

You should keep in mind that maxlength and size do not have to be equal. They can be any positive integer, and either can be larger or smaller than the other. Therefore, you could create a small input field that will take a large number of characters, or a wide field which allows only a few characters. It's completely up to you, although it is usually a good idea to keep the values at least close to each other.

Here's a further example:

   Markup:   <INPUT type="text" name="socsec" size=9 maxlength=11>

Result:   

In this case, the Social Security input field is still nine characters wide, but the user can enter up to eleven characters. The user may now enter the dashes if he wants to, although entering the number without dashes will visually fill the input field.

There is still one more thing which would make this the ideal input for a Social Security number, and that's the ability to restrict the characters which can be input. In our example case, we would like to allow only numbers to be input by the user, since Social Security numbers are just that-- numbers.

How is this done in HTML? It isn't. Sorry. There is no way to specify that only certain characters may be input. Anything the user can type on his keyboard will go into a text input. If a given input should have only certain characters, then the back-end CGI program will have to check for them and return any error messages necessary.

Password

One obvious drawback of the text input is its openness. Suppose you needed to ask for a password (or similarly sensitive piece of information, like the user's weight). If you use an <INPUT type="text"> tag, anyone sitting next to or behind the user will be able to read what the user types as it appears on the screen. This is what is typically referred to as Not a Good Thing.

There is a solution to this problem, in the form of a new type of input. This is the password input. Password inputs are strikingly similar to text inputs, in that they accept any input from the keyboard, they can have SIZE and MAXLENGTH attributes, and (as always) they require names. The difference is that when the user types in a password field, the computer displays bullets or asterisks instead of the characters being typed. Thus, the user's password is kept safe from the prying eyes of his roommate, spouse, boss, or whomever.

A typical password input would look like this:

   Markup:   <INPUT type="password" name="pwd" size=15 maxlength=15>

Result:   

Be warned, however: this 'visual security' is the furthest extent of the security afforded by the password input. There is absolutely no encryption of any kind whatsoever. Information entered into a password input is still sent to the CGI program 'in the clear;' that is, as plain text. This makes it vulnerable to security attacks such as packet sniffing, which are uncommon but not unheard of.

The only way to ensure the safety of information entered into a password field is to send it over a connection to a secure Web server, in which case all of the data entered into the form-- not just the password field-- is encrypted.

So What Else?

Text inputs are nice for certain kinds of questions, but sometimes, as with multiple-choice questions, you want to provide a limited number of responses. Providing a listing of all the answers and expecting the user to type in one of them is obviously a bit silly. It's a good thing that there are tags to make such methods unnecessary. The next chapter will look at these INPUT types.

Chapter 5 Quiz
Next-- Chapter 6: Forms: INPUT, Part II
Previous -- Chapter 4: Forms Theory
Table of Contents
Tutorial Glossary
Tutorial Index
The HTML Laboratory