HTML Tutor - Getting Started (Part 5)
By Michael Hayman 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. [ Click here to move to the next part of the article ]
Firstly, examine the basic forms tags. They are <FORM></FORM>. Now, tell the form what to do.
<FORM METHOD=POST ACTION="mailto:firstname.lastname@example.org">
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">
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:
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:
<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.
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.
<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.
<TEXTAREA ROWS=3 COLS=40></TEXTAREA>
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.
Next: Summary »
Contact the WebDeveloper.com® staff
Last modified: 20
| || |
Join Editor-in-Chief David Fiedler and find truth, justice, and a clue or two.