<!--13 Forms-->

In this chapter you will learn about the different form fields i.e. the different ways the viewer can fill in your form. You will learn how to use these in your forms and how to receive your form results by e-mail. There are other ways in which you can receive your form results but they require a knowledge of CGI scripts.

You should note that the mailto forms taught in this tutorial will not work with Internet Explorer 3/3.01. I was not aware of this at first writing but have become aware of it thanks to the help of Steve Everhardt.

Thanks Steve

get me started

The start tag of a form is <form> and </form> is the end tag. The attributes set in the <form> tag are very important. Here is the completed tag:

<form action= "mailto:me@myhouse.com" method=post>

If you were using CGI scripts to handle your form the action attribute would lead to the URL of the script and method could be set to get. These do not matter to you though. If adding a form to your page set the same attributes as the above tag but obviously use your own e-mail address.

The next step is to customise your forms so as you will get the information you want from your viewers but also present it in the best possible way.

<textarea>

Textareas provide a space for the viewer to enter comments etc. There are three attributes of the <textarea> tag. They are name, rows and cols.

<textarea name= "comments" rows=4 cols=40>

name assigns a name to your textarea

rows sets the height of your area by the amount of rows of text will be visible at a time

cols sets the width of your area in characters

Therefore the above tag will produce a text box named comments which displays 4 lines of text with 40 characters on each line.

The <textarea> tag requires a </textarea> tag. Any text between these tags will appear in the text box when the form is loaded.

How will this look in my browser?

The listing in Notepad Viewer 13.1 displays as Explorer View 13.1 in Internet Explorer 4.

I would like ot thank Eugene Bielinski for his help with these tutorials. Eugene while reading my tutorial sent me continuous messages about spelling mistakes he had found. I hope I have manages to correct most of them!

Thanks Eugene

Thanks to Nicolas Dupont who suggested that I make the new text in the html builders bold. What a great idea!

Thanks Nicolas

You will learn more about the "name=" attribute after this explorer view.

Explorer View 13.1 - click on the image to see a bigger and clearer version

select lists

Select lists are used in multiple choice situations. The choices can appear in a list or in a drop down menu. See Explorer View 13.2.

Explorer View 13.2 - click on the image to see a bigger and clearer version

• When the arrow is clicked, a list similar to the scrolling list will drop down.

Here is the corresponding Notepad Viewer:

Thanks to Candy Burts for suggesting that the links in the images should open new browser windows. That was a fantastic idea.

Thanks Candy

As you can see both types were created with the same code except for one difference. The drop-down list does not specify the amount of choices there will be. If you want your select box to appear as a drop down box, don’t include the "size=" attribute. I will now explain all the tags and attributes.

TAGS

<select> signals the start of a list of options to appear in a select box

<option> has no end tag; signals the start of one of the options; must be

within the <select> and </select> tags

ATTRIBUTES

<select name= "choose1" size=4 multiple>

name assigns a name to the box, which will be used in the e-mail you

receive

size if set the select box will be a scrolling box, sets the amount of

options there will be

multiple if set the viewer will be able to choose more than one option by

holding down "ctrl" when choosing, the box will then always

appear as a scrolling list.

<option value= "type1" selected>

value sets what will appear after the name of the select box in the e-mail

selected if set then this option will already be selected when the form is

opened

If you are confused about the name and value attributes do not worry. all will be explained later on

Note: the text that you want displayed for the option should be displayed after the option tag and before the next one or in the case of the last option before the </select> tag.

input types
text

This is what as input text box looks like

Here is the completed tag:

<input type="text" name="e-mail" size=30 value="you@server.com" maxlength=50>

name sets the name that will appear on the e-mail

size sets the width of the box in characters

value sets the default text

maxlength sets the maximum amount of characters allowed in the box

password

The attributes are the same and it is displayed the same except that the text which is typed in appears as a number of asterisks i.e. ***********. To use password boxes set type to "password".

checkbox

A checkbox appears as a square box, if it is checked the box has a tick in it. It is very simple to use. This is the full tag:

<input type="checkbox" name="check" value="yes" checked>

name sets the name that will appear in the e-mail

value if the box is checked the value appears beside the name in the

e-mail

checked if this is set then the box will already be checked when it is loaded

radio

Radio boxes appear in groups of two or more, only one of them can be checked. They are commonly used for yes or no questions. Although they usually appear in groups, corresponding radio boxes do not have to be next to each other. All radio boxes within the <form> and </form> tags with the same name are treated as a group. By this I mean that only one of them can be checked. Here is a completed radio tag:

<input type="radio" name="decision" value="yes" checked>

name sets the name that will appear in the e-mail

value if this box is checked this value will appear next to the name in the

e-mail

checked if this is set then this radio box will be checked when the page is

loaded

You might have been confused by the opening paragraph that spoke about radio boxes scattered around the page. Hopefully this Notepad Viewer and corresponding Explorer View will help you understand.

The viewer of this collection of radio boxes will tick a maximum of two boxes because there are only two different names. It is however possible that s/he will forget to tick one of the collections. We can avoid having empty fields sent back to us by adding a "checked" attribute to one of the boxes.

Explorer View 13.3 - click on the image to get a bigger and clearer version

One of the checks will be next to either "Sandwich" or "Roll" the other will be next to one of the other six lines of text.

reset

This appears as a button. When the button is pressed all of the entry fields in the form are cleared or returned to their defaults.

<input type="reset" value="Clear everything">

value can be used to edit the text that appears on the button

submit

This also appears as a button. When it is pressed the information in the form is sent to the e-mail address specified in the <form> tag. If there is a URL of a CGI script set in the <form> tag then this button, when pressed tells the browser to load that URL.

<input type="submit" value="Send the form">

value can be used to edit the text that appears on the button

What will my e-mail look like?

You now know all of the different ways you can let your viewer give you information. But what will that information look like when presented in the e-mail?

The information will be received as an attachment with an e-mail. You can open this attachment in any text editor or even with your browser.

To show you what it will look like I will fill out a sample form, e-mail it to myself and then copy and paste the text in the attachment into this book. Firstly though I will show you the Notepad Viewer and Explorer View of the form.

This is what the form looked like before I filled it in:(click to see a bigger and clearer vrsion)

And this is what it looked like after I filled it in: (click on the image to see a bigger and clearer version)

This is how data was presented in the e-mail.

Notepad Viewer- Resulting E-mail

• all of the text was originally on one line with no spaces but I placed each individual part on its own line
• remember this is attached to the e-mail it is not the actual e-mail

There are many characters that will not present properly in the e-mail (we already know that spaces present as +). Here is a table displaying those characters and the way they are presented in the attachment.

HTML Builder- End of Lesson 9

The first document you must create is "form.html". This is what it looks like.

Notepad Viewer- HTML Builder 9.1(form.html)

The anchor for this will be placed in "builder.html" along with the paragraph about the lesson. Please add this to the end of "builder.html".

Notepad Viewer- HTML Builder 9.2(builder.html)

An anchor to the paragraph must now be placed in "menu.html" and in "detailed.html". This is what the anchor in "menu.html" looks like:

<a href="builder.html#lesson9" target="window">Lesson 9</a>

This is the new list item I want you to add to "detailed.html":

<li><a href="builder.html#lesson9" title="Paragraph about what I learned from Lesson 9">Lesson 9</a>

<ul type=circle>

<li>Creating forms

<li>Textareas

<li>Select boxes

<li>Input fields

</ul>

Finally we should add a title to "index.html":

<head>

<title>I now completely Understand HTML 3.2</title>

</head>

It’s all over (or is it?)

So that’s it, you’ve reached the end of the book, the peek of the mountain but is it really the end? I think not. This is the beginning of your web publishing days. It is now time for you to leave the real world (which can be boring at times) and venture out into a place we call the Web. Make sure to use all your newly acquired skills as you prepare to inform the Web of your presence. Don’t forget to make your page interesting, please!

Please send me your comments and ideas, after all you did get the book for free.

home    comment    more downloads    download this