Note: This is also available as a functionality demo, so is left relatively unformatted here.
If you want to give your readers the ability to interact with your site – to send information to it rather than simply receive information from it – you’ll need to move beyond basic HTML. Forms are used to gather data from your users. When you use a search engine or enter a login name and password, you’ve seen a form in action.
A form is simply a block of HTML that can receive and act on data entered or chosen by a user. The ways of gathering that information are called inputs. An input can be a text box where visitors type their name or a checkbox used to select a particular option.
Think of a form as the first runner in a relay race. It hands off the information it’s gathered to a second runner, a [script] or program that processes that information. Perhaps it’s searching for key words or authenticating a user’s login name and password. Once the script is finished, it passes its results to the third runner, another Web page, where those results are displayed.
Suppose you want to create a login form. The form will need three parts: a text box for users to enter a login name, another text box for a password and a “submit” button to send the information off for processing.
The <form> and </form> tags create the container that wraps around and joins all parts of a form.
Troubleshooting
The form tags, by themselves, have no visible effect on a Web page except for a blank line they create above and below the form. Because a form is invisible on a Web page, it’s easy to forget to add the closing </form> tag or to put multiple sets of <form> and </form> tags where you need only one. Check first for these errors if you ever have trouble with a form you’ve created.
The <form> tag needs several attributes. Let’s go through them:
- Action. This attribute is a URL of the program that will receive and process the data in the form. Let’s suppose you have a short program contained in a file named “login.php,” that will check a user’s login name and password against a database of existing user information. It’s sitting in the “scripts” directory on our Web server. In this case, our action attribute would be:
action="http://mysite.com/scripts/login.php"
- Method. This attribute controls how the information will be processed. There are two types of methods — get and post. The get method is faster and often used for short forms containing information that can be shared and reproduced, such as the results of a search. The post method is slower, more secure, and is used for tasks that happen once or contain a lot of information, such as submitting a comment or a login name. If you’re not sure which method to use, you may want to [hire a programmer] to write your forms for you. To create a login form, you’ll want to keep the information secure and use post as your method. The HTML code for your form thus far should look like this:
<form action="http://mysite.com/scripts/login.php" method="post"></form>
The <input /> tag
Now, it’s time to create the inputs that will collect information from the user. The basic input tag is a stand-alone tag, and looks like this: <input />
Every input tag must have two attributes:
- Name. This is a label that your script will expect you to use to identify each input in a form. Different programs will expect fields with certain names, so you’ll need to know in advance which labels your script will expect to discern, for example, a user’s login name from a password.
- Type. The type attribute determines the shape of the form on your Web site and the kind of information it collects. Type attributes will allow you to create such features as text boxes, checkboxes, pull-down menus and radio buttons.
Now, let’s review the different types of input tags.
The Input Tag: Text Fields
Text boxes, with a type attribute of “text,” let users enter short words and phrases, such as a first or last name, a login name or a password.
Typing in this:
<input type="text" />
Will create a text box like this:
Don’t forget to label this textbox with a name variable:
<input type="text" name="login" />
You can make the box longer or shorter by specifying its size attribute. The number in the size attribute is the number of characters that will fit in the text box. So to create a box that will handle a name with 25 letters, you’d specify this:
<input type="text" name="login" size="25" />
If you want users to see some kind of text in the box, specify that text with a value attribute:
<input type="text" name="login" size="25" value="Enter login name here" />
This will create a text box, like this, containing the words, “Enter login name here.” Users can then erase those words and type in their own text.
The Input Tag: Password Fields
To create a text field that automatically hides what’s being typed in, which is the standard for password fields, use “password” instead of “text” as your type attribute:
<input type="password" name="password" size="16" />
The result will look just like a text field, but anything typed into it will show up as asterisks (********). No one will be able to copy its contents and paste them somewhere else, either.
The Input Tag: Submit Buttons
You now have enough input fields to make a login form. Next, you need a way to tell the browser you want to send the form to the server for processing. You do that with a submit button.
Type this:
<input type="submit" />
To create a button that looks like this:
If you have more than one submit button on a form – one near the top of the page and the other at the bottom, for example – you can add a name attribute to distinguish the two:
<input type="submit" name="firstsubmit" />
You can also personalize the submit button with the value attribute. Instead of simply telling users to “Submit,” you can invite them to “Go Ahead” or “Log Me In”:
<input type="submit" value="Log Me In" />
The resulting button will look like this:
Your completed form will now look like this:
<form action="http://mysite.com/scripts/login.php" method="post">
<input type="text" name="login" size="25" value="Enter login name here" />
<input type="password" name="password" size="16" />
<input type="submit" value="Log Me In" />
</form>
Reset Button
There is another type of button called a “Reset” button, but we recommend that you avoid it. Clicking “Reset” will clear all the information the user has entered in the form. It’s easier for a user to go back and delete or correct what they typed instead of resetting the entire form.
Now that you’ve learned the basics, let’s go through some other types of form elements.
The Input Tag: Hidden Field
Sometimes you want to pass information through a form without requiring the user to type it all in. Suppose you’re setting up a form to let a user e-mail a link from your site to a friend. You’ll want the user’s name and e-mail address and the friend’s name and address. But why should the user also have to type in the Web address of the page they want to send? This is where hidden fields come in handy.
Input tags with a type attribute of “hidden” are invisible to your users. Hidden tags don’t need a size attribute, but they will need a name – so that the script processing the form knows what to do with them – and, of course, a value:
<input type="hidden" name="LinkURL" value="http://www.j-learning.org/really_cool_page.html" />
This hidden tag will pass along the Web address of the page to your user’s friend without requiring the user to type in the entire URL.
The Input Tag: Checkboxes
Checkboxes are a way to give your readers a menu of options. The user can choose all the options, none or certain ones.
Suppose you want to offer an option to subscribe to various e-mail newsletters: one for breaking news, one for high school sports, one for education news and one for local weather alerts. Your users don’t have to sign up for any of these newsletters, or, if they wish, they can sign up for all of them. The code to create checkboxes for each of these options would look like this:
Breaking News <input type="checkbox" name="newsletter1" value="breaking_news" />
High School Sports <input type="checkbox" name="newsletter2" value="school_sports" />
Education News <input type="checkbox" name="newsletter3" value="edu_news" />
Weather Alerts <input type="checkbox" name="newsletter4" value="weather" />
On a Web page, that code would create this:
Breaking News
High School Sports
Education News
Weather Alerts
Note that the value attribute for each checkbox is invisible to the user. It’s intended to be seen only by the script that will process the form’s information. To let users know what they’re clicking, you’ll need to accompany each checkbox with text that describes it, as seen above.
Let’s say you want to sign up as many people as possible for your Breaking News e-mail newsletter. You can create a form that pre-checks that option so that your users must uncheck that box to opt out. This is where the checked attribute comes into play:
Breaking News <input type="checkbox" name="newsletter1" value="breaking_news" checked="checked" />
On your Web page, your checkbox for Breaking News will now look like this:
Breaking News
The Label Tag
If you want your Web page to be the Cadillac of Web pages, as accessible as it is well crafted, you should use the label tag in your forms. The simplest way to use it is to wrap the tag around an input field and its corresponding text, like so:
<label> Breaking News <input type="checkbox" name="newsletter1" value="breaking_news" /></label>
In some browsers, the user will now be able to select the “Breaking News” option by clicking either on the words “Breaking News” or the checkbox itself.
When applied to a text field, the label tag has no visible effect for most Web users. But labeling your form elements will help identify parts of a page for blind or disabled people using special “screen reading” browsers.
The Input Tag: Radio buttons
Radio buttons are a variation of checkboxes used when just one option must be selected from a menu of options. Are you male or female? Which age group do you belong to? Radio buttons are input tags with a type attribute of “radio.”
They are different from checkboxes in two ways:
- First, all radio buttons for a given question must have the same name attribute. This is how the browser knows to group the radio buttons under the same question. In the example below, the options have different values, but both have the name “gender.”
<label>Male <input type="radio" name="gender" value="male" /> </label><label>Female <input type="radio" name="gender" value="female" /> </label>
- Second, you should always indicate which radio button is initially chosen, using the checked attribute.
<label>Male <input type="radio" name="gender" value="male" /> </label><label>Female <input type="radio" name="gender" value="female" checked="checked" /></label>
- Yes, you do still say “checked,” even though a radio button is more likely “pressed” or “selected.”
The Text Area Tag
It’s an HTML oddity, but the tags to create a one-line text field and a multi-line field, or text box, are very different.
A text area is a box or area that allows users to type in whole paragraphs. These would include things like comment zones to let users send you feedback about your site.
Unlike an input tag, a text area has opening and closing tags:
<textarea name="comments"> This text will appear inside the box created by these tags. </textarea>
Note that while text areas have a name attribute, they don’t have a value attribute. Whatever you put between the <textarea> and </textarea> tags appears on the page.
Text areas have unique attributes of their own:
- The cols attribute specifies how wide the box will be. It’s equivalent to the size attribute in a text field. A text area with a cols attribute of “40″ will be 40 characters wide.
- The rows attribute specifies how deep the box will be. A text area with a rows attribute of “8″ will be eight lines deep.
- The wrap attribute answers two questions at once: “On a Web page, how will the text in this box appear to a user?” and “How will the text in this box look when I send it off for processing?”
-
- Setting wrap to “nowrap” will display the text without line breaks. If you don’t give a text area a wrap attribute, it will automatically set itself to “nowrap.” If you write a long sentence, it will disappear past the edge of the text area. The text will be sent off for processing as one unbroken line:
- The quick brown fox jumped over the lazy dog.
- Setting wrap to “physical” will force the text to break each line at the edge of the text area. The text will be readable, but also full of line breaks when you send it off for processing:
- The quick brown
- fox jumped over
- the lazy dog.
- Setting wrap to “virtual” is usually the best of both worlds. It wraps the text on a Web page so that users can read it easily, but doesn’t add those extra line breaks when it sends the text to be processed.
Here’s the code for a sample text area that combines all the elements we’ve discussed:
<textarea name="comments" cols="40" rows="8" wrap="virtual"> Enter your comments here. </textarea>
The Select Tag: Pulldown Menus
Use pulldown menus when you have too many possible answers to a a question to use checkboxes or radio buttons. The <select> and </select> tags can be used to create a list that allows your users to make only one choice at a time. For example: “What state are you from?” or “What is your country?”
Every select tag has two basic parts: The <select> and </select> tags that define where the tag begins and ends, and the <option> and </option> tags that mark the various options available to users:
<select name="newsletter_frequency">
<option>Every Day</option>
<option>Twice a Week</option>
<option>Every Week</option>
<option>Every Month</option>
</select>
This will create a pulldown menu that looks like this:
The name attribute for the <select> tag helps to identify this group of information when it’s processed by a script or program. The option tags define the values that will be associated with that name. For example, when the user selects the option marked “Every Week”, your form gives the select menu with the name “newsletter_frequency” a value of “Every Week.”
If your options are long and complicated, you can assign them a shorter and simpler value by giving the <option> tag a value attribute. Keeping your values short will make them easier for a script to process:
<select name="newsletter_frequency">
<option value="daily">Every Day</option>
<option value="semiweekly">Twice a Week</option>
<option value="weekly">Every Week</option>
<option value="monthly">Every Month</option>
</select>
Now, when the user selects the “Every Week” option, the value your form passes on will be “weekly.”
If you want to have one option in the menu pre-selected, use the selected attribute.
<option value="daily" selected="selected">Every day</option>
The Select Tag: Multiple Choice Boxes
What if you have a long list of items and want to allow your users to select as many as they’d like? By simply adding size and multiple attributes to our beginning <select> tag, you can transform it from a pulldown menu to a multiple choice box:
<select size="6" multiple="multiple">
By default, size is set to “1,” which creates a pulldown menu. Setting size to numbers larger than one creates a box that many rows deep. A multiple choice box with a size of “6″ would be six rows deep, for example. Don’t worry if your list is bigger than your box; if you have 10 options but your size is set to “5,” your users will see the first five options on your list and be able to scroll down to see the rest.
The multiple attribute doesn’t change the appearance of the multiple choice box; it just lets your users select more than one option from the list. On PCs, this is done by holding down the “Control” key while clicking options; on Macs, users click while holding the “Command” key.
Suppose you want to create a list of high school sports and invite your users to get the scores for the ones they select. Here’s how the code would look:
<select name=”hs_sports” multiple=”multiple”>
<option>Football</option>
<option>Baseball</option>
<option> Basketball</option>
<option>Softball</option>
<option>Volleyball</option>
<option>Track</option>
<option>Cross-Country</option>
<option>Swimming</option>
<option>Diving</option>
<option>Water Polo</option>
</select>
On the page, that code would create this:
Multiple choice boxes can be tricky for your users. There’s no visual cue to tell them they can pick more than one option, so you’ll have to explain how to use the box.
One Last Attribute
Normally, users can jump from one part of a form to the next by pressing the Tab key on their keyboard. When they finish filling in the “First Name” text field, for example, hitting Tab will automatically move their cursor to the “Last Name” text field. The order in which a user cycles through each input when pressing Tab is determined by the order in which those inputs are listed in the form’s HTML code.
In complicated HTML layouts, though, elements may not appear on a Web page in the same order they do in your code. When that happens, giving each <input /> tag, text area or select tag a tabindex attribute will let you define how a user will progress through your form. Give the first element a tabindex of “1″, the second a tabindex of “2,” and so on. Remember that most users will expect this to match the visual hierarchy of the page.
More Information
To learn more about forms, try these sites:
http://www.w3schools.com/html/html_forms.asp
http://www.webmonkey.com/tutorials/