iCanCode/Tutorials/Basic Forms

Home
Tutorials
Flash
Images
About

Basic Forms

Here I go into how to make a form with HTML

Are you ready?

Good. Lets begin. Before I ramble on about all the different ways to input data you must first understand the form tag in which they are all enclosed.

<form action="FormProcessor" name="Form1" method="get">

Action tell the browser where to go when you submit the form. Name sets the name of the form useful if you use JavaScript. Method decides how the information is sent to the processing webpage. Get adds the data into the URL of the webpage, this is good if the page needs to be bookmarked. Post sends the data hidden from the user useful when handling personal information.

The first and simplest type of input method is the text box:

Add the value field into your code and you can make it preset to something:

<input type="text" align="left" maxlength="30" name="Text1" width="100">

But what if you wanted a larger text box? Well then you use the textarea tag. Watch:

<textarea cols="70" name="TextBox1" rows="4">See. Look how much room there is in here!</textarea>

Remember that textarea is a tag not a type of input.

OK. Now lets move onto some interesting things such as radio and check boxes:

This is a checked check box

<input type="checkbox" value="yes" name="CheckBox1" align="left" checked>

But I can set it to be unchecked if I leave the word "checked" out of my code:

Check boxes are good for when the user wants to select more than one answer, but if you want them to only select one answer you can use radio buttons:

<input type="radio" name="radioButtons" value="answer1" align="left">
<input type="radio" name="radioButtons" value="answer2" align="left">
<input type="radio" name="radioButtons" value="answer3" align="left">

Just like the check boxes you can set one to be selected. You must though name a group of radio buttons the same name, but different values.

Now for some very useful elements, drop down lists and menu items (Remember that these are made with the select tag they do not have there own one):

<select name="pulldown">
<option value="Pulldown1" selected>Choice one here.</option>
<option value="Pulldown2">Choice two here.</option>
<option value="Pulldown3">Choice three here.</option>
<option value="Pulldown4">Choice four here.</option>
<option value="Pulldown5">Choice five here.</option>
</select>

Add "selected" into your code to make one of the choices selected as I did with the first one.

Now for menu items. These are useful when you have a long list:

<select name="menu" size="5">
<option value="Value1">Value1</option>
<option value="Value2">Value2</option>
<option value="Value3">Value3</option>
etc..
</select>

If you add the word "multiple" into the select tag then you will enable the user to select more than option.

For the final and most important item of any form. A submit button:

<input type="submit" name="submitButton" value="Submit">

This can be named anything with the value field. You can also use an image as the submit button:

<input type="image" name="imageSubmit" value="submit" src="SubmitButton.gif">

This is useful if you have a small form such as a poll or to make a go button in a search, basically anywhere where size is an issue.

Another item you can put into a form is a reset button. These are useful for long forms.

<input type="reset" name="reset" align="left" value="Reset">

Now lets get onto some hard stuff. We talking about hidden fields, file buttons and password fields. First I'll show you a file button these are generally used to upload files on to websites.

<input type="file" value="browse..." name="browse">

Here is an example of a password field. You see these on most large websites:

<input type="password" name="password" value="password" width="100" maxlength="12">

It is a good idea not to use a "get" method to get the data from the form otherwise the password can be seen, use post instead.

OK, now for hidden fields. These carry data to a page that processes it, but the user can neither edit nor see them.

<input type="hidden" name="extraInformation" value="HahHah!">

Can't see anything, can you? These hidden fields are used to constantly carry around information about things so it always available

We have covered the basics of forms in HTML, but have not gone into depth about the hard parts such as passwords and hidden fields. Remember to use the different parametres for form elements to get the desired effect, always name them and make sure you use post or get correctly. Good luck!