HTML tutorial - Form filling

Form filling

Forms are one of the most important features in HTML, and when you first look at them, they can also seem quite complicated. That's not really the case. Here's a web page that would create a query string like the example on the last screen.

<html>
<head><title>Nigel's form test page</title></head>
<body>
<h1>Please tell me about yourself</h1>
<form method=post action="/cgi-bin/scriptname">
What's your e-mail address?
<input name="address">
<h2>Are you a man or a woman?</h2>
Male <input type="radio" name="sex" value="male">
Female <input type="radio" name="sex" value="female">
<h2>What town do you live in?</h2>
<input name="town" value="London">
<hr>
Click on the button when you've filled in the form <input type="submit" value="Send info">
</form>
</body>
</html>

Here's the form that's produced by the HTML code. Most modern browsers support forms, including text based ones like Lynx.

The <form> tag tells your browser - and there are very few now that don't support forms - that it's found a form, how it should be sent to the web server, and what should happen when it's submitted. In this case, the script /cgi-bin/scriptname will be run. The 'method=post' means that the query string will be fed into your script, and is the preferred way of sending information. What it means is that your script will see lines that look like

name=nigel@stonewall.demon.co.uk
sex=male
town=London

which is often easier to understand than the long QUERY_STRING variable, which is all you'll see if you use the alternative 'method=get' alternative. The latter also limits the length of the query string to the maximum size of your environment, which means that you may not, for example, be able to let people type in long comments.

The other parts of the form are all <input> tags, and they all work in the same way. The 'type=' tells the browser what sort of field you want, and the name is the name of the variable that will be set.

We've used a few different types of field in our example. For the e-mail address, there's no type, so it's treated as a simple text field. The next entry can only be one of two choices, so to prevent people sending witty replies like 'Both,' we've used the 'radio' type. This works like the buttons on an old fashioned car radio, so choosing one unsets all the others with the same name. Since all you can do with the buttons is click on one of them, the 'value=' part of the tag says what result is sent back for each button.

The next field is another text field, but this time it also includes a value, which will appear on the form, already filled in. It can be changed, but saves people typing common values all the time.

Finally, there's a special type of field, called 'submit' which puts a button on the screen. When it's pressed, the completed form is sent to the web server. Normally, the button's labelled Submit, but in this case we've used the value option to change it to something more friendly.

There are plenty of other types of field that can be used, like drop down menus, and text areas; the complete list is in the box at the end of this part of the tutorial. They all work in the same way, though, so once you've mastered one you should be able to manage plenty of others.