Tutorial 6: Working with Web Forms

Creating Password Boxes

Password boxes are similar to text boxes except that they do not display whatever is typed by the user. Instead, the form will display a series of bullets or asterisks in place of the text. Password boxes are created using the following HTML element:

<input type="password" name="name" id="name" />

where name and id identify the field associated with the password-protected input box. Password boxes also support the other attributes associated with input boxes such as the size and maxlength attributes. Note that the text entered into a password box only protected from being viewing the information being typed in. It is not protected in the transfer from the Web form to the Web server. To fully protect data entered into a Web form you have to use a secure server.

Disabling Form Elements

In some cases you might not a form element to be accessible for the user. This is most commonly done in forms in which the users have to enter some key piece of information in one part of a form before elements in other parts of the form become available. For example in a payment form the user might have to enter a valid credit card number before the submit button becomes accessible.

To disable a form element, add the following attribute to the element’s markup tag:

disabled = "disabled"

Web forms created in earlier versions of HTML may have these attribute entered in the minimized format as simply

disabled

with no attribute value. Note that this format is not supported by XHTML. To re-enable a disabled form element you have to run a script command using a scripting program like JavaScript.

Keeping Elements from being Changed

In some forms you may want to set a field’s value and not allow the user to change it. For example a form that is submitted to an e-mail address may have that e-mail address entered into a form field that is not accessible to the user. To prevent a user from changing a field’s value you can set the field to be read only using the following attribute

readonly = "readonly"

In older HTML code this is also entered without the attribute value as:

readonly

but this format is not supported by XHTML. You can use the readonly attribute with text boxes, password boxes, checkboxes, radio buttons, and text areas.

If you don’t want users to view a readonly field you can also set the value in a hidden field.

Form Editors

There are several "form editors" available on the Web that will help you create your Web page forms. Here are some links to form pages:

Feedback Forms
Response-o-matic
Fill-out Forms
HTML Form Builder
Form Manager
Form Router
CGI Expo

Learning about CGI

This book is focused on HTML and related issues. If you wish to learn more about CGI scripts and how to program in CGI, you can go to the following Web sites:

CGI Made Easy
Matt's Script Archive
Web Scripts
CGI Resources
CGI World
CGI Scripts
http://www.w3.org/TR/xforms

XForms

The W3C is developing the next generation of forms for the Web. The new specification, XForms, separates presentation from content, allowing forms to be reused to reduce the number of round trips to the server, as well as offering device independence and a reduced need for scripting. XForms is not a free-standing document type, but is intended to be integrated into other markup languages, such as XHTML or SVG. The key goals of XForms are:

• Support for handheld, television, and desktop browsers, plus printers and scanners
• Richer user interface to meet the needs of business, consumer, and device control applications
• Decoupled data, logic, and presentation
• Improved internationalization
• Support for structured form data
• Advanced forms logic
• Multiple forms per page, and pages per form
• Suspend and Resume support
• Seamless integration with other XML documents and languages

XForms are not yet well-supported in the browser community. You can learn more about XForms and read the latest specifications at http://www.w3.org/TR/xforms .