Starting your Form

Forms are another good way to achieve user interaction on websites. A lot of the time, though, you will need to have access to a CGI (Common Gateway Interface) script that will be written in something like JavaScript, or Perl, that will process the information gathered by your form. Unfortunately, we shall not be dealing with any of that here, because it is far advanced from HTML, and requires some degree of programming experience. Here we shall just be looking at building the forms front-end to such applications.

As always, we shall start this section with a look at how to declare a forms existance, simply by using the tags:

<form> and </form>

There are a few preferences that you can set inside the FORM tag. This is the part where it can get confusing:

So a form declaration might look something like this:

<form name="form1" action="script.cgi" method="post" enctype="multipart/form-data" target="main">

...Form Fields ...


Most of the time, if you're setting up a form front-end, you will find it easy enough to find out from your server what parameters to set inside the tag.

Input Fields

Now that you can set up the existance of a form, you will want to put things in it. To do this, what you have to do is employ the <input> tag. This particular tag is very versatile indeed, so listing and explaining the attributes is going to be fairly lengthly. Here we go:

So you might see a form code that looks something like this:

<form name="form2" action="form.cgi" method=post>
	<input type=text name="text1" value="Type Here" size=50 maxlength=100>
	<input type=image src="image.gif" align=middle height=100 width=100 name="image1">
	<input type=submit name="submit" value="Send Me!">

Which would produce a form looking something like this, depending on how you formatted the layout, which I have not shown above:

Note that INPUT tags are stand-alone tags, and need no closing.


INPUT tags are not the only way to supply information to forms, though. If you want to have something that will look really good, then you can use a menu, which are interpreted as pull-downs by many browsers, although not all of them. The tags that control this are:

<select> and </select>

And to define the menu items, you put everything between the tags after an <option> tag. This tag has only one parameter that can be set, and this is:

<option selected>Menu Item

Which defines that menu item as being the default value.

There are more attributes that go inside the SELECT tag, though, and here they are:

So you could add this to the above code, between the form tags:

<select name="menu" size=3 multiple>
<option selected>Option 1
<option>Option 2
<option selected>Option 3
<option>Option 4

Which might look something like this:


Finally, the last way to have an input field in your form is to use the following:

<textarea> and </textarea>

This is a strange function, because unlike the input tags, the text that appears as the default is typed between the beginning and end textarea tags. You'll see how it works in a moment, let us just look at the parameters that can be set.

So, you could add a textarea window now to our above form thus:

<textarea name="text_input" rows=4 cols=50 wrap="virtual">Hello</textarea>

Which produces something like:

That's all you need to know to build a front-end to a form, and you can have JavaScript functions that may operate on the user's machine, that can interpret the inputs to the form, either after submission, or on the fly, but that's not for this tutorial.

The last thing that you need to know, with regard to forms is that once you define a FORM tag, then not everything between the begin and end tags has to be relevant to forms. You can define a form, and then build a table, in which to put your entry fields, and this will cause no problems. Only INPUT, SELECT, and TEXTAREA will be interpreted as form items, and everything else will act just like it did outside the form.

Now have a go at the exercise for this section.

Once you have done that, move on to the next tutorial page.

[Index] [Introduction to HTML] [Building an HTML Document Template] [Basic Text Formatting] [Image Includes] [Anchor Tags] [Tables] [Advanced Text Formatting, plus Other Tags] [Lists] [Client-Side Image Maps] [Very Basic JavaScript] [Frames] [Forms] [Conclusion] [Reference List] [Glossary of Terms]

Return to Front Page