WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

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.

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:

<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:

Text Box: <INPUT TYPE="text" NAME="first name" SIZE=20>
A text box allows the user to type in a line of text. In this case, it's their first name. The size tells the browser how big the box should be. The name can be anything you want.

For example:
<INPUT TYPE="text" SIZE=30>

Hidden Box: <INPUT TYPE="hidden" NAME="whatever" VALUE="whatever">
This is not seen by the user, but is sent with whatever="whatever" in the response. There's no need for size. Some CGI scripts require this for setup variables.

Radio Buttons: <INPUT TYPE="radio" NAME="whatever" VALUE="whatever">
This will give you a small round button to click to make a choice. It works well when giving users options like Yes and No. However, it also limits users to one or the other. To stop this, just insert the attribute "multiple" into the line.

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:

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.

Next: Summary »

[ Click here to move to the next part of the article ]

Fast Jump to Anywhere on WebDeveloper.com®:

Contact the WebDeveloper.com® staff

Last modified: 20


Refresh Daily
Join Editor-in-Chief David Fiedler The Editor With No Time and find truth, justice, and a clue or two.

Browse by Category
[ Site Map ]

ActiveX / VBscript
Animated GIF Archive
CGI / Perl
Database Connectivity
Design / Graphics
HTML / Site Authoring Tools
Multimedia: Audio / Video / Streaming Technologies
Refresh Daily: Editorial Column
Servers & Server Tools
Site Design / Graphics
Site Management / Marketing / Log File Analysis

HTML5 Development Center

Recent Articles