Forms and Functions
Form Elements

Discussion

• Selection Lists
  • See Selection list example.
  • The selection list shows the default first element showing in the list. Selection list example.
  • See Selection list with selected attribute.
  • If you want more of the selection list to show, use the size = "#" attribute.
  • If you want to be able to choose more than one option, add the multiple attribute to opening select tag.
    • To select multiple options, the user must hold down the Ctrl key (Windows) or Command key (Mac OS) when selecting additional options, or the Shift key to select several consecutive options.
• Textarea
  • The textarea tag is often used to allow the use to enter a comment. The syntax is
    <textarea rows="2" cols="40"></textarea>
• Buttons (push buttons)
  • The input type="button" creates a push button. The primary purpose of the push button is to execute JavaScript code.
  • The value attribute of the button puts the value on the button for example
    Internet Joke found on the W3 School site
    Customer: "I want to download the Internet. Do I need a bigger hard disk?"
    
  • It is most common to have a button call a function.
  • The value of a push button cannot be changed through coding.
• Submit button
  • The input type submit is a specialized button that sends the content of the form to the specified location in the action attribute of the body tag.
  • If the value attribute is not used, the submit button with default to Submit Query. If the value attribute is used, that value will show on the submit button.
  • The width of the submit button is contingent on the number of characters in its value attribute.
• Image button
  • The input type image is a submit button that shows an image.
  • As with all images, you should provide an alt attribute to an image button for browsers that do not render images.
  • The size of the image button is contingent on the size of the image.
• Reset button
  • The input type reset is a specialized button that resets the form to the original values of the page when it loads.
  • The value attriubte of the reset button behaves the same as the value attribute of the submit button.

Practice:

• Open your schoolSpirit.htm page
• Add either a submit button or an image button
• Add a reset button
• Add a comment text area.
• Replace your grade classification textbox with a selection list that allows a student to select Freshman, Sophomore, Junior, or Senior.