Form Elements

If you ever want to ask your visitors what they think of your site, or let them vote about something directly from a page on your site, then the chances are that you will need to design or use a form of some sort or another.

All form elements need to have a name and a value before the script can do anything useful with it, therefore, in all the examples below the name attribute should be included (but you can name it anything sensible made up of alphanumeric characters and the underscore).

Textboxes

This is a single line text box, handy if you want a short but open answer to a question, or if you want to limit the length of the answer. An example of using the text box is just below, were the maxlength attribute is the number of characters it will allow before refusing any more input and the size attribute changes the width of the box (the number of characters it displays is usually one more than the size).

<INPUT TYPE="text" NAME="a_textbox" MAXLENGTH="50" SIZE="20">

Password Boxes

The password box works in exactly the same way as the normal text box, the only difference being that the text you put in it is "masked" so that anyone looking over your shoulder will not be able to work out your password by looking at the screen.

A word of warning! Using a password box to mask a password is not how you make a password secure as the password (or other "sensitive data" such as a credit card number) will be transferred as normal text when the form is sent. Thus, if you enter your password in a form that is sent to the server using the GET method, your password will form part of the URL that the form results are displayed in. This may then show up in the web logs or free stats, etc that may be monitoring the activity of that site, and may be publicly available. If you want to ensure that your users details are safe from prying eyes, you will need to invest in the use of a Secure Server that is capable of handling encryption.

<INPUT TYPE="password" NAME="a_passwordbox" MAXLENGTH="20" SIZE="20">

Textarea boxes

This is a text area text box, which is more suitable for longer answers or for things like comments, this is because you can see more of the input, making it easier to review what was written before sending the form.

You can change the size of the text area by setting the rows and cols attributes, which sets the number of character rows and columns. If you want to add any default text into the text area, then you should put this text in-between the opening and closing textarea tags. Any HTML entered as the value for a text area is not rendered as HTML, but shows up as normal text instead.

<TEXTAREA NAME="a_textarea" ROWS="3" COLS="20"></TEXTAREA>

Checkboxes

This is a check box; it can be used for simple yes or no questions or to make multiple choices where more than one answer may be required. The value of each checkbox is independent of other values in the data set, which allows the user to tick as many or as few checkboxes as they require. To have a checkbox ticked as its default value, you should add checked as a stand-alone attribute in the tag. As there is no room for user input, you must provide the value that is associated with each of the checkboxes that you use.

<INPUT TYPE="checkbox" NAME="multiple_choice" VALUE="Dogz"> <INPUT TYPE="checkbox" NAME="multiple_choice" VALUE="Catz" CHECKED>

Radio Button

The radio button is similar to the check box in that it can be used for simple questions, however you should use a radio button when you require just a single answer for a data set. For example, you can choose either Dogz or Catz as your favourite petz, but not both. If you try to select more than one of the options then it removes the check mark from the previous selected item in that data group.

<INPUT TYPE="radio" NAME="choose_one" VALUE="Dogz"> <INPUT TYPE="radio" NAME="choose_one" VALUE="Catz" CHECKED>

Drop Down Menus

The drop down menu only allows for the user to select a single answer, and so it can be likened to be a more compact form of a radio button where the options are more visible. Drop down menus are probably easier for your visitors to understand to those new to the internet compared to radio buttons - so I would recommend a drop down menu when you have a lot of options to choose from to reduce the confusion.

The drop down menu is included on a page using the select container tag, with each option being defined with an option tag embedded in the select tag. The name of the data set is defined in the select tag, and the value of the answer is defined separately for each option. If the value is not set for a particular option, then it will default to using the text contained in the opening and closing option tags (or to the text between each option tag if you are not closing them).

<SELECT NAME="choose_one"> <OPTION>Option 1 <OPTION VALUE="Option 2">Option 2 <OPTION VALUE="Option Three">Option 3</OPTION> <OPTION VALUE="They liked the fourth idea!">Option 4</OPTION> </SELECT>

Multi Select Menus

Similar to the check box in the way that it works, it only needs a slight modification in the code to make a drop down box that allows for more than one choice to be made. To choose more than one answer, the user will need to hold down the Ctrl key when making their choices.

Below, is the same code we used for the drop down menu example, however we have made the changes needed to allow the user to choose more than one answer. The number of items shown at any one time is defined using the size attribute, but the main difference here is that work multiple is added as an attribute to the select tag.

<SELECT NAME="choose_one" SIZE=3 MULTIPLE> <OPTION>Option 1 <OPTION VALUE="Option 2">Option 2 <OPTION VALUE="Option Three">Option 3</OPTION> <OPTION VALUE="They liked the fourth idea!">Option 4</OPTION> </SELECT>

Hidden Values

Lets just pretend that there is a hidden value on this page right here (there isn't really because even if there was you wouldn't see it, so we didn't need to have one to demonstrate what it looks like). Hidden values can be very useful when you want to pass the same information to the script all the time without having the user write it in. Basically all they do is send a name value pair such that the value is associated with the name when the script reads the input. While you could have a text box for your value and set your value that way, the user may edit the details - which you may not want them to be able to do.

Say for example you have a feedback form on your site, but the script you are using expects you to send along your email address with the details each time you use it. This is one of those occasions where you don't want the user to edit your email address and send someone else a message from your site - so hidden fields are ideal for this kind of information.

<INPUT TYPE="hidden" NAME="recipient" VALUE="rosie@tiggys.co.uk"> <INPUT TYPE="hidden" NAME="subject" VALUE="My Feedback Form">

Buttons

What good is a form if you don't at least have a button to send it? Well... actually that depends as some of the more up to date browsers now submit the form details when you press the enter key in a normal text box. Anyway, in the old days of HTML, you needed a button to do that, and there are 3 different kinds of button available. Plain old buttons (that do nothing when you press them), submit buttons that send off the information for processing, and the reset button for those that make a mistake and want to start all over again.

You can see the reset and submit buttons at work, have a play about with the form and then press reset - the form will revert back to how it was when it was first loaded. Pressing submit will bring you back to this same page, but you will be able to see all of the information that would have been sent to a script by taking a look at the URL in the browser address bar.

Pressing the dummy button however will not do anything, as it is just a button. This may seem like a pretty useless thing to do, but the plain old button has its uses. You may want to add a help button to your form, in which case you can use it to call a JavaScript function that opens up a new window with the help page or of course you may want to show an example of a form but don't want people to use it as it is for demo purposes.

<INPUT TYPE="button" NAME="my_button" VALUE="Dummy Button"> <INPUT TYPE="submit"> <INPUT TYPE="submit" VALUE="Send my Form NOW!"> <INPUT TYPE="reset"> <INPUT TYPE="reset" VALUE="Start Over!">

This site will look much better in a browser that supports web standards, but it is still accessible to any browser or Internet device.

Home > Tutorials > Making Use of HTML > Building an Online Form

Form Elements

Textboxes

Password Boxes

Textarea boxes

Checkboxes

Radio Button

Drop Down Menus

Multi Select Menus

Hidden Values

Buttons

Tutorial Indexes

Making Use of HTML

JavaScript Snippets

Know your Server!

Section Menus

Amazon.com Search

About this Page