- Introduction
- Getting Started
- Creating Forms with HTML Tags
- Controls: Names, Values, and Labels
- Design Heuristics for Great-Looking Forms
- Glossary
Creating Forms with HTML Tags
If you've registered or purchased something on a web site, chances are that you used an electronic form. Forms get information from your users, and creating one is almost as simple as filling one in.
It all starts with HTML tags, which are simple software codes that tell a browser what to do. In general, HTML tags are built in pairs, with a "beginning" tag and an "ending" tag, both enclosed in angle brackets (<>), that tell the browser when to start and stop doing something. The ending tag begins with a slash (/). For example, if you want a browser to display some text in bold, you might use tags like these:
<b>word</b>
The <b> tag tells the browser to start boldfacing; the </b> tag tells it to stop. It's important to note several issues:
Not all tags work in matched pairs. Some don't require an ending tag, and for some the beginning tag and the ending tag differ slightly.
For the most common formatting, there are several different tag pairs that can do the trick. For example, instead of <b></b> tags to boldface text, you might use the <strong></strong> tags. Instead of using <i></i> tags to italicize text, you might use <emphasis></emphasis>.
Tags are not case sensitive. <FORM> is the same as <form> or even <FoRm> or <fORm>. We recommend staying with uppercase or lowercase instead of mixing them. The advantage of lowercase is that it's fewer keystrokes because you don't have to press the Shift or Caps Lock key; the advantage of uppercase is that it sticks out a bit more when you're trying to find tags in a long HTML file.
Netscape and Internet Explorer may display the same HTML page quite differently. Be sure to test your web pages with multiple browsers.
The monitor, display card, and computer settings also have an influence on what's displayed by your web page. If possible, test your web pages on various computers.
When building web pages with HTML, you have only limited control of what the browser will do. You can tell the browser to display text in a certain size or color, for example, but older browsers that don't know any fancy tags you're using will just ignore them.
The <FORM> Tag
All forms begin with a <FORM> tag and end with a </FORM> tag.
The <FORM> tag has two important parameters: METHOD and ACTION. Briefly, METHOD specifies how the form should send the user's information to a script, and ACTION specifies the name of the script that handles the user's information. Let's look at each of the parameters in a little more detail.
The METHOD Parameter
The METHOD parameter can take one of two values, GET or POST. We'll always use METHOD=POST in our examples. The difference between METHOD=POST and METHOD=GET is best illustrated with an example.
Here's a link to an article on the InformIT web site:
http://www.informit.com/content/index.asp?
product_id={0DA0D428-36B3-4422-AB17-243C6662D268}
&t={6373D50E-EF0B-4084-B8A7-032653E262E2}
&n={A072A0CD-7C2C-4B7F-B8B2-CC9D4C3A6DD5}
&p={0DA0D428-36B3-4422-AB17-243C6662D268}
NOTE
A link won't work unless it's a solid line of instructions to the browser—no matter how many characters long it must be to get you there. Obviously, we couldn't fit this entire link on one line of text above, so we've inserted some "illegal" line breaks so you can examine the link in detail. The link above won't work, but this one will. Click it if you want to see how the link will look in the Address or Location box of your browser.
Ever wonder what all those ampersands (&) and equal signs (=) in a link are for? Everything after the question mark (?) in the first line above is data that the script (index.asp) uses; the data is passed in the Address or Location box. Similarly, if you use METHOD=GET, when the user clicks the form's submit button, the information he or she typed into the form will show up in the browser's Address or Location box. There are some advantages to doing this, which we won't get into. Suffice it to say that if you use METHOD=POST, the user won't see "junk" in the address line, so we'll always use METHOD=POST in our forms.
The ACTION Parameter
Forms pass the information your user enters to a script. Your web site can have many scripts, so how does the form know where to send your user's information? The ACTION parameter provides the answer. You set the value of ACTION to the name of the script that will handle the user's information. For example, in the next tutorial, we'll create an Active Server Pages script called insert.asp to store the guest book information that the user enters into the database we created in the second tutorial. To set the ACTION parameter to insert.asp, you simply put the name of the script between double quotes:
ACTION="insert.asp"
Putting It All Together: The Form with Parameters
The complete form tag with parameters looks like this:
<FORM METHOD=POST ACTION="script_name"> </FORM>
Replace script_name with the actual name of your script. As mentioned, in our guest book example, the name of our script is insert.asp, so our form command looks like this:
<FORM METHOD=POST ACTION="insert.asp"> </FORM>
Let's add this code to the guestbook.html file in Notepad to see what happens:
First, select and delete the random phrase you typed earlier (in our example, it was The quick brown fox jumped over the lazy dog).
-
Type the form command above into Notepad (see Figure 12).
Save the file.
-
View the updated guestbook.html in your browser by clicking the browser's Refresh or Reload button or by reentering the address of the file in the Address or Location bar. Figure 13 shows the result.
){kind=link}
Figure 12 Notepad: Entering <FORM></FORM> tags.
){kind=link}
Figure 13 Browser: Hmm. Looks pretty empty, doesn't it?
No, your browser isn't broken. You shouldn't see anything except a blank screen. To see something, you need to place controls inside the <FORM>...</FORM> tags.
Before we talk about control specifics, let's look at some general concepts that apply to all controls.