Advanced HTML forms

In 'Introduction to HTML Forms', we investigated input types and essential form elements. First we introduced the script required to start your forms, then we investigated commonly used input types such as text, password, checkbox and radio.

We shall now delve into advanced form elements such as drop-down menus (represented by the select command), rich text fields (represented by the textarea command), and the submit and reset buttons used to post your form data.

It is essential to reiterate the importance of including the 'name' property within all form elements. The name and associated value is what allows the data to be correctly e-mailed to the recipient.

The Select Command

Select allows the user to choose a value from a list of options in either a drop-down or a scroll-down menu format.

<select name="housing" size="3">
  <option value="rent">Renting</option>
  <option value="own">Own your own home</option>
  <option value="share" selected >Sharing</option>
</select>

This displays a box with three options: Renting, Own your own home and Sharing. The latter will be pre-selected due to the inclusion of 'selected' in the option command. If there were several other available options, you would include that number of OPTION values between the select and /select commands.

The Size Property

If you remove the size property, a default of size="1" is enforced. This creates a drop-down menu in its traditional format, that is, one choice is displayed, with other options available by pressing the arrow button on the right of the menu.

Similarly, if there were several alternatives and the coded size value was 3, three options would be visible at a time, and the viewer would need to scroll up or down to see more.

The Multiple Property

By default, you can only choose one option at a time; however, by including 'multiple' in your opening select command, a user can choose many options by holding down the <Shift> key when selecting. For example:

<select name="housing" size="3" multiple>

The Textarea Command

Often, forms have large boxes for inserting general comments. Logically, one could assume that this is a text input type with varied sizing values. However, this is not the case.

Apart from displaying a larger entry space than a usual text input type, textarea represents a Rich Text Field. In other words, a space for data that may not be just normal text. Rich Text Fields may (if coded appropriately) allow the user to include graphics, special characters, and even HTML code.

This extension is often unused - however, because of this potential, input type="text" won't suffice. Therefore, we use textarea:
<textarea name="Comments" rows="3" cols="30">Enter comments here</textarea>

The open textarea command lets the computer know we are creating a rich text field. This is followed by the essential 'name' value mentioned earlier. Following this there are two properties, rows and cols. 'Rows' determines how deep the box will be while 'cols' presets its width. The units of measurement for the latter is the number of characters, so in the above example, the box would be 30 characters across and three rows deep.

The text between the opening command and the closing </textarea> is optional. If included, this text is displayed within the box as a prompt. If left blank, the box will be empty.

The Submit And Reset Buttons

Creating the submit and reset buttons is the easiest part of coding forms, provided your opening form command is correct. Their format is:

<input type="submit" value="Send Form">
<input type="reset" value="Reset Values">

Input type="submit" causes the computer to automatically create a button with "Send Form" on it, and then to send all form data to the e-mail address specified in the opening form command when the button is clicked.

When the computer sees input type="reset", it similarly creates a button with the text 'Reset Values', and returns all items to their default values when clicked.

If you omit the value properties, the submit button will automatically read 'Submit Query' and the reset button will simply say 'Reset'.

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

Cool Tech

Toys for Boys

Family Friendly

Stocking Stuffer

SmartLens - Clip on Phone Camera Lens Set of 3

Learn more >

Christmas Gift Guide

Click for more ›

Brand Post

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Michael Hargreaves

Microsoft Office 365/Dell XPS 15 2-in-1

I’d recommend a Dell XPS 15 2-in-1 and the new Windows 10 to anyone who needs to get serious work done (before you kick back on your couch with your favourite Netflix show.)

Maryellen Rose George

Brother PT-P750W

It’s useful for office tasks as well as pragmatic labelling of equipment and storage – just don’t get too excited and label everything in sight!

Cathy Giles

Brother MFC-L8900CDW

The Brother MFC-L8900CDW is an absolute stand out. I struggle to fault it.

Luke Hill

MSI GT75 TITAN

I need power and lots of it. As a Front End Web developer anything less just won’t cut it which is why the MSI GT75 is an outstanding laptop for me. It’s a sleek and futuristic looking, high quality, beast that has a touch of sci-fi flare about it.

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.

Featured Content

Product Launch Showcase

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?