Forms

Reading Pages 111-121

Forms are used to get information from the user and send it back to the server. There the server can process the data and send a possibly different web page back to the user. This allows a form of interaction with the user. Forms are a collection of input objects, like buttons, text boxes and selection lists.

First, draw a picture of what you want your form to look like, include labels for the input elements, positions, colors, sizes, etc. Also mark down any default values and constraints. For example, in-country phone numbers have 10 digits. Then we can start translating this into code.

The form tag controls the whole form. It has a few attributes. You should always give your forms a name. This will come in very handy when writing JavaScript to do validation. The action attribute will be discussed later, along with the method one. Inside the form tag will go all the form elements along with the HTML to control the formatting. Tables are very helpful for this.

The input tag creates several kinds of fields. It is wise to give names to all form elements so they are easy to refer to later.

The textbox form element is a one line box for entering text. It looks like
<input type="text">
Attributes include

name=""The name of the element
size="number" This is the number of chars wide to make the box. The default is 20. This does not limit the amount of text the user can type, just the width of the box.
maxlength="number" limits the number of characters the user can type.
value="default text" This appears in the box when the page is displayed.
<input type="text" value="initial text"></input>

There is a special type of text box called the password box that looks just like the above, but doesn't display what the user types.

A select list is like a pull down menu. The user can select an item from the list and the selection is sent to the server. They can also select multiple entries if you want to allow that. The list shows up as a scrollable list on the display. First there is a select tag to describe the list as a whole.


<select
name=""The name of the element
size="number" Number of items to display in window
multiple Use if you want to allow multiple choices

Inside the select tag will be one or more option tags. Each of these describes one item on the list.


<option>
value="" String sent to server if this option is selected
selected This option is the default

The text between the option and end option tags is what is displayed.

<select>
   <option>First Choice</option>
   <option>Second Choice</option>
   <option>Third Choice</option>
</select>

There are a number of types of buttons that can be displayed. Radio buttons are a set of related buttons, only one of which can be chosen. Choosing one un-chooses any others.


<input type="radio"
name="" Group name
value="" String sent to server if this option is selected
checked This option is the default

All the radio buttons in a group must have the same name. The value from the chosen one is sent to the server. If you want one of them to be the default, use the checked attribute.

WBEZ<input type="radio" name="list" value="WBEZ"> <br>
WXRT<input type="radio" name="list" value="WXRT"> <br>
WKRP<input type="radio" name="list" value="WKRP">
WBEZ
WXRT
WKRP

Check boxes are either on or off but aren't grouped.


<input type="checkbox">
name="" Element name
value="" String sent to server if this option is selected
checked This option is the default
WBEZ<input type="checkbox" name="check1" value="WBEZ"> <br>
WXRT<input type="checkbox" name="check2" value="WXRT"> <br>
WKRP<input type="checkbox" name="check3" value="WKRP">
WBEZ
WXRT
WKRP

When should you use radio buttons versus a select list? If the list is short and not multiple, use radio buttons. If long or you need multiple, select. Short multiple lists could be checkboxes.

Some times you need a bigger area to enter text. The textarea does this,


<textarea>
name="" Element name
rows="number" The number of lines to show
cols="number" The number of characters wide
wrap="off,virtual,physical" off means it just keeps going and only part of the text will be seen, but the whole thing will be sent to the server. virtual does line wrapping but no newlines are sent to the server. physical puts newlines in the text to be sent. It doesn't wrap the default text.

Between the open and close tag would go the default text for the area. The wrap attribute controls what happens when the user gets to the right side of the box.

<textarea name="comments" cols="10" rows="5">
Some initial text
</textarea>

There are several types of buttons that can be put on a form.

The simplest and most common are the submit and reset buttons. The submit button sends the information from the form to the server. Before the user clicks on this button, nothing they have entered has been sent.


<input type="submit">
name="" Element name
value="" text to appear on the button

You could have several submit buttons with different names and values so the user could leave after filling out only part of the form.

The reset button clears all the user data out of the form and restores it to condition it was when we started. It has a type=reset and all the same attributes as the submit button


We can have a kind of image map in a form. The image field tag sends back the x,y coordinates that the user clicked on.


<input type="image">
name="" Element name
value="" String sent to server if this option is selected
src="" Image URL like the img tag

The data is sent as name.x_coord,value.y_coord.

<input type="image" name="itest" value="click" src="../images/halfdome.jpg"></input>

You can have hidden fields on the form. The information from these are sent to the server but nothing is shown on the page. These might contain user id information, the state of the interaction, the name of the web page, anything that we want the server to know, but don't want the user to have to enter.


<input type="hidden">
name="" Element name
value="" String sent to server if this option is selected
<input type="hidden" name="secret" value="state"> </input>

There are some new additions to the form tags that might not be available to all browsers.

The button tag can be used to implement the submit and reset buttons. It is a bit more flexible.


<button>
name="" Element name
value="" String sent to server if this option is selected
type="submit,reset,button" submit and reset have the same meanings as the ones above. The button is a general purpose button.

Between the start and end button tags can be a bunch of HTML. This will appear on the button.

<button name="validate" value="test2" type="button">
<i>Button</i> <sup>Name</sup>
</button>

The label tag attaches text to a form element. There is no automatic text put in the form and we have to use HTML tags and our own text to label form elements. The label tag helps with this.


<label>
name="" Element name
for="" The name of the element for which this is a label

Between the start and end tag is the text that will appear by the field element. One advantage is that the labels can be in one place and easily edited.

<label name="label1" for="comments">
This should be by the textarea field<br>
See the label tag below
</label>

There are also tags to group a bunch of form elements together. The elements in a field set are grouped together and surrounded by a box to show them as a separate group. The elements to be grouped are put between the start and end fieldset tags.


<fieldset>
name="" Element name

The legend tag is a bit of text that describes the group.


<legend>
align="" alignment of the legend
<fieldset>
<legend align="top">More radio buttons</legend>
   <input type="radio" name="more" value="one">One<br>
   <input type="radio" name="more" value="two">Two<br>
   <input type="radio" name="more" value="three">Three
</fieldset>
More radio buttons One
Two
Three

Another attribute was added to all form elements. The tabindex attribute controls the order that the elements are visited when the user hits the tab key.

The action attribute of the form tag is a URL for the program that will process the data. To support forms the HTTP was extended to add the Common Gateway Interface (CGI). When a form is submitted, the contents of the form are collected into a specially formatted string. This string consists of a list of name=value pairs separated by ampersands (&). The name part is the name attribute on the form elements. The value part is the value attribute on the form elements. There are special encodings to handle spaces, quotes and other characters.

The form tag has a method attribute. This controls how the program mentioned in the action attribute processes the data from the form. If the method is get, the data is appended to the URL and the program gets it from there. If it is post, the input is gotten from the standard input. That is, it doesn't come from the URL but from the operating system.

The post method is preferred for two reasons. One is that in can handle larger forms more easily, especially those that contain textareas. The other is that the form contents don't show up as part of the URL in the web browsers location box. This not only looks better, but reduces the number of clues about how the CGI program works.

A pretty extensive example is here.