How to Create HTML Website Forms Part 2

HTML tutorial 10

Author: Ian McAllister

This is lesson 10. If you haven't done lesson 1 yet, this lesson won't mean much to you. Please go back to lesson 1.

Choose a host that can help you.

If you are already with the SBI system everything is done for you. They will do all the technical part of form design in the background. I prefer more control, but I'm no longer a beginner.

If you already have another host for your web site, you will have to discuss the possibilities of using forms with your host. Some hosts can help you. I can tell you now that the free hosts will not offer you the facilities that you need.

If you haven't got a host yet, then I suggest
this one has what you need

Copy and paste these examples

Here is an example that has most of the possible input methods. The idea is that you can just copy an input line, or grouped input, and paste it into your program.

Then you can modify what you need to change, and you will have a working form already made.

Any changes that you make to the values, or options will not make the system fail.

You can try it offline and see what happens (offline will do everything except send the form) and keep making changes until it does just what you want. Yes, my favourite web site design technique is still trial and error!

=================================

Please enter your comments?<br>
<textarea value=Comments ROWS=4 COLS=50> default text </textarea><p>

This is a drop-down menu. It allows only one choice.
<select value=quality>
<option> Cheap and nasty</option>
<option> Standard</option>
<option selected> Connoseur hand-crafted</option>
</select><p>

This is a scroll box which allows multiple entries by holding down the control key.<br>
<select MULTIPLE value=Letterbox>
<option> Tin Can</option>
<option> Old Log</option>
<option selected> Brick</option>
<option> Concrete</option>
<option> Milk Crate</option>
</select><p>

This is a text box. Please enter your value
<input type=text value="First value" value="John Smith" SIZE=25 MAXLENGTH=20><p>

Your e-mail
<input type=text value=email> <p>

Using checkboxes rather than scroll boxes. Note the strong hint that they buy the brick letterbox.<br>
<input type=checkbox value=checkbox value="Tin Can">Tin Can<br>
<input type=checkbox value=checkbox value="Old Log">Old Log<br>
<input type=checkbox value=checkbox value=Brick CHECKED>Brick<br>
<input type=checkbox value=checkbox value=Concrete>Concrete<br>
<input type=checkbox value=checkbox value="Milk Crate">Milk Crate<p>

You can do the same thing as a pop-up menu, using radio buttons. Suggest the most expensive.<br>
<input type=radio value=Quality value=Cheap>Cheap and nasty<br>
<input type=radio value=Quality value=Standard>Standard quality<br>
<input type=radio value=Quality value=Superior CHECKED>Connoseur hand-crafted<br>

This is a password input
<input type=password value=password><p>

</form>

=================================

I've some bad news for you. The academics have decided that in the latest version of html you are only allowed to use lower-case letters for variables such as type and value which must now be written as type and value. So you'll have to change them all. This should be easy in your editor. Tell it to find TYPE and replace it with type - and so on.

Points to learn from the above example

Last lesson we covered the textarea and select methods of gathering information.

This lesson covers the input methods of getting information from a form.

Text boxes

Find where it says "This is a text box. Please enter your value". You would replace that with your introduction to the text box, such as "Street"

There are two examples of the text box, one with full details used, and the other with minimum details.

value contains the text that will appear in the text box before your visitor changes it..
SIZE is the length of the box in characters, and
MAXLENGTH is the length in characters (it scrolls when a visitor enters more) of what your visitor can enter.
The "email" value must be exact so it will appear in the "From" field of the e-mailed data you receive.

Checkboxes for multiple entries

The checkbox group is made up of a separate input for each checkbox, all having the same value.

The return information will have the value followed by a list of each box checked, separated by commas.

Text outside the tags gives explanations that the visitor will see. You can put it before or after (or above or below the boxes though that would be confusing) and arrange paragraphs or line breaks where you want them. You can also use a table to position everything where you want it.

For instance, you could place all the checkboxes in one line, with a word before each to say what the checkbox means. I chose to place them vertically.

The word CHECKED is used to put a check beforehand into a checkbox, as a hint to the user.. Several boxes can be checked.

value is the value that will be returned (e-mailed) if that checkbox is ticked for that particular value.

Only one radio button can be selected

The radio input group too is made up of a separate input for each radio button, all having the same value.

The difference is that the type is radio, and only one button can be clicked. The comments about formatting apply and the use of the word CHECKED.

Passwords

The password type is one you are unlikely to use, except in interactive forms. It is a text box that doesn't show the characters that have been typed in, but will e-mail them to you.

More hidden inputs

Next we have hidden inputs that will affect the page that appears after the visitor clicks the submit button.

value=title decides the title of the next page. If you want to have a link for the visitor to click (such as to the home page) you would use the next two items in the example. Everything except the value must remain unchanged.

You can have a reset button that clears all the data entered if the visitor has made lots of mistakes. I don't see the point in it, because if you only make one mistake, you wouldn't want to reset everything. You could cursor up and change the one item.

As in last lesson, I have missed off the submit button, because I don't want to get e-mail about letterboxes.

This ends the lessons in this tutorial. If you would like to see a lesson on some aspect that I didn't cover, please contact me with the suggestion (using my contact button below). Also please let me know if you spot one of my mistakes.

I'll even answer your questions about html as long as I don't get swamped with questions.

So now you know HTML. Next comes profitable web design.