Forms 2 HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
FORMS 2

TEXT INPUT

Now let's have a look at the sorts of things you are likely to want to put in your form. It's usually a good idea to plan your form on paper first. Decide on the look and the input before you start coding. If there is information you must have, make that a “required” field.

Start the form using, <FORM >. Then add the parameters as shown in the previous lesson. In line four below, three required fields have been specified. You can have as many as you like, separated by commas.

Now let's look at the input. The first item we will enter is the person's name. Using the INPUT tags we saw in the previous lesson will give you some neat little boxes to enter the information. One important point to remember is that the fields are case sensitive - “email” is not the same as “Email”.

Here is the HTML for the first box:

This will give us a box like this for input:

Size refers to the length in pixels and maxlength is the maximum number of characters, including spaces, that can be written in the box. This can actually overflow the box. You may want to do two of these - one for surname and one for given names.

The INPUT tag simply means we want to allow some input from the form filler and the TYPE=" " part specifies the TYPE of input required. In this case it's a person's name, so it is "text".

Next is the NAME=" " attribute. When you receive the email response, you will see clearly what this line refers to. For example, if the person typed in the name, John Smith, you would see this in the email reply:

name: John Smith

You will need to add some text above or beside the box so that the person filling in the form knows what each field is for. The text can go in above the input code for now with a line break between them. You can see more detailed information on adding text here. For example, you would type in, "Your name" (no quotes) and have the name box on the next line, like this:

On the form it will appear like this:

If you want the person to send their email address, home address, phone number or whatever else you need, just repeat the same code, changing the words following NAME to NAME="email" or NAME="address", like this:

to get this result:

Continue creating your form and adding whatever input you require, changing the input type and names as necessary.

RADIO BUTTONS AND CHECKBOXES

You've probably seen those little buttons you can click to make a single choice or selection. They're called radio buttons. And this is how they are done:

How many times a week do you shop?<BR>

This will give you the following:

If your respondent chose "3" this is what would appear in your email response:

How Many: 3

If you want the option to choose more than one item, you use a checkbox. The code is similar to the radio button; just change the INPUT TYPE to "checkbox" like this:

Which day(s) do you prefer to shop? <BR>

This is the result and now your visitor can choose more than one option.

The choices here are on one line. Use line breaks for vertical listing.

If your respondent chose "Tues" and "Thurs" this is what would appear in your email response:

Day: Tues,Thurs

TEXTAREA

If you would like to give your visitors a bit more room to comment on your site or send an longer message, you will need more than one line. In this case we use the TEXTAREA tag. You've probably seen it before and this is how it is done:

This will give you a textarea like this:

SPECIAL NOTE Unlike the other tags we have looked at, this one requires a closing tag, </TEXTAREA> at the end of it.

Another difference is that here you use ROWS=" " to specify how many vertical rows the textarea will be, and COLS=" " to specify the horizontal width in characters.

DROP-DOWN MENUS

You may prefer to use a drop-down menu of options for your visitor. In this case, we use the <SELECT>tag:

Here is the menu. The respondent just clicks the arrow to make a selection.

Again, you will need a closing tag, </SELECT> at the end of this code.

ADDING TEXT

Any text you want to add should go in after <FORM>, next to the relevant input code. It can be above, below, on the same line (before or after), using non-breaking spaces or line breaks to separate the text from the input boxes. For example, if you wanted the person's phone number, you would type in, "Your phone number:" and have the name box on the next line, like this:

To give you the following:

If this is a “required” field you should precede it with an asterisk. When you are running a number of these items on different lines, you will need to separate them with either paragraph tags,<P> or line breaks <BR>.

It should now look like this:

If you prefer to have the text just before the input box, just use a couple of non-breaking spaces,  . Now it will look like this:

SENDING THE FORM

Once the form is complete, you will need a way for it to be sent to you as an email message. You now need to create SUBMIT and RESET buttons. This is simply done with the following code:

which gives you these neat little buttons:

You include the "reset" button in case the sender wants to erase the entire contents of the form and start again. (Or decides not to send it.)

You can change the words that appear by adding a VALUE=" " command to the tags. You could put, "Submit Form", and "Clear the Form" with the following lines:

To get this:

Depending on the type of response you want, you can get imaginative and put anything you like:

To get this:

Finally, don't forget to close your form using </FORM>.

You probably want to have another look at this look like so on to the next section.

Next: Forms 3 - Form Example

Advanced Index