ITWM1010 Inclass Example - Form Fields
Form Field Types - Six ways to enter or select data
(See another version that uses Javascript)

This form uses the "Get" method so that the form fields are passed as "Querystring" parameters, and you can see what they are.

It calls "styledemo.htm", which looks for a querystring parameter named "css".  The parameter value is a style sheet name (without the extension ".css").

This form asks for the same information six ways. The field types demonstrated on the form are:

  1. Selection List (with size set to 4). The selection list provides built-in field validation because only the listed options can be selected.  The default is explicitly set to "Winter" by specifying selected="selected" in the Option tag for Winter.
  2. Input box (size=30) - Note that there is no built-in validation for a text field. The user can type anything.  JavaScript could be used to provide validation, or to convert a value to all lowercase (or all uppercase)..
  3. Radio Buttons - Once one of the buttons has been selected, they can't all be turned off, unless the form has some kind of option for the concept of "never mind"
  4. Checkboxes - Normally, each checkbox is a different field. There is no way, short of Javascript, to make sure that only one box is checked. But, unlike Radio Buttons, it is easy, even without Javascript, to uncheck all options.
  5. Buttons. Buttons have values, like other form fields. Like radio buttons, values are embedded in Submit buttons and selected by the user, not entered-free form. Unlike radio buttons, the value of buttons are exposed as the text within the button. Command buttons, which don't submit the form, could be used, but would require JavaScript code that sets a hidden field, since Command button values don't get passed to the action script.
  6. A multiline text, or "textarea" field. The default value is the free text in the <textarea> element in the HTML page. In this example, the whitespace formatting of the HTML page causes a tab to be embedded in the field value, making it look kind of like the default value is centered.

Note that, without Javascript, there is no way to control which field puts its value in the "css" parameter, other than to edit the file to make sure that only the desired field has the fieldname "css".

1. Enter a stylesheet name into a text box (or input box) (Note that the values "Winter" and "winter" are different, though both work on a Microsoft server, which ignores file case.
2. Select a stylesheet name with a selection box: (In the source code, you can see that the option "Winter" is associated with the value "winter", since the server processing the form is case-sensitive.) (Also note that the inconsistent formatting of these little "help notes" reveals one of the difficulties in laying out forms on a web page. Sometimes it is sufficient just to place text immediately after the text field; sometimes column spanning is necessary; and sometimes the note can be in a separate table cell; and sometimes more than one technique is needed.)
3. Select a stylesheet using radio buttons: Default Summer Winter Note that the option described as "Winter" has the lowercase value "winter".
4. Select a stylesheet using checkboxes  Default Summer Winter As with the radio buttons, the value associated with "Winter" is "winter". 
5. Enter a style sheet name using a text area box: As with the text box, the HTML code cannot control letter case. Also note that tabs and returns in the HTML code appear in the text box.
6. Select a stylesheet using submit buttons Unlike radio buttons and checkboxes, the actual values of submit buttons are exposed.