Forms and Functions
Tables, Radio Buttons, Checkboxes

Discussion

• Tables
  • A table can consist of a single table data cell, a row, a column, or a grid of rows and columns.
  • Click on tableExample.htm
  • View the source.
  • Save in your Forms folder in the public_html folder of your H drive.
  • Open tableExamle.htm in LTS.
  • Resize this page on the left of your screen.
  • Resize the tableExample.htm page on the right of your screen.
  • Explanation of the table on the tableExample.htm page
    • The table tag designates that there will be a table. Unlike formatting the all other text in XHTML, the formatting of tables inside the table tags is allowed in XHTML strict.
    • Optional attributes of the table
      • Tables can be sized in html in either pixels or percentages. If no measurement is shown, then the default is pixels. To designate sizes in other measurements, such as points, em, cm, etc., you must use CSS.
      • Unless specified, a table border will not show in a table. See W3Schools table border example.
      • Cellpadding is the space between the contents of the cell and the cell wall. The default is 1. (Think of being locked in a padded cell.)
      • Cellspacing controls the space between table cells. When no cellpadding is designated, the default is usually 2.
      • Colgroup tag is used to group columns in a table for formatting. The order that you place the colgroup is the order of the columns of the table from left to right. The colgroup formatting will not show up in Firefox.
      • The width attribute designates the width of the element.
      • The align attribute defines the horizontal alignment.
      • The span attribute can apply the colgroup to more than one column.
      • In tableExample.htm the first column is used for labels and is formatted differently than the next four columns.
      • A table is divided into rows (with the <tr> tag)
      • Each row is divided into data cells with the <td> tag (table data) or <th> tag (table heading).
      • A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
    • Unless specifed, a table will be the width that the browsers decides it will be according to the cell contents.
• JavaScript Variables
  • Click on W3Schools variables explanation.
• Radio Buttons
  • Click on radioButtonsExample.htm
  • View the source.
  • Save in your Forms folder in the public_html folder of your H drive.
  • Open radioButtonsExamle.htm in LTS.
  • Resize this page on the left of your screen.
  • Resize the radioButtonsExample.htm page on the right of your screen.
  • Explanation of the radio buttons on the radioButtonsExample.htm page
    • When a web page has radio buttons, the intent is that only one button can be selected at a time. To accomplish this, all radio buttons is a group must have the same name. However,the difference is that each radio button has a different value.
    • When a radio button is selected the checked attribute is set to true.
    • When no checked attribute is included, then the checked attribute is false.
    • When form elements share the same name, JavaScript creates an array of the elements with the same name.
    • To access one of the radio buttons, you access it in the order that it is defined. For example the checked attribute of the second radio button with the value $40.95 uses:
      • document.forms[0].delivery[1].checked
• Checkboxes
  • Click on checkboxExample.htm
  • View the source.
  • Save in your Forms folder in the public_html folder of your H drive.
  • Open checkboxExample.htm in LTS.
  • Resize this page on the left of your screen.
  • Resize the checkboxExample.htm page on the right of your screen.
  • Explanation of the radio buttons on the checkboxExample.htm page
    • The intent of radio buttons is to allow the user to select more than one choice.
    • You can group check boxes by giving each the same name value. But, you can also give each a different name.
    • The checked attribute for checkboxes is the same as the checked attribute for radio buttons.

Practice:

• Open your schoolSpirit.htm page
• Add radio buttons to select gender male or female.
• Add checkboxes for student talents such as singer, dancer, gymnist, musician, etc.
• Make sure that your page validates. In LTS, click Tools, W3C Validate. Make any corrections necessary.