Path // www.yourhtmlsource.com → Forms → BASIC FORMS

Basic Forms

by Ross Shannon

Using simple HTML forms is a very slick way of receiving information from your visitors. You put a few boxes and buttons on your page, they enter in their details and you receive them through email — brilliant.

Clock This page was last updated on 2012-08-21


Form Structure

Just like the rest of HTML, forms follow a structure. The <form> tag is a container tag. It holds all of the elements, such as text boxes and submit buttons, which we’ll see below, inside it. Our form container will look like this:

<form name="feedback" method="post"  action="mailto:you@site.com">
<!-- Form elements will go in here -->
</form>

This tag and its attributes start a new form; name the form “feedback”, specify that the method the form will use is to post the information, and give the location that the information will be sent to with the action attribute — in this case your email address. Make sure you put your address in straight after the attribute, with no space in-between.

Warning. This method of sending the data will just send an email, and in truth will not always work because of the different way some people will have set their email programs up. If you want a more robust solution which will also add a thank-you message afterwards, you need to use Perl or some other server-side scripting language to write a script that will send the email for you, which is a bit more complicated. For your first form, just send it straight to your email address.

Once you’ve set down that a form is going here, you will need to populate it with some of the input elements and a submit button. Put the parts below between the form tags.

Text Boxes

These will probably be the main parts of your form. They allow the reader to input either a line or multiple lines of text.

One-line Text Box

The first type of text box is a one-line box, suitable for information like their name or email address. It looks like this:

Click inside the box and try it out. You can type anything you want. The code for one of these boxes is

<input type="text" name="mail" size="25">

<input>
This is the tag name for many of the form elements that are there to collect user input.
type
The value of this attribute decides which of the input elements this one is. In this case, text is telling the browser that it’s a single-line text-box.
name
When you get the results of this form in your email, you’re going to need to know which responses were placed in which boxes, as you just get back a load of text. This is where the name attribute comes in. With this, each line in the response will be given a label in the email. If you used name="firstname", because you were using this box to find out the reader’s first name, you would receive
firstname=Ross
in the email you are sent.
size
This specifies the length of the box on your page. If the box is not wide enough for the information that is entered, it will scroll across to allow more letters, but you should tailor this to the type of information being asked for so that most people can see their whole response at once.

Text Area Box

This box allows more than one line of text to be entered. It’s suitable for comments, street addresses, that kind of thing. You don’t need to press return at the end of each line, the browser will wrap the text automatically.

For some reason, text areas aren’t specified as a value for input type="...", but instead have their own tag — <textarea>. It’s a stupid inconsistency, but we’re all just going to have to deal with that. The code is

<textarea cols="50" rows="4" name="comment"></textarea>

Again, you’ll have to change around the dimensions to suit your needs. cols and rows here mean COLumns and er, ROWS respectively. Take note that this tag needs an end-tag too. More stupidity. Any text you put in there between the tags will appear in the box when the form is loaded.

If you want to change the colour of the scrollbar in there, you’re going to have to use some CSS in your scrollbars.

Selection Boxes

These three elements give the reader a choice of options, and asks them to pick out one or more of them.

Radio Buttons

These small circular buttons can be used in polls or information forms to ask the user their preference. When you set up a group of them, you can only select one choice. Try it here:

1. 2. 3.

They’re called radio buttons because they function like the buttons on a really old car radio. Remember, the guys who came up with this stuff have beards as long as your arm, so you should expect things like that. The code for a radio button is:

<input type="radio" name="choices" value="choice1">

The code is about the same as the one you’ve seen before. type="radio" says that this is going to be a radio button. There is a new attribute here too — value. This is like the answer to a question. Say you were asking the reader what they liked most about your site. The name of this group of questions would be ’likemost’ and there would be three choices, all radio buttons, all with name="likemost" in them, to show that they’re all part of the same question. Then the three values could be ’layout’, ’content’ and ’graphics’. When you receive the results, you’ll get something like
likemost=layout
depending on which button was checked. Get it? I should tell you now that you can add the value attribute to the single-line text box above to add in some text before the user even starts typing.

Check Boxes

Groups of check boxes are similar to radio buttons except they are not grouped, so multiple boxes can be selected at the same time. They are small squares that are marked with a tick when selected. Here’s a few to play with:

1. 2. 3.

The code for these boxes is the same as for the radio buttons, with just the value of the type attribute changed:

<input type="checkbox" name="checkbox1">

Notice that there is no value attribute for checkboxes, as they will either be checked or left blank. If you want a checkbox to be checked before the user gets to modify it, add the boolean checked attribute:

<input type="checkbox" name="newsletter" checked="checked">

Looks a little silly with the attribute’s value being the same as the attribute itself, but that’s the way it’s done. This checked attribute can also be used on a radio button to set one of the radios as selected by default.

Drop-down Select Boxes

These are a cool way to get a user to select an option. They perform the same thing as radio buttons, it’s just the way they look that’s different. Most of the options available are not in view until the user gets intimate with the box and clicks on it. The rest of the options will then pop-up below the box.

This box would be used to find out what continent you come from, like I care. The lengthy code is:

<select name="continent" size="1">
  <option value="europe">europe</option>
  <option value="namerica">n. america</option>
  <option value="samerica">s. america</option>
  <option value="asia">asia</option>
  <option value="africa">africa</option>
  <option value="oz">the other one</option>
</select>

select boxes are like textareas — they have their own tag, but these elements hold further tags inside them too. Each choice you give your reader is denoted by an option. The name/value system remains from the tags above. The size attribute sets how many lines of options are displayed. Setting this to anything over 1 (the default) is really defeating the purpose of having the options hidden away.

You can use these boxes as a link-chooser too, with the help of a bit of JavaScript. The code for that is on the drop-down link box page.

Send and Reset Buttons

Now that you’ve gotten the reader to fill in all the information you want, you need a finishing button to click on to send it all to your email address (or wherever you’ve said at the start). You can also clear all the info in the form out with the reset button. They’re both real easy to make, and look like this:

 

The simple tags for these two are:

<input type="submit" value="Submit">
<input type="reset">

The value attribute in this case sets the text that’s displayed on the front of the button. When you click submit all the form information is sent to your target and the page (or following page) is loaded. Done.

Now, make sure your forms are accessible, and pretty.