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

Cool Tech

Breitling Superocean Heritage Chronographe 44

Learn more >

SanDisk MicroSDXC™ for Nintendo® Switch™

Learn more >

Toys for Boys

Family Friendly

Panasonic 4K UHD Blu-Ray Player and Full HD Recorder with Netflix - UBT1GL-K

Learn more >

Stocking Stuffer

Razer DeathAdder Expert Ergonomic Gaming Mouse

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

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.

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

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.

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?