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!

Or

Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Brand Post

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Emily Tyson

MSI GE63 Raider

If you’re looking to invest in your next work horse laptop for work or home use, you can’t go wrong with the MSI GE63.

Laura Johnston

MSI GS65 Stealth Thin

If you can afford the price tag, it is well worth the money. It out performs any other laptop I have tried for gaming, and the transportable design and incredible display also make it ideal for work.

Andrew Teoh

Brother MFC-L9570CDW Multifunction Printer

Touch screen visibility and operation was great and easy to navigate. Each menu and sub-menu was in an understandable order and category

Louise Coady

Brother MFC-L9570CDW Multifunction Printer

The printer was convenient, produced clear and vibrant images and was very easy to use

Edwina Hargreaves

WD My Cloud Home

I would recommend this device for families and small businesses who want one safe place to store all their important digital content and a way to easily share it with friends, family, business partners, or customers.

Walid Mikhael

Brother QL-820NWB Professional Label Printer

It’s easy to set up, it’s compact and quiet when printing and to top if off, the print quality is excellent. This is hands down the best printer I’ve used for printing labels.

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?