HTML Tutorials - Forms... R R

Intro
Text form
Buttons
Full Example
Textarea
- Wrapping
File
Radio Buttons
Checkboxes
Selects

So far, all that we've talked about involves presenting information to users using HTML. What about if you want your website visitors to send information to you?

We are now going to look at how to collect information from your visitors.

This is done on the web using HTML Forms.

What is a form? I'll answer that by giving your some visual examples.

What you see above are called forms. Here are the names of these respective forms:

TEXT form
BUTTON
TEXTAREA
FILE browser
RADIO BUTTONS
CHECKBOXES

We will look at other types of forms later.

For now, let's learn how to create these forms.

Any kind of form at all that you create must be enclosed in the form tag <form> </form>

All other tags go inside the form tag, like this <form>...</form>

Text form

Most form elements are created using <input> tag.
You then add the attribute <input type=""> to obtain a particular type of form

The above html will produce

Here is a question for you? Where is the closing tag for the <input> tag?

The answer is, it doesn't have a closing tag.

Other attributes of TEXT form

Size will vary the horizontal width

<form> <input type="text" size="60"> </form>
This produces

<form> <input type="text" size="2"> </form>
This produces

maxlength will limit the number of characters the user can type into the form.
Type some text into both text forms below, make it at least ten characters each.

You will notice that you can only type five characters into the second text form. It is done with:

value puts some default text inside the form

<form> <input type="text" size="35" value="My default text"> </form>
This produces

name attribute will differentiate one form element from another.

A form is likely to contain more than one form element. We need a way to know which form element corresponds to a particular value.

Buttons

A button is created using the <input type="submit"> tag.

<form> <input type="submit"> </form>
This produces

As you can see, the button says Submit Query on it. This is the default value for a submit button.
If you want it to say something else, e.g. Click here to send, just add a value attribute.

<form> <input type="submit" value="Click here to send"> </form>
This produces

Before we look at the other types of form elements, let's create a complete form that we can use to collect information from a webpage. <form>
<input type="text" size="20">
<input type="submit" value="Click to E-mail info">
</form>
This produces

If you click on the button, it's supposed to send the info inside the form to you by email. Go ahead and click the button. Nothing happens.

To make the button work, we have to add action="" attribute to the <form> tag, like this <form action="">.

The action attribute tells the web browser what to do when the submit button is clicked. In our case, we want the form to be sent to us by email. In that case, we must add the email address to be sent to, like this

Just change email_address to your real email address, and users visiting your webpage can send you info by email. To send the same message to more than one email address, just separate all the addresses by commas. E.g. mailto:email_address1,email_address2,email_address3.

The full html then is:

We can also label our form, so the user can know what info we want.

<form action="mailto:email_address">
Please enter your full name: <input type="text" size="20">
<input type="submit" value="Click to E-mail info">
</form>

Now type something into the form and click the button, it should try to send the form by email.

Note that we have used mailto: here for collecting user info. This is a totally unreliable method. Depending on the user's system, the form may be sent by email, or a blank email interface may be opened on your screen.
A reliable way to send data using a form is to use CGI or other server side scripting language like PHP. Unfortunately, special conditions are required to use these methods. So learn more by searching on the Internet for more info about CGI, PHP, ASP, etc.

Next, we must tell the browser how to encode the info inside the form by adding another attribute ENCTYPE. One can see that ENCTYPE means ENCoding TYPE. In our case, we want the info sent as plain text, instead of binary. We will learn about other encoding styles later.

One last attribute to add to the form tag is METHOD. Two values are possible for this attribute: POST and GET.

In most HTML forms, you should use POST. The use of GET is beyond the level of this turorial, but to explain briefly, it allows the info in the form to be carried as a query string. This becomes very useful when you learn web scripting.

Adding a subject

When you use the form we have so far to send info by email, the SUBJECT in the email will be a default value. That default value depends on the browser. Netscape for example, will say Form posted from Mozilla. If you want to change the subject, do the following:

Textarea

<input type="text"> only allows you to enter one line of text at a time. With TEXTAREA tag, you can type multiple lines of text.

Instead of using <input type=""> tag as we did for text form, you use <textarea> </textarea> for creating a textarea. Also, note that textarea has a closing tag.

This produces

Other attributes of TEXTAREA

cols will change the number of columns, i.e. alters the width.
rows controls the number of rows

name does the same thing as in TEXT form.

TEXTAREA does not have a value attribute. If you want a default value in your textarea, just type it between the opening and closing tags, like this <textarea>This is a default value<textarea>.

wrap="off" causes the text in the textarea to be one long text. The text also gets sent as one long text. This is the same as nowrap.

Type some text into the box below and see what happens.

Note that the Browse... button is created automatically with INPUT TYPE="FILE".

Radio Buttons

Radio buttons are used when you want a user to select only one option out of several. The options are usually mutually exclusive, i.e. only one option can be correct out of the available options.

Here is an example:

Since only one of the options can be selected, it means all the radio elements must have the same name attribute.

If they have the same name attribute, how then can we differentiate between them? We differentiate with the value attribute. The html code for the above is:

With the above code, non of the radio buttons will be selected the first time the page loads.
What if you want one of the buttons to be selected as default?
That is done using checked

Checkboxes

Checkboxes are used when a user can select more than one option from several options.

As opposed to radio buttons that all have the same name and different values, checkboxes have different names, and the same value.

Example:

Here is the code:

<form>
What continents have you visited?

<input type="checkbox" name="Australia" value="Y"> Australia
<input type="checkbox" name="Europe" value="Y"> Europe
<input type="checkbox" name="Africa" value="Y"> Africa
<input type="checkbox" name="North America" value="Y"> North America
<input type="checkbox" name="Asia" value="Y"> Asia
<input type="checkbox" name="Antarctica" value="Y"> Antarctica
<input type="checkbox" name="South America" value="Y"> South America
</form>

The value can be anything you want.

If you wish to pre-check some of the boxes, just add checked to the tags.

E.g. <input type="checkbox" name="Asia" value="Y" checked> Asia
You can pre-check as many of them as you wish.

Selects

Another type of form element is the select.

Here is an example.

Basically, a select is a dropdown box containing several options to choose from. Whatever option is chosen, is what will get sent. It would be as though the other options never exists in the form.

If you click on the arrow on the select above, you would see all the options available.

To create a select, we take the select tag <select> </select>.

Within the select tags, we add option tags

The above code will produce this

It's all empty. All we have is a form without any labels. Let's add the first option

<select>
<option>option one</option>
</select>

We can then add more options

<select>
<option>option one</option>
<option>option two</option>
<option>option three</option>
</select>

You just keep adding more options, without a limit.

You'll notice that the <option> tag also has a closing </option> tag. That is correct. However, the closing tag is optional.

<select>
<option>option one
<option>option two
<option>option three
</select>

A select tag must have a name attribute to identify it among other form elements.

<select name="the_name">
<option>option one</option>
</select>

The option tags can have value attribute. Now, pay attention to this. When you use a value attribute, it becomes the value of that particular option. If you don't use a value attribute, then the value of the option is what is outside the option tag.

<select name="the_name">
<option value="opt one">option one</option>
</select>

The value of the above option tag will be opt one.

<select name="the_name">
<option>option one</option>
</select>

In this case, because we didn't use the value attribute, the value of the option tag would be option one.

Basically, the value attribute has priority when used.

Your comments about his tutorial are welcome, so we I can improve on it.

Home | Comments, suggestions?