Ken Ward's HTML Tutorial ...

Forms!

This is about creating forms. They were intended for server side processing of user input. They can, however, be used with Java Script to deal with user input. In this set of lessons we will look at how to use the basic building blocks of forms which we can use later with Java Script.


The action for the form is an URL, usually one that starts a server based program (cgi script), but it can refer to any file. There are two methods, post and get, "get" is also the default. To be compatible with XHTML, the form MUST have an action, even if it is, blank: action="".

<form action="index.htm" method="GET">

</form>

  If this form has a submit button, then pressing the button will open the URL index.htm. The following form has a text box and a reset button. Inside the form there is a text area with scroll bars. Try changing the text in the text box or the text area, or in both, and pressing the reset button to see what happens.

  The following buttons are RESET buttons within forms (actually three forms.) Press them and see what happens.


To learn how to make these buttons go to Buttons in Forms (or press the 'Buttons in Forms' button!!!)

Text Boxes

The following code, included within the form tags, of course, generates the box below.

<input type="text" name="tb1"  id="tb1" value="this is an input type=&quot;text&quot;" size="50" />

Note, this tag should be on one line (it is wrapped in the browser, but copies as one line). Also when there is a name tag, there should be an "id" to make the code campatible with future browsers (and XHTML). Also note that because the input tag doesn't have an end tag, it ends with " />", like similar so called empty tags.

Note that the value is the text which is displayed, and the size is the maximum number of characters displayed. However, the user can enter as many characters as he or she likes. The '&quot;' special character is used to make the quotation marks. If ordinary ones were used, the browser would get confused (poor thing.)

Text Area

Unlike the 'input type is text', the text area can have more than one line, and may have more than the stated number of rows of text, in which case, scroll bars will be displayed. The code and the text area are shown below:

<form><textarea rows="5" name="S1" cols="30">This is a text area.</textarea></form>

 

The COLS attribute gives the maximum number of characters displayed in a line, and the ROWS attribute gives the number of lines displayed. There can, as mentioned be more than the stated number of rows, and these will be visible to the user by scrolling. The example text area has only one line, and 5 rows are shown. See the example on the buttons page of a text area used to neatly show a long list of options. Its intended function, however, is to act as an imput for information to be sent to the server.

Let's look at buttons in forms, now!


[contents][back to: No Frames][Next: Buttons in Forms]


Most Recent Revision: 18-Oct-98.
Copyright © 1998

I am always pleased to hear from you.
Send your comments to
and please visit: New Life Course