Starting your Form
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:
- action="filename" - This is the location of the script that will recieve the inputs from the submitted form. If it is absent, then the default is to the same document that the form is declared in.
- method="post|get" - This is the method by which the information is submitted to the query script. Generally, "Post" is used, but it depends on the way that your server works.
- enctype="mimetype" - Only applies if 'method="post"', and allows you to define the type of encoding that is used on the input data. Generally, you'll not need to set this parameter.
- target="window" - Works just like the target function in a frames page, and defines where the output of the "action" will be directed to.
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.
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:
- type="text|password|checkbox|radio|hidden|image|file|submit|reset|button" - Because there are so many possibilities for this attribute, I'm going to look at what each one does individually:
- text - Specifies a single line text entry field, and this is also the default should you leave this preference out.
- password - This also specifies a single line text field, like the above, except when you enter text, it is displayed only as asterisks, or whatever the default character is for hidden text.
- checkbox - Specifies a button that can either be "on" or "off".
- radio - Same as checkbox, but if there are more than one with the same name, they become mutually exclusive, meaning only one can be checked as "on" at any one time.
- hidden - allows you to specify a name and a value within the form (possibly for use with a script) without showing it to the user. Both "name" and "value" are required fields here. We will come onto them in a few minutes.
- image - This works sort of like an imagemap. If the image is clicked on, then the form, and all the contents, plus the coordinates that the mousepointer was over on the image are submitted. You will need to specify a source "src" and are free to use the "align" attribute. A "name" is required.
- file - Allows a file to be attached to the form for submission by the user. "Name" is a required field here.
- submit - Submits the form information
- reset - Returns all of the elements between the <form> and </form> tags to their defualt values.
- button - Makes the input field a button that may be set up to perform a specific task.
Having got that bit out of the way, here are the rest of the attributes that you can use:
- name="name" - For the purposes of the script that is interpreting your inputs, and can only be absent for types "submit" and "reset".
- value="*" - This specifies a value to be assigned to a particular input field. If it's a text based field, then it will specify the default value in the box (if it is not present in such a situation, the field will remain empty), or it will assign a status to a checkbox or radio button. Finally, if you have a button, submit, or reset, then it will be the label on the button.
- checked - Refers specifically to checkboxes and radio buttons, and will cause them to be checked by default.
- size=width|width,height - Allows you to set the size of the text entry fields in numbers of characters, either only in width, or as a width and height entry. Generally, now, we use a TEXTAREA for multiple lines, which we shall come onto later.
- maxlength=x - Allows you to set an upper limit to the ammount of characters submitted in the field, if it is a text field. Maxlength can be greater than the size, and the input field will scroll appropriately. The default here is unlimited.
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:
- name="name" - Compulsory, and the same as every other occasion that we've used it.
- size=* - This is a nice function that allows you to decide between a pull-down menu, and a scrolling list. If you leave it out, or define size=1, then you will get a pull-down menu, but if you have size=2 or more, then that will give you a scrolling list, where the number of entrys that are visible at any one time is the number that you have assigned as the size.
- multiple - This forces the menu to be a scrolling list, if the browser supports that function, regardless of size, and allows you to select more than one item in that list.
So you could add this to the above code, between the form tags:
<select name="menu" size=3 multiple>
<option selected>Option 1
<option selected>Option 3
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.
- name="name" - As usual.
- rows=* - Defining the width of the text area in numbers of fixed width characters.
- cols=* - Defining the height of the text area in numbers of lines of text.
- wrap="off|virtual|physical" - Defines the word-wrapping format of the text area. If left as off, the lines are sent as typed. If virtual, the user is displayed a word-wrapping text area, but the text is submitted as one long line. Finally, if Physical, then the user sees the word wrap, and the text is transmitted at all wrap points.
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:
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.
[Introduction to HTML]
[Building an HTML Document Template]
[Basic Text Formatting]
[Advanced Text Formatting, plus Other Tags]
[Client-Side Image Maps]
[Glossary of Terms]
Return to Front Page