Introduction to HTML forms

A site that encourages people to keep returning is referred to as being 'sticky'. Interactivity is a large contributor to making your site warrant this description - and one of the most interactive aspects of HTML is forms. They give the user a hands-on experience and enable the site developer to collect input from users.

This column will familiarise you with forms and introduce you to several input types. Next month we will investigate more advanced form elements, such as drop- down menus, text areas, and how to submit and reset data that has been entered.

Forms explained

A form is an HTML display with questions and fields in which the user enters data. Depending on your coding, user information may be entered via typing text, checking a box, clicking a radio (round) button, or selecting from a drop-down menu. When a user clicks the Submit button, information is sent to a predetermined e-mail address.

Forms have three levels. The first is the HTML look/feel and base structure. Second is the added functionality provided by JavaScript: e.g., if a field is left empty, an alert box may advise that data is required before continuing. The third level is the use of databases to store the information the user has entered, for further manipulation.

We will look at the first level, i.e., the HTML implementation of forms. It is important, therefore, to reiterate that we are only concerned with e-mailing the information to a given address.

Starting your form

All forms require an opening and closing command. This opening command is extremely important, as it tells the computer where to send the information once the Submit button is pressed, and what format it will be in.

<FORM method="post"
action="mailto:heidi_woof@idg.com.au?Subject=MyForm" enctype="text/plain">

The first property in this example states that the information will be 'posted'. The action attribute defines the e-mail address where it will be sent. The end part of the action value (?Subject=MyForm) automatically places the word 'MyForm' into the subject field of the mail client. The final attribute stands for 'encryption type' and ensures the information will be displayed in the body of the e-mail in a clean list format. If this property is omitted, the data will instead be sent as an attachment, with all fields concatenated in a hard-to-read format).

The next stop is to decide which form types to use. With all form items, you must define a name. This allows the computer to temporarily store information under a given label for identification.

Text

The most common form element is one that allows the user to enter text.

Enter First Name: <INPUT TYPE="text" name="fname">

This code prompts the user to enter their name in the blank box displayed. If submitted, this will be sent to the predefined e-mail address with the label 'fname'. Two other properties you may use are value and size. If you add value="name here", the browser will display this text within the previously empty box as a default value. 'Size' allows you to change the length of the display box.

Password

Password is similar to text input, except that the user entry is displayed as asterisks. When received in e-mail form, however, the value of 'pword' will display as text.

Enter Password: <INPUT TYPE="password" name="pword" size="60">.

Checkbox & Radio

Checkbox displays square boxes that the user can tick, while radio displays a series of round buttons. In addition to appearance, the main difference between them is that checkbox allows a user to select multiple items; with radio buttons, the user is limited to selecting only one.

Select your favourite foods:

<input type="checkbox" name="food" value="spaghetti" checked>Spaghetti
<input type="checkbox" name="food" value="vegies">"Vegetables

Checkboxes and radio both require the 'value' property, which defines what will be returned as the field value. With the above example, if the user ticked the box next to 'Vegetables', the e-mail would say Food=Vegies. You can select a default value by inserting 'checked'. In this example, the 'Spaghetti' value would already be selected when the form is loaded.

It is very important to ensure that the name for the various options is the same. If I had accidentally named one of these 'foods' instead (notice the extra 's'), the return e-mail would consider them as two separate fields, returning food=spaghetti and foods=vegies.

Join the newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

George Khoury

Sharp PN-40TC1 Huddle Board

The biggest perks for me would be that it comes with easy to use and comprehensive programs that make the collaboration process a whole lot more intuitive and organic

David Coyle

Brother PocketJet PJ-773 A4 Portable Thermal Printer

I rate the printer as a 5 out of 5 stars as it has been able to fit seamlessly into my busy and mobile lifestyle.

Kurt Hegetschweiler

Brother PocketJet PJ-773 A4 Portable Thermal Printer

It’s perfect for mobile workers. Just take it out — it’s small enough to sit anywhere — turn it on, load a sheet of paper, and start printing.

Matthew Stivala

HP OfficeJet 250 Mobile Printer

The HP OfficeJet 250 Mobile Printer is a great device that fits perfectly into my fast paced and mobile lifestyle. My first impression of the printer itself was how incredibly compact and sleek the device was.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?