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 PC World 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

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.

Armand Abogado

HP OfficeJet 250 Mobile Printer

Wireless printing from my iPhone was also a handy feature, the whole experience was quick and seamless with no setup requirements - accessed through the default iOS printing menu options.

Azadeh Williams

HP OfficeJet Pro 8730

A smarter way to print for busy small business owners, combining speedy printing with scanning and copying, making it easier to produce high quality documents and images at a touch of a button.

Andrew Grant

HP OfficeJet Pro 8730

I've had a multifunction printer in the office going on 10 years now. It was a neat bit of kit back in the day -- print, copy, scan, fax -- when printing over WiFi felt a bit like magic. It’s seen better days though and an upgrade’s well overdue. This HP OfficeJet Pro 8730 looks like it ticks all the same boxes: print, copy, scan, and fax. (Really? Does anyone fax anything any more? I guess it's good to know the facility’s there, just in case.) Printing over WiFi is more-or- less standard these days.

Ed Dawson

HP OfficeJet Pro 8730

As a freelance writer who is always on the go, I like my technology to be both efficient and effective so I can do my job well. The HP OfficeJet Pro 8730 Inkjet Printer ticks all the boxes in terms of form factor, performance and user interface.

Michael Hargreaves

Windows 10 for Business / Dell XPS 13

I’d happily recommend this touchscreen laptop and Windows 10 as a great way to get serious work done at a desk or on the road.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?