Chapter 3 HTML Tables Forms and Lists n

Chapter 3: HTML Tables, Forms, and Lists n n 3. 1 The table Element 3. 2 The form Element n 3. 3 3. 4 3. 5 3. 6 n 3. 7 Using Frames n n n Creating Pull-Down Lists Combining Tables and Forms E-Mailing the Contents of Forms The list Elements

Purpose of this Material n n Tables, forms, and lists provide a way to organize data on a Web page. Forms provide the user interface that allows Java. Script to work. Lists provide a default format for organizing content, but they don’t interact directly with Java. Script. This course is about using Java. Script/PHP; HTML is “just” the interface.

3. 1: The table Element n n n Tables help to organize content and provide more control over how a web page uses its space. Tables often contain forms. The basic table syntax includes elements for defining rows and columns. <table> <tr> <td> … </td> {as many columns as you need…} … </tr> {as many rows as you need…} … </table>

Document 3. 1 (radon. Table. htm) Radon Testing <html> <head> <title>Radon Table</title> </head> <body> <h 1>Results of radon testing</h 1> <p> The table below shows some radon levels measured in residences. For values greater than or equal to 4 p. Ci/L, action should be taken to reduce the concentration of radon gas. For values greater than or equal to 3 p. Ci/L, retesting is recommended. </p> <table> <tr bgcolor="silver"> <td>Location</td> <td>Value, p. Ci/L</td> <td>Comments</td></tr>

Document 3. 1 (concluded) Radon Testing <td>ID's house, 2 nd floor bedroom</td> <td>3. 7</td> <td bgcolor="yellow">Should be retested. </td></tr> <td> FJ's house, 1 st floor living room</td> <td> 0. 9</td> <td bgcolor="lightgreen">No action required. </td></tr> <td> MB's house, 2 nd floor bedroom</td> <td>2. 9</td> <td bgcolor="lightgreen">No action required. </td></tr> </table></body> </html>

More table Elements <table> <caption> … </caption> <tr>  <th> … </tr> <td> … </tr> … </table>

Document 3. 2 (cloud. Type. htm) Merging Rows and Columns <html> <head> <title>Cloud Type Chart</title> </head> <body> <table border="2"> <caption>Cloud Type Chart</caption> <tr> <th align="center">Altitude</th> <th colspan="2">Cloud Name</th></tr> <td align="center" rowspan="3" >High</td> <td colspan="2">Cirrus</td> </tr> <td colspan="2">Cirrocumulus</td> </tr> <td colspan="2">Cirrostratus</td></tr> <tr><td align="center" rowspan="2">Middle</td> <td colspan="2">Altocumulus</td></tr> <tr><td colspan="2">Altostratus</td></tr>

Document 3. 2 (concluded) Merging Rows and Columns <tr><td align="center" rowspan="5"> Low</td> <td>Cumulus</td> <td>nonprecipitating</td></tr> <tr><td>Altocumulus</td> <td>nonprecipitating</td></tr> <td>Stratocumulus</td> <td>nonprecipitating</td></tr> <tr><td>Cumulonimbus</td> <td align="center" bgcolor="silver">precipitating</td></tr> <tr><td>Nimbostratus</td> <td align="center" bgcolor="silver">precipitating</td></tr> </table> </body></html>

The form Element n n HTML forms provide the online equivalent of a paper form that can be filled in by the user. Contents of a form can be sent back (indirectly) to the creator of the form or to a server application. Values entered in form fields can serve as input to Java. Script calculations The results of Java. Script calculations can change the values of form fields.

Attributes of Forms n n Forms use the <form> … </form> tag. The action attribute allows contents of forms to be sent to an email address. The enctype="text/plain" and method="post" attributes allow data to be transmitted in an easily readable format. Forms include one or more <input /> tags, each of which defines one form field.

The <input /> Tag's Type Attribute "button" Provides a user-specified action when the "button" is clicked. "checkbox" Allows a user to select one or more value from a list provided. "hidden" Define text fields that are available to Java. Script, but are invisible in the form. "password" Allows entry of text data, but displays asterisks in the form field. "radio" Allows only one choice from a list of options. "reset" Returns all form fields to their original values. "submit" Sends contents of form (via an e-mail or to a server). "text" Accepts entry of text, including digits that should be interpreted as a number. .

Other <input /> Attributes checked Default selection for radio and checkbox types. maxlength="…" Maximum number of displayed characters. name="…" An identifier for the field. readonly A value assigned in the HTML code cannot be changed by the user. size="…" Maximum number of characters that can be entered (not the same thing as maxlength. ) type="…" (See previous page. ) value="…" A text value initially assigned to a field.

Output from Document 3. 4

Using Forms Document 3. 4 (location. htm, partial) <form> Please enter your last name: <input type="text" name="last_name" size="20" maxlength="20" /> Please enter your latitude: <input type="text" name="lat" value="40" size="7" maxlength="7" /> N <input type="radio" name="NS" value="N" checked /> or S <input type="radio" name="NS" value="S" /> Please enter your longitude: <input type="text" name="lon" value="75" size="8" maxlength="8" /> E <input type="radio" name="EW" value="E" /> or W <input type="radio" name="EW" value="W" checked /> Please enter your elevation: <input type="text" name="elevation" size="8" maxlength="8" /> meters Please indicate the seasons during which your site reports data: Winter: <input type="checkbox" name="seasons" value="Winter" /> Spring: <input type="checkbox" name="seasons" value="Spring" /> Summer: <input type="checkbox" name="seasons" value="Spring" /> Fall: <input type="checkbox" name="seasons" value="Fall" /> </form>

Output from Document 3. 5 The user has selected April.

Document 3. 5 (select. htm) Pull-Down List <html> <head> <title>Pull-Down List</title> </head> <body> Select a month from this menu: <select name="testing"> <option value="1" selected>January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </body> </html>

Output from Document 3. 6

Document 3. 6 (site. Definition. htm, partial) Combining Tables and Forms <form> <table border="2" cellpadding="5" cellspacing="2" align="center"> <caption><font size="+2">Observation Site Descritions</font></caption> <tr bgcolor="lightblue"> <th>Site #</th><th>Site Name</th><th>Latitude</th> <th>Longitude</td><th>Elevation</th> </tr> <tr bgcolor="palegreen"> <td>Site 1</td> <td><input type="text" name="Name 1" size="10" maxlength="10" value="Name 1" /></td> <td><input type="text" name="Latitude 1" size="10" maxlength="10" value="Latitude 1" /></td> <td><input type="text" name="Longitude 1" size="10" maxlength="10" value="Longitude 1" /></td> <td><input type="text" name="Elevation 1" size="10" maxlength="10" value="Elevation 1" /></td> </tr>

E-Mailing the Contents of Forms n n Use the method and action attributes: <form method="post" action="mailto: my_mail@university. edu"> This may not work on all computer systems. Note that this doesn't allow the user of an HTML document to directly contact the host computer, but acts indirectly through an e-mail client. The method="post" and enctype="text/plain" attributes deliver contents of all form fields in an easily readable format, embedded in the body of an e-mail. Output from method="get" is less easily readable.

Document 3. 7 (location 2. htm) <html> <head> <title>Location information</title> </head> <body bgcolor="ivory"> <form method="post" action="mailto: my_mail@university. edu" enctype="text/plain"> Please enter your last name: <input type="text" name="last_name" size="20" maxlength="20" /><br/> Please enter your latitude: <input type="text" name="lat" size="7" maxlength="7" /> N <input type="radio" name="NS" value="N" /> or S <input type="radio" name="NS" value="S" /><br/> Please enter your longitude: <input type="text" name="lon" size="8" maxlength="8" /> E <input type="radio" name="EW" value="E"> or W <input type="radio" name="EW" value="W" /><br/> Please enter your elevation: <input type="text" name="elevation" size="8" maxlength="8" /> meters<br/> <input type="submit" value="Click here to send your data. " /> </form> </body> </html>

Output from Document 3. 7 Here is what appears in the body of an e-mail: : last_name=Brooks lat=40 NS=N lon=75 EW=W elevation=15

Using Lists Description HTML Tags Use <dl> … </dl> for a list that includes names and extensive descriptions Ordered <ol> … </ol> when a list of things needs to be numbered Unordered <ul> … </ul> Definition (or glossary) for a list of “bulleted” items

Lists Demo (see Document 3. 8)

Document 3. 8 (lists. htm) <html> <head> <title>Using HTML Lists</title> </head> <body> This page demonstrates the use of unordered, and definition lists. <ul> <li> Use unordered lists for "bulleted" items. </li> <li> Use ordered lists for numbered items. </li> <li> Use definition lists for lists of items to be defined. </li> </ul> Here are three ways to organize content in an HTML document: <ol> <li>Use a table. </li> <li>Use a list. </li> <li>Use <font face="courier">< pre> . . . < pre> </font> tags. </li> </ol> This is a way to produce a neatly formatted glossary list. <dl> <dt><strong>definition list</strong> (<font face="courier">< dl> </font>)</dt> <dd>Use this to display a list of glossary items and their definitions. </dd> <dt><strong>ordered list</strong> (<font face="courier">< ol> </font>) </dt> <dd>Use this to display a numbered list. </dd> <dt><strong>unordered list</strong> (<font face="courier">< ul> </font>)</dt> <dd>Use this to display a list of bulleted items. </dd> </dl> </body> </html>

Output from Document 3. 11

Document 3. 11 (cloud 1. htm, partial) <html> <head> <title>Cloud Observations</title> For determining if a box is checked… </head> <body bgcolor="#aaddff"> <h 1>Cloud Observations</h 1> <strong> Cloud Observations </strong>(Select as many cloud types as observed. ) <br /> <form> <table>a <tr> <td><strong>High</strong> </td> <input type="checkbox" name="high" value="Cirrus" /> Cirrus</td> <input type="checkbox" name="high" value="Cirrocumulus" /> Cirrocumulus </td> <input type="checkbox" name="high" value="Cirrostratus" /> Cirrostratus </td></tr> <td colspan="4"><hr noshade color="black" /> </td></tr> <td> <strong>Middle</strong> </td> <td>

Using Frames

Divide up your screen… Document 3. 10 a: frame. Main. htm <html> <head> <title>A simple frameset document</title> </head> <frameset cols="30%, 70%" frameborder="1"> <frameset rows="60%, 40%"> <frame src="frame 1. htm" scrolling="no" /> <frame src="frame 2. htm" /> </frameset> <frame name="home. Frame" src="home. Frame. htm"> </frameset> </html> One. htm file for each panel in the frame

Here’s home. Frame. htm… Document 3. 10 b: frame 1. htm <html> <head> <title>My Home Frame</title> </head> <body bgcolor="lightgreen"> <h 1><blink><font color="maroon"><b> <i>Home page display goes here. </i></b> </font></blink></h 1> </body> </html>

Here’s frame 1. htm… Document 3. 10 c: frame 1. htm <html> <head> <title>Title Frame</title> </head> <body bgcolor="pink"> <font size="+6" color="navy"><center> <b><i>Frames<br />Demo<br /> <a href="frame. Description. htm"> <img src="frame. gif" border="2"></i></b> </center></font></a> </body></html>

Here’s frame 2. htm… Document 3. 10 d: frame 2. htm <html> <head> <title>Gossip Column</title> </head> <body bgcolor="lightblue"> Links to other stuff. . . <br /> <a href="gossip. htm" target="home. Frame"> Gossip Column</a><br /> <a href="photo. Gallery. htm" target="home. Frame"> Picture Gallery</a><br /> <a href="home. Frame. htm" target="home. Frame"> home</a><br /> </body> All displayed in home. Frame </html>

Creating a Split Window

Document 3. 12 a (pyranometer. Main. htm) <html> <head> <title>Display pyranometer data</title> </head> <frameset rows="10%, *"> <frame src="header. htm" scrolling="no" /> <frame src="pyranometer. dat" /> </frameset> </html> Document 3. 12 b (header. htm) <html> <head> <title></title> </head> <body> <font face="courier" > This is the header. <br /> mon day yr hr min sec EST PYR-1 PYR-2 T<br /> </font> </body> </html> Split Window (cont. )