Web mredkj.com

HTML / JavaScript Reference

FORM

Related Tutorials

This page is just a simple reference. Try some of our tutorials for detailed HTML/JavaScript interaction.

• tutorial001 - Disable Select
• tutorial002 - Working with selectedIndex (basic)
• tutorial003 - Working with selectedIndex (extended)
• tutorial004 - Referencing multiple values
• tutorial005 - Insert, remove, append last, remove last. For DOM compliant browsers only.
• tutorial006 - Insert, append, remove. Works in older and newer browsers.
• tutorial_mixed2b - Move options between two select lists. Works in older and newer browsers.
• tableaddrow - Add rows to a table
• tabledeleterow - Delete rows from a table

Overview

The <FORM> tag is intended to interact with a server to send and receive information. The scope of this reference will be to explain form tags as they can be used for JavaScript. This requires no server side programming.

Basic Rules

Some of the attributes that a <FORM> tag can have are ACTION, ENCTYPE, and METHOD. These attributes are related to communicating with a server, so they will not be discussed here. One attribute that is useful for JavaScript is NAME. The form is named so we can refer to it in the JavaScript. All the form elements you want to reference from JavaScript should appear between the opening <FORM> tag and the closing </FORM> tag. The following example has a text input element in it.

Basic Rules - example source

<FORM NAME="someForm">
<INPUT TYPE="TEXT"> This is a text input associated with the form <B>someForm</B>
</FORM>

Basic Rules - example output

This is a text input associated with the form someForm

FORM ELEMENTS

<SELECT> tag

The <SELECT> tag creates an option list, also known as a drop down list. The option list is opened with <SELECT> and closed with </SELECT>. The select tag has a NAME attribute for the same reason the form does. Between the select tags are option tags <OPTION>, which do not have closing tags. An option tag has a VALUE attribute which is the value that is equated to that selection. The text following the option tag is what will show up in the option list. The attribute SELECTED indicates that option is the default. Look at the following example.

<SELECT> tag - example source

<FORM>
<SELECT NAME="CalcWhat">
<OPTION VALUE="0">Time
<OPTION VALUE="1">Distance
<OPTION VALUE="2" SELECTED>Pace
</SELECT>
</FORM>

<SELECT> tag - example output

Time Distance Pace

<INPUT> tag

<INPUT> tags can be a variety of things, like text inputs or button inputs. The type of input is appropriately determined by the TYPE attribute.

When TYPE="TEXT", one of its attributes is SIZE, which is how wide it will be.

When TYPE="RADIO", one of its attributes is VALUE, and like in the option list, the VALUE attribute is the value associated with that choice. Radio inputs with the same NAME attribute are in the same group, and only one can be selected at a time. The CHECKED attribute is like the option list's SELECTED attribute.

When TYPE="BUTTON", one of its attributes is VALUE. This is what shows up for the text on the button. To make the button do something, JavaScript will have to be called by reacting to an event.

<INPUT> tag - example source

<FORM>
<INPUT TYPE="TEXT" NAME="DISTANCE" SIZE="9"><BR>
<INPUT TYPE="RADIO" NAME="optPace" VALUE="miles">Mile &nbsp;
<INPUT TYPE="RADIO" NAME="optPace" VALUE="400meters" CHECKED>400m<BR>
<INPUT TYPE="BUTTON" VALUE="Calculate">
</FORM>

<INPUT> tag - example output

Mile   400m