HTML Forms

The simplest way to create inputs on a web site is through the use of forms.  The syntax of form is
            <form id=”name”>
            … controls to be included as part of the form …
            </form>
The id field is used to name the form.  A form is primarily a grouping mechanism.
 

Within the form, controls are used to define the input elements.  There are 5 key types of controls:
            Button:  let’s the user click on the button.  a binary input: on or off
            Text:  allows the user to type text.  There are actually two forms – one that limits input to a single line and one that allows multiple lines.  We’ll limit ourselves to the single line version.
            Radio buttons:  allows the user to select just one of a list of items
            Checkbox:  allows the user to select as many as wanted
            Select: provides a list for the user to choose from.  Can let the user choose one or more than one.
The first 4 of these is defined with the input tag.  The last uses the select button.

 

Button
            <input value="name to display"
            onclick="what to do when the button is clicked" 
            type="button">
There are a lot of different options on when an action should be performed, such as when there’s a mouse-over.

 

Text
            <input type="text">
The tag itself does not put any text on the screen…just the box.  You need to explicitly write out any text that you want.

 

Radio
            <input name=”name-for-all-associated-radio-buttons” type=”radio”>
The name here is critical because radio buttons need to be grouped to identify the set that only allow one response.

 

Checkbox
            <input type=”checkbox”>
The tag itself does not put any text on the screen…just the box to be checked.  You need to explicitly write out any text that you want.

 

Lists
A list to select from is identified with the select tag and a list of the options.  The form of the select tag is
            <select multiple=”multiple”
              size=”number of entries to show”>
            … options to be displayed …
            </select>
Use multiple if you want the user to be able to select multiple values from the list.  If you want to limit it to one entry, do not use the attribute.  Size indicates how many entries are to be shown.

Note that slide bars are automatically entered for you.

Each entry in the list is identified by the option tag.
           <option selected=”selected”>
            Text to be displayed
            </option>
Use the selected attribute if you want the entry to be marked as the default selection.  If you don’t want the entry selected, do not use the attribute.  Do not mark more than one entry as selected unless the select indicated multiple.