Ron's Guide

This tutorial will give you a basic overview of forms, it will introduce the basic input fields and attributes.

---

If you have used the internet, you've no doubt seen a form. Forms are useful tools, they allow you to collect information from your visitors, such as in a feedback form, you can use them to make a poll like the one you see to the right, and a lot more.

The html involved in forms is quite simple, however the scripting needed to process these forms is not so easy and is beyond the scope of this tutorial. However, I can give you a link to a site that can send the information you gather from forms to your email, but first I'll show you how to make a form.

---

Let's begin with the form tag: <form>
The form tag is what starts off the form and is also where you define the action and method of the form.

the action is where you specify the url of the script that will process the form.
the method is how the form will be submitted, either Get or Post.

if the method is set to Get, the default method, the information from the form will be passed through the url... you'll be able to see it in the address bar.

if the method is set to Post the information will not be visible in the address bar.

put this all together and you'll get somthing that looks like:
<form action="process.php" method="get">

---

Now that you've got the opening form tag, you'll need some input elements...

Textboxes
<input type="text">... will produce:

some attributes that you can use for text boxes are value, name, size, and maxlength...

value is what is typed in the box or what you set as the default text for the box... for example, if you do somthing like...

<input type="text" value="blah blah blah">... the text 'blah blah blah' will appear in the textbox when the visitor loads the page.

name is just that... the name of that element. It is usually important in the processing of the form.
size can be used to set how large the input box is in length.
maxlength is the maximum amount of character you'll be able to type into the box.

Password boxes
<input type="password">... will produce:

the same attibutes for textboxes can be used for password boxes... Basically the only differences beween these and regular textboxes is one: the characters inside the box show up as asterisks (*) two: you cannot copy text from a password box.

Checkboxes
<input type="checkbox">... will produce:

value can be used with checkboxes but obviously wont have the same visual effect... nothing will appear any different if you have set a checkboxe's value, unlike textboxes and password boxes.

you can add the word 'checked' to the checkbox tag to have it pre-checked, i.e:
<input type="checkbox" checked> will produce:

Radio Buttons
<input type="radio">... will produce:

notice that you cannot select the radio button above, that's because it has no name, radio buttons must have a name in order to be selectable, the name of the radio button(s) is how the browser differentiates between groups of radio buttons on a page. The name of the radio button is just a description of what it is representing (as with other input elements) the value of the radio button is what will be processed...

For example, you might run across somthing like this:
(notice that the two radio buttons have the same name but different values)

Do you agree to our terms of service?<br>
Yes: <input type="radio" name="agree" value="yes"><br>
No : <input type="radio" name="agree" value="no">

which will produce:
Do you agree to our terms of service?
Yes:
No :

Select / Drop-down boxes    option 1option 2option 3

<select> starts out the drop-down box, and is where you specify name...
<option>text that will appear in the box</option>

this will create a new option that will appear when the user clicks on the box and is where you specify a value. you can add the word 'selected' into the option tag to have it pre-selected.

</select> ends the select element.

Textareas
<textarea>default text goes here...</textarea>

Some attributes for textareas:

• name - Just a name to describe what it is representing.
• cols - Sets the amount of columns the textarea has.
• rows - Sets the amount of rows the textarea has.
• wrap - Determines how the text will wrap.
  • off - Word wrapping is disabled, lines appear exactly as typed.
  • soft - The default setting... text is displayed with word wrapping it is submitted without carriage returns and line feeds.
  • hard - Text is displayed with word wrapping and submitted with soft returns and line feeds.

to apply this attributes just cram them inside the beginning textarea tag...
for example: <textarea rows="3" cols="25" name="feedback"></textarea>
which will produce:  

Hidden input elements
<input type="hidden" name="some name" value="some value">

The above code will create an input element that is invisible to the user, i haven't had much use for these, but I just thought i'd mention them.

Input images
<input type="image" src="url to image">

This will produce an input element that acts as a submit button, but will show up as the image you specify in the src, comes in handy when you want to replace this ugly thing: ...you can also use attributes that go along with images, such as alt, width, height, etc.

---

Ok, great I know how to make forms, but how do I make use of them!?

well... If you know a scripting language, such as php, perl, or even javascript, you can do a lot with the forms you create... If you don't know any of these, you can visit Response-o-matic... from there you can have the information from the forms emailed to you when the user submits it.

• Discuss this tutorial
• Rate this tutorial
• Tell a friend