Tutorial on Forms

[Blasphemy]

This tutorial is for those without a whole lot of knowledge about HTML.

Ever wanted to know how to add user input to your web pages? It's not that hard. The key to doing this is the <form> tag. Forms are just a bunch of input methods grouped together (radio boxes, check boxes, text fields)

<form> tags open and close your form. They define the properties of the form and surround the input methods. To create a new form, simply use the <form> tag.

e.g.

<form>
Your Form Here
</form>

This doesn't do anything for you, however, until you have added input methods. These are made up of <input> tags (which do not have to be closed). The syntax for <input> that you use is <input type="InputTypeHere" name="YourNameForTheInput"> What you name the input is important; it's the information that is sent to whatever it is processing the form.

There are three types of input fields: check boxes, text boxes, and radio buttons. To create any of them, just replace InputTypeHere in the above example with checkbox, text, or radio, respectively.

Now you can create a form with input fields. The question is, how do we submit the data? Well, using a submit button! We can do this with the following line: <input type="submit" name="Submit!"> Just add that in before you close your <form> tag.

There's one more thing we have to do. We have to edit our form tag. As of now, the submit button doesn't have anywhere to submit the data to. So, let's revise our form tag:

<form name="YourNameHere" action="ScriptOrCGILocation" method="GET or POST">

The action atribute determines what program or script will process the form data. The method is either Get or Post. Basically, if you use GET (the default), the parameters are in the address bar; if you use POST, they're not. There's more to it than that, but GET should work most of the time. If it doesn't, try POST. Or, read up on the difference between the two and figure out which to use.

Using everything posted above, let's create a sample form:

<form name="Sample" action ="process_user_info.php" method="GET">
Username:
<input type="text" name="username"><br>
Password:
<input type="text" name="password"><br>
<input type="submit" name="Login">
</form>

Other forms of input
There's another form of input that you may find yourself using. It's a drop down list, and I'm sure you've all seen it before. Lists are slightly more complicated, but still easy to create. To create a list, you use the <select> tag along with the name atribute. So, if we wanted to create a list titled Month, you would do the following:

<form>
<select name="Month">
</select>
</form>

That's pretty boring, though, since we don't have any options for the list. You create an option with the option tag, along with the value atribute. So, if you wanted to add some months to the above form, you would just add a few option tags, like so:

<form>
<select name"Month">
<option value="January">
<option value="February">
<option value="March">
etc.
</select>
</form>

There's one last thing I'm going to show you how to do with lists, and that's creating a default option. To make one of your options default, just add selected="selected" to your option tag, like so:

<option value="March" selected="Selected">

Now, when the page loads, March will be displayed, as opposed to whatever is the first in the list.

There's one final thing I'm going to cover in this tutorial, and that's a text-area. One line text boxes are all very well, but if you're going to create something like a forum, guestbook, or anywhere where the user needs to be able to type something lengthy, you use the <textarea> tag. By using the rows and cols attributes, we can define a text-area:

<textarea rows="5" cols="20">
Any text here.
</textarea>

Any text you put in between the opening and closing tags will appear in the text-area when the page is loaded. The required attribute rows specifies how many lines of text will be visible at once (if the user has more than that, a scrollbar is added). The cols attribute defines how many characters wide the text-area is; if the user inputs more characters on one line than this number, the last word on the line is displayed on the following line.

By the way, if you want to, you can use text-areas outside of form tags. However, if you're going to have the text-area contain user input, you need to specify a name for it using the name attribute. The last attribute I'll mention is the readonly attribute, which you can use to specify that the textarea may not be modified. You do this by adding readonly="readonly" to your tag.

<textarea rows="10" cols="100" name="example" readonly="readonly">Cannot be edited.</textarea>

The above line of code will create a text-area named example with the text "Cannot be edited" in it. As it says, the text cannot be edited.

My first article. Hope you liked it, and sorry that it was long-winded!

[ExCalibur]

Articles not bad bro, I actually liked it. Should help out some html novices, and many people have problems with this. Maybe you should use a little free webhost and make an example? Just a thought

[Blasphemy]

Thanks. I think creating online, working examples is a good idea. Do you know of any free webhosts that support forms? I tried freewebs and they don't allow forms.

By the way, I had a major edit and doubled the length or so. Sorry if anyone thinks it's too long.

[LastKiss]

Originally Posted by Blasphemy

Thanks. I think creating online, working examples is a good idea. Do you know of any free webhosts that support forms? I tried freewebs and they don't allow forms.

By the way, I had a major edit and doubled the length or so. Sorry if anyone thinks it's too long.

No Problem for me
Thx for the Tutorials