HTML Tutor - Getting Started
Part 5
All About Forms
Forms are used to enable visitors to a site to send information about themselves or a topic of interest to someone (usually the page owner) by answering a few questions.
Whether it's to receive information from the user or to allow access to certain parts of your site, forms can be very valuable.
Firstly, examine the basic forms tags. They are <FORM></FORM>. Now, tell the form what to do.
<FORM METHOD=POST ACTION="mailto:username@domain.com">
There are two different methods: POST and GET. GET is used to retrieve information from the site. For example:
<FORM METHOD=GET ACTION="index.html">
<INPUT TYPE="submit" VALUE="Click Here To Reload This Page">
</FORM>
POST will work for almost every function you'll ever require. The ACTION= is what tells the form what to do. If you wanted the form to be mailed to someone, you could use the first example. However, you may not like what gets emailed to you -- it looks like this:
name+john&+henry&+address+p+o+box&...
Obviously, this is hard to read. You can try adding ENCTYPE="TEXT/PLAIN" to take it away for newer browsers. There's also a program called mailto: formatter that changes this garbled line pf understandable text into a more readable form.
After the first form tag, you can include any of the following form elements:
For example:
<INPUT TYPE="radio"> Example
Checkboxes: <INPUT TYPE="checkbox" NAME="whatever" VALUE="whatever">
Instead of giving you a round button, checkboxes give you a square. The boxes are nice if you want to allow a lot of choices.
For example:
<INPUT TYPE="checkbox">
Password Box: <INPUT TYPE="password" NAME="whatever" VALUE="whatever">
Password boxes allow users to enter text, but instead od displaying the input, it displays ******* where the letters are typed.
For example:
<INPUT TYPE="password" SIZE=30>
TextArea: <TEXTAREA NAME="textarea" ROWS=3 COLS=40>
This gives the user a textarea in which to answer questions that require answers longer than a couple of words. You can also add the line wrap="virtual" to make the text fit exactly inside the box without horizontal scrollbars.
For example:
<TEXTAREA ROWS=3 COLS=40></TEXTAREA>
Drop-down lists
These come in handy if you want the user to see a list of choices but you don't want to use radios or checkboxes. You can set the select option up very easily.
For example: <SELECT NAME="select" SIZE= 1> <OPTION> Option #1 <OPTION> Option #2 <OPTION> Option #3 </SELECT>
Drop-down lists are very simple to use. You can change the size to allow as many choices as you would like to be seen ('1' is here, but you can have as many as you like.). If you want to allow more than one selection, just insert 'multiple' after select.
Submit: <INPUT TYPE="submit" VALUE="Submit!">
This is the button users will click to send the form. You can change the VALUE= to whatever you like.
Reset: <INPUT TYPE="reset" VALUE="Clear This Form">
Does exactly what it says--resets the form. Again, the VALUE="" can be whatever you want the button to say.
Wrap-Up
That should be enough to get you started. An excellent method of learning HTML is to find a Web page you like, do a "view source" (right-click on the page), and look at how it is constructed. Beware though, not all pages are properly written. You can always validate your pages at the W3C Markup Validation Service. It is a free service that checks documents like HTML and XHTML for conformance to W3C Recommendations and other standards.
|
