Working With Forms

A form on a website is similar in concept to a form on paper, except that you create it online and use it to interact with and/or gather information from website visitors.

Typically, your site visitors enter information into form fields and indicate their preferences by clicking option buttons, check boxes, and drop-down boxes. Site visitors can also type comments into text boxes or text areas. One of the most common forms you will find is a Contact Form so your site visitor can contact you.

A sample contact form has been included with each of the templates. It is NOT active and will need to be modified to suit YOUR form processing script and your information.

Getting the Form to Work

Before your form will work, you will need to add scripting instructions to it. You have a number of options on what you can use. Depending on your host's server requirements there are two free solutions for PHP and ASP.NET

Huggins' Email Form Script - A Free PHP Email Script that Doesn't Require You to Know Anything At All About PHP.

Contact Form Generator for Expression Web - A free, online tool that will generate an email contact form, including the back-end VB ASP.NET code, HTML form fields, field validators, a customizable confirmation message, a basic security test to minimize form SPAM, and more. No programming knowledge is required.

Form Attributes

The important attributes for the form tag are action and method.

HTML <form> action Attribute

<form action="value">  

Action specifies where to send the form-data when a form is submitted. Possible values are:

1. An absolute URL - points to another web site (like action="http://www.frontpage-to-expression.com/huggins-email-form-script-v2.2.2.php5")
2. A relative URL - points to a file within a web site (like action="huggins-email-form-script-v2.2.2.php5")

HTML <form> method Attribute

<form method="value">

Method specifies how to send the form-data to the page specified in the action attribute. Values are either "get" or "post" but NOT both.

1. If you use get method, Appends the form-data to the URL: URL?name=value&name=value
2. If it is post, the information is sent to the  server as part of the data body.  The "post" method is more robust and secure than "get", and "post" does not have size limitations.

Important Points

• If you are using the XHTML doctype, you will need to use all lowercase.
• Both action and method are required to make your form work.

Additional Resources

• HTML Forms and Input
• Introduction to Web Accessibility
• Accessible HTML/XHTML Forms: Beginner Level
• Accessible HTML/XHTML Forms: Intermediate Level
• Accessible HTML/XHTML Forms: Advanced Level
• Design Meltdown
• CSS-Based Forms: Modern Solutions
• Tips for Keeping Forms Accessible
• Universal Usability - The Universal Usability site houses an unabridged, online version of Access by Design: A Guide to Universal Usability for Web Designers, by Sarah Horton, published in 2005 by New Riders Press. You’ll find the complete text and illustrations from the printed book here under Access by Design Online. The online version also offers links to texts and tutorials that support and expand on the concepts covered in the book.

Form Generators

• pForm - Free HTML Form Builder - Create Web Form Template Online
• Web Form Builder - Since 1998 FormSite.com has helped people build professional online html forms and web surveys. We have over 100 pre-built forms that you can customize for registrations, reservations, secure orders, customer surveys and payment collection.
• PHP email form with Captcha word verification - This is a great sample as how to easily add Captcha into your forms. The sample can be adapted to any form and not just an email form as the demo shows.