- 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
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
<SELECT> tagThe <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
<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.
<INPUT> tag - example source
<FORM> <INPUT TYPE="TEXT" NAME="DISTANCE" SIZE="9"><BR> <INPUT TYPE="RADIO" NAME="optPace" VALUE="miles">Mile <INPUT TYPE="RADIO" NAME="optPace" VALUE="400meters" CHECKED>400m<BR> <INPUT TYPE="BUTTON" VALUE="Calculate"> </FORM>
<INPUT> tag - example output