Adding Extras

Adding Extras

You've created all the form controls that will accept user input. Now it's time to add functionality and make the controls a bit friendlier.

Displaying Control label Elements

The label element displays helpful information for a form control. You should tie the for attribute to the control it labels. To create a label, begin with the opening label tag and then enter the for attribute. The value for this attribute, when present, must match the id attribute for the control it's labeling. Next, enter text that will serve as the label and then close the element with the end label tag, as in the following:


<label for="control4">Who is your favorite NFL Quarterback?</label>
<input type="text" name="favqb" id="control4" />

Figure shows this text control with a label assigned to it.


16. You can assign labels to any form control. Note that they're displayed with the control.

If you define your form control within the label element, as shown in the following code, you can omit the for attribute:

<label>User name: <input type="text" name="username" /></label>

The <label> tag doesn't cause any visible changes to the page, but you can always apply styles to it if you want.

Grouping Controls with fieldset and legend

The fieldset element organizes form controls into groupings that appear in the web browser. The legend element displays a caption for the fieldset. To create a fieldset element, start with the opening fieldset tag, followed by the legend element.

Next, enter your form controls and finish things off with the closing fieldset tag:


  <legend>Oatmeal Varieties</legend>
  <label>Apple Cinnamon<input type="radio" name="applecinnamon" />
  </label><br />
  <label>Nutty Crunch<input type="radio" name="nuttycrunch" />
  </label><br />
  <label>Brown Sugar<input type="radio" name="brownsugar" /></label>

Figure shows the result.


Figure. The fieldset and legend elements enable you to organize your forms.

Changing the Default Form Navigation

In most browsers, you can use the Tab key to step through the form fields and links on a page. When filling out long forms, it's often much easier to use the Tab key to move from one field to the next than to use the mouse to change fields. If you have a mix of form fields and links on your page, setting things up so that using Tab skips past the links and moves directly from one form field to the next can improve the usability of your applications greatly. To set the tab order for your page, use the tabindex attribute. You should number your form fields sequentially to set the order that the browser will use when the user tabs through them. Here's an example:

<p>Enter your <a href="/">name</a>: <input type="text" name="username"
     tabindex="1" /></p>
<p>Enter your <a href="/">age</a>: <input type="text" name="age"
     tabindex="2" /></p>
<p><input type="submit" tabindex="3" /></p>

When you tab through this page, the browser will skip past the links and move directly to the form fields.

Using Access Keys

Access keys also make your forms easier to navigate. They assign a character to an element that moves the focus to that element when the user presses a key. To add an access key to a check box, use the following code:

<p>What are your interests?</p>
<p>Sports <input type="checkbox" name="sports" accesskey="S" /></p>
<p>Music <input type=""checkbox" name="music" accesskey="M" /></p>
<p>Television <input type=""checkbox" name="tv" accesskey="T" /></p>

Most browsers require you to hold down a modifier key and the key specified using accesskey to select the field. On Windows, both Netscape and Internet Explorer require you to use the Alt key along with the access key to select a field. Access keys are mostly useful for forms that will be used frequently by the same users. A user who is going to use a form only once won't bother to learn the access keys, but if you've written a form for data entry, the people who use it hundreds of times a day might really appreciate the shortcuts.

Creating disabled and readonly Controls

Sometimes you might want to display a form control without enabling your visitors to use the control or enter new information. To disable a control, add the disabled attribute to the form control:

<p>What is the meaning of life?
<textarea name="question42" disabled="disabled">
Enter your answer here.

When displayed in a web browser, the control will be dimmed (a light shade of gray) to indicate that it's unavailable.

To create a read-only control, use the readonly attribute:


<p>This month: <input type="text" name="month" value="September"
readonly="readonly" /></p>

The read-only control is not distinguished in any way from a normal form control. However, when visitors attempt to enter new information (or, in the case of buttons or check boxes, select them), they'll find that they cannot change the value. Figure shows both a disabled control and a read-only control. You'll generally find disabled to be more useful because it's less confusing to your users.


18. Disabled controls are dimmed. Readonly controls appear normallythey just can't be changed.

Form Security

It's important to remember that regardless of what you do with your form controls, what gets sent back to the server when the form is submitted is really up to your user. There's nothing to stop her from copying the source to your form, creating a similar page on her own, and submitting that to your server. If the form uses the get method, the user can just edit the URL once the form has been submitted.

The point here is that there is no form security. In Lesson 13, "Using JavaScript in Your Pages," you'll learn how to validate your forms with JavaScript. Even in that case, you can't guarantee that users will supply the input that you intend. What this means is that you must always validate the data entered by your users on the server before you use it.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows