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
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




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:

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

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

[ < HTML Tutor: Part 4 (Frames) ] [ HTML Tutor: Part 1 (Intro) > ]



HTML5 Development Center


Recent Articles