Forms

Isn't it time you
updated your site?

(MAIL) FORMS

An HTML form does two things: First of all, it displays controls (text fields, lists of items, buttons, radio buttons, checkboxes etc.) in a Web page and allows the user to enter information through them. This is what the slang name widgets mean. I call them form controls. These do the job of figuring out what the user wants. Secondly, a form tells the browser where to send the information after it has been submitted by the user. This is also known as processing or submitting. The third part of the process, which is handling this information and doing something useful with it, such as displaying results, this area has nothing to do with HTML, it's a CGI generated mail.

HTML 4.0 offers a very comprehensive solution for using forms in HTML documents, which offers powerful data entry mechanisms and also addresses accessibility issues so that disabled people can use forms to their full extent. Internet Explorer 4.0 does a pretty good job of implementing most of this part of the specification with a few significant omissions. Internet Explorer 5.x has made no progress in this area, and supports the same features as version 4.0. Netscape Navigator 4.x implements a more simplistic version of forms closer to the HTML 3.2 specification, which is also representative of what other browsers support (including earlier versions of Internet Explorer and Navigator), while Mozilla currently does everything.

INPUT tag:

The INPUT tag is probably the most useful tag inside forms. It can generate buttons, input fields and checkboxes. In all cases, the NAME attribute must be set.

TYPE=text: This generates a input field, where the user can enter up to MAXLENGTH characters. The SIZE attribute lists the length of the input field (if the user enters more characters, the text will scroll). The VALUE attribute specifies the initial value for the input field.
TYPE=password: Same as TYPE=text, but the text will be hidden by "*" or similar characters. It is still sent in the clear to the server, though.
TYPE=checkbox: Produces a checkbox. It has two states, on and off. When it is on when the form is submitted, it will be sent as "name=on", otherwise it is ignored altogether. If you use CHECKED, it will come up checked (selected) initially.
TYPE=radio: Produces a radio button. A radio button always exists in a group. All members of this group should have the same NAME attribute, and different VALUES. The VALUE of the selected radio button will be sent to the server. You must specify CHECKED on exactly one radio button, which then will come up selected initially.
TYPE=submit: Produces a button, which when pressed sends the contents of the form to the server. You can have more than one submit button in the form. Each should have a different NAME. The name and value of the pressed button will be sent to the server as well. The value of the VALUE attribute is typically used as text on the submit button.
TYPE=reset: Also produces a button, which will restore the form to its original state if pressed. The value of the VALUE attribute is typically used as text on the reset button.
TYPE=file: Allows the user to upload a file. It is still very new, so it is not very widely supported. It is typically presented as an input box with a button to start browsing the local hard disk. This way, a user can specify one or more filename(s) to upload.
TYPE=hidden: Allows you to embed information in the form which you do not want changed. This can be useful if the document is generated by a script and you need to store state information. NAME and VALUE of this input field will be sent to the server without modifications.
TYPE=image: Functions similar to a submit button, but uses an image instead. The ALIGN attribute controls the alignment of the image. The coordinates of the selected region will also be sent to the server, in the form of "NAME.x=n&NAME.y=n". A text browser will treat it as identical to a normal submit button.

TEXTAREA tags:

The TEXTAREA tag, used inside FORMS, sets up an area in which the user can type text. This text will be sent to the server when the form is submitted. The user can enter more than one line (as opposed to <INPUT TYPE=text> which only permits one line), although he will have to break lines himself.

The NAME attribute assigns the text area a name, used by the script which processes the form. ROWS and COLS are used to specify the height and width of the text area, in number of characters.

and

The FORM tag:

This tag has one required attribute, ACTION, specifying the URL of a CGI script which processes the form and sends back feedback. There are two methods to send form data to a server. GET, the default, will send the form input in an URL, whereas POST sends it in the body of the submission. The latter method means you can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.

You can specify an encoding type with ENCTYPE, the default of "application/x-www-form-urlencoded" is most widely supported. An alternative is "text/plain", which is typically used in combination when the ACTION attribute points to a mailto: URL. If a browser supports both, the contents of the form is sent in plain text to the indicated recipient.

A form should always have at least one submit button. This can be done with <INPUT TYPE=submit NAME=submit> or with an image: <INPUT TYPE=image NAME=submit>.

More than one submit button is legal. If each submit button has a unique NAME attribute, the name of the selected submit button is sent along with the rest of the form input. This allows the parsing script to determine which button was pressed.

The URL specified in the ACTION attribute does not have to be a CGI script, although you can get pretty weird results if you try to feed data to a document which isn't a CGI script. A popular reason to do this is to get a "button" which when pressed takes you to a new page. This can be done with:

<FORM ACTION="mypage.htm" METHOD=GET>
<INPUT TYPE=submit NAME=one VALUE="Why Me?">
</FORM>

The Text Box

This is a basic box that allows for one line of text.

There are three parts to the command. Here's what they are and what they mean:

INPUT TYPE tells the computer that a form item is going to be placed here.

NAME is the name you assign to the box. When you receive the email, from this text box, it will say: name=(this_is_what_was_filled_in) this information was written in the box marked "name". You can actually call it whatever you'd like,( address, URL, email, etc.

SIZE denotes how many characters long this box will be. Make it 60 or 100,

The Text Area Box

This allows your viewer to write something. The Text Box (above) and the Text Area are different because the Text Box only allows for one line. The Text Area is much larger and will allow for as many words as you want.

You may have to click on the box to write in it. The code for the text box is::

TEXTAREA (all one word): This tells the form command above that here is another form item.

NAME is the same as before. The information the reader puts in this box will arrive in your e-mail box.

ROWS tells the computer how many rows of text it will accept.

COLS tells the computer how many characters will be in each row.

This text box will accept 8 rows of text each being 50 characters long. You can resize the box bigger or smaller to fit your needs.

Input Type Buttons

The Radio Button

The circle is active and uses the mouse to click on it. When the radio button is chosen, it darkens.

Here's the code to place a radio button on your page.

You see, the TYPE in the command is "radio." The command is long, but it's not that difficult to understand. Here are its four parts and what they mean:

INPUT: Tells the computer "That there is a form item"

TYPE: This tells the computer what type of form item it will be.

VALUE is the name assigned to the button.

This is going to be sent to you via email. Each of the radio buttons is assigned the "VALUE" of each of your pages. If person chooses the radio button assigned to your home page. That button's VALUE might be, "home_page."

When the form arrives, the e-mail would read: "home_page"

The Checkbox

The item it places on the page is square and it is marked with a check when chosen.

Here is an example of a checkbox:

With radio buttons, only one item under the NAME heading will arrive. With checkboxes, every item can be checked, can arrive.

SELECT tells the computer another form is present.

NAME: Same as above.

SIZE denotes the size of the box.

OPTION SELECTED denotes which option will appear in the box.

OPTION denotes another choice that will be visible when you click on the item.

</SELECT> finishes this form.