An example of Forms

Look at the following example:

<HTML>
<HEAD>
<TITLE>Ilustrating FORMS</TITLE></HEAD>
<BODY>
<FORM action="mailto:your_name@your_address" method="post">

<P>Text field: <INPUT TYPE="text" NAME="username" SIZE=20 VALUE="YYY">

<P>Text area: <TEXTAREA NAME="textarea" ROWS=5 COLS=30> </TEXTAREA>

<P>Password: <INPUT TYPE="password" NAME="password" SIZE=10 VALUE="ABC"

<P>Radio Buttons: <INPUT TYPE="radio" NAME="rb" VALUE="X" CHECKED> X
                  <INPUT TYPE="radio" NAME="rb" VALUE="Y"> Y
                  <INPUT TYPE="radio" NAME="rb" VALUE="Z"> Z

<P>Check Boxes: <INPUT TYPE="checkbox" NAME="cb" VALUE=1> 1
                <INPUT TYPE="checkbox" NAME="cb" VALUE=2 CHECKED> 2
                <INPUT TYPE="checkbox" NAME="cb" VALUE=3 CHECKED> 3
                <INPUT TYPE="checkbox" NAME="cb" VALUE=4> 4

<P>Selection: <SELECT NAME="selection_field">
                   <OPTION SELECTED>option 1
                   <OPTION>option 2
                   <OPTION>option 3
                   <OPTION>option 4
              </SELECT>

<P>Reset buttons: <INPUT TYPE="reset">
                  <INPUT TYPE="reset" VALUE="Clear">

<P>Submission button: <INPUT TYPE="submit" NAME="submit" VALUE="Submit">

</FORM>
</BODY>
</HTML>

Click here to see the result of the above HTML code.

Let's try to explain now each element used in the above example.

At first, the INPUT element is used to create a single line text field that is a simple text entry field. The attribute SIZE, which is optional, indicates the width in characters of the field. The text entered can be longer than this. The length of the field will be unlimited if you don't specify the maximum number of characters, using the attribute MAXLENGTH (optional). The VALUE (optional) attribute serves to specify an initial value for the field.

Then we have created a multiple-line text field, using the TEXTAREA element. ROWS and COLS attribute defines the on-screen size of the field. If more data is entered, scrolling will be displayed there. And, if you type something before the </TEXTAREA> tag, it will be displayed as the initial value of the field.

A PASSWORD field is identical to a single-line edit text field, except that it does not display the characters entered by the user.

Then, there are three radio buttons (group of related "option buttons"). Be aware that only one of them can logically be selected at any one time. Each INPUT element, where TYPE="radio", defines a separate radio button. All the elements with the same value for the NAME attribute form a group. The VALUE attribute (required) specifies the data that will be sent. The CHECKED attribute is used to specify the radiobutton selected automatically when the form is first displayed.
Note:  Only one, or no buttons in a group, should have the CHECKED attribute specified.

Then you see check boxes, which are groups of related options buttons, but in contrast with radiobuttons, any number of them may be selected automatically.
Don't forget to use the VALUE attribute to give a value to each button.

Don't you have so much space? You can use selection fields instead of radio buttons or check boxes, to provide a set of options. The SELECT element has an optional attribute, MULTIPLE, which gives the user the possibility to choose several options at the same time (same as check boxes). If the SELECTED attribute is specified for the option, then this option is initially selected.

Then the INPUT element is used to create three buttons, two reset buttons (the second one has the VALUE="Clear") and a submit one. You will use the TYPE attribute to declare the type of button.

Note:  You may create buttons using the BUTTON element, too.

At last, it is created a graphical submit button. The value of the SRC attribute specifies the URL of the image that will decorate the button. As we are talking about images it is a good idea to provide alternate text for the image via ALT attribute.

back