HTML Reference Sheet - Frames and Forms


What

Tag Format

Details

Basic Frame Document

<HTML>

<HEAD>

<TITLE> … Text of Title</TITLE>

</HEAD>

<FRAMESET>

… <FRAME> tags

</FRAMESET>

</HTML>

Allows you to partition the screen into cells. Each cell will be assigned a different HTML file.

FrameSets

<FRAMESET ROWS = "row height list" COLS = "column width list">

Row height list and column width lists have one entry for each cell, each entry can be an absolute pixel value, percentage of screen space, or "*" which says use up what’s left over.

E.g. <FRAMESET ROWS="100, 50%, *" COLS="200, 25%, *">

Frame

<FRAME SRC = "url" NAME = "window name" MARGINWIDTH = N MARGINHEIGHT=N NORESIZE SCROLLING="yes/no/auto" >

Specifies what will appear in each cell. FRAME tags should only appear between the <FRAMESET> and </FRAMESET>. Cells are filled using the frames going across the rows. Margin height/width are in pixels, NORESIZE is optional and specifies whether or not user should be allowed to make a frame bigger. Window name is important and is used to target the output of forms and links.

Targeting windows - BASE

<BASE TARGET="window name">

This tag should appear in the header section and defines the default window to use when following links. This enables you to use one window (frame) to hold a list of links and another to display the information.

Targeting Windows - A HREF

<A HREF = "url" Target="window name"> .. text .. </A>

Variation of the A HREF tag which allows you to specify which window will received the information if the user clicks on the link. Overrides the value in the BASE tag.

Targeting Windows - FORM

<FORM METHOD= POST/GET ACTION = "url" TARGET="window name">

Allows you to specify which window will receive the response from the form after the user presses the submit button.




Basic FORM Structure

<FORM METHOD=POST/GET ACTION = "URL" TARGET="window name" ENCTYPE=mediatype>

<INPUT> tags

</FORM>

METHOD is POST or GET and refers to how data is passed from the browser to the form processing application residing on the server. In most cases it is best to use POST. ACTION specifies the url to invoke to respond to the form, actions can be email messages ("MAILTO:myemail@myaddress"), server application programs, or server scripts ("HTTP://www.tricity.wsu.edu/cgi-bin/application"). TARGET is the window name for the output to be directed to. ENCTYPE tells how the form data should be encoded for the application. Leave this parameter off unless the ACTION is a mailto url. Then use ENCTYPE = "text/plain".

Single Line Text Input

<INPUT NAME="field name" TYPE= TEXT SIZE=N MAXLENGTH = N VALUE="default value">

Allows for a single line of text entry. The text box will be SIZE characters wide and allow MAXLENGTH characters of input. NAME defines the field name for the server application

Passwords input

<INPUT NAME="field name" TYPE= PASSWORD SIZE=N MAXLENGTH = N VALUE="default value">

Masks user input while they are typing. The text box will be SIZE characters wide and allow MAXLENGTH characters of input. NAME defines the field name for the server application

Multiple Line Text Input

<TEXTAREA Name="name" Rows=N Cols=N>default text</TEXTAREA>

Allows user to enter more than one line of text. NAME is the field name, ROWS, COLS specify how big the text box is in terms of characters high/wide. NAME defines the field name for the server application. Default text is optional.

Submit Form Buttons

<INPUT TYPE =SUBMIT NAME="field name" VALUE="value">

Draws a button filled with the text in the VALUE parameter. Invokes the server application when pressed by the user. Giving the buttons the same name  and different values allows you to have multiple submit buttons,  the server  can then check the value to perform different actions when invoked.

Reset/Clear

<INPUT TYPE =RESET VALUE="value">

Draws a button filled with the text in the VALUE parameter. Resets all fields on the form to their default values.

Radio Buttons

<INPUT TYPE = RADIO NAME="field name" Value="return value" CHECKED>

Draws a radio button. These commands are normally used in groups all of which have the same name. This allows for only one to be checked at a time. The CHECKED parameter is put on just one button to denote a default setting.

Check Boxes

<INPUT TYPE = CHECKBOX NAME="field name" Value="return value" CHECKED>

Draws a check button. Value is returned to the server application if the box is checked. The CHECKED parameter is used to denote a default setting.

Push Button
<INPUT TYPE =Button NAME="field name" VALUE="value"> Draws a button filled with the text in the VALUE parameter.

Listbox


<SELECT NAME="field name" SIZE=N MULTIPLE>

<OPTION VALUE="option1" SELECTED >Option text

</SELECT>

Name in the SELECT specifies the name of the menu to the server application. SIZE refers to the number of lines visible, leaving size off will have the effect of a drop down box. If the MULTIPLE parameter is present then the user can select more than one option. OPTION tags must appear between <SELECT> and </SELECT>. The value within the option tag is returned to the server application if that item was selected. If the SELECTED parameter is present, then that option is selected by default. Text following the Option tag is the text which appears in the menu list.