Chapter 3: HTML Tables, Chapter 3: HTML Tables, Forms, and Lists Forms, and Lists 3.1 The table Element 3.2 The form Element 3.3 Creating Pull-Down Lists 3.4 Combining Tables and Forms 3.5 E-Mailing the Contents of Forms 3.6 The list Elements 3.7 Using Frames
33
Embed
Chapter 3: HTML Tables, Forms, and Lists 3.1 The table Element 3.2 The form Element 3.3 Creating Pull-Down Lists 3.4 Combining Tables and Forms 3.5 E-Mailing.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Chapter 3: HTML Tables, Chapter 3: HTML Tables, Forms, and ListsForms, and Lists
3.1 The table Element 3.2 The form Element 3.3 Creating Pull-Down Lists 3.4 Combining Tables and Forms 3.5 E-Mailing the Contents of Forms 3.6 The list Elements 3.7 Using Frames
Purpose of this MaterialPurpose of this Material
Tables, forms, and lists provide a way to organize data on a Web page.
Forms provide the user interface that allows JavaScript to work.
Lists provide a default format for organizing content, but they don’t interact directly with JavaScript.
This course is about using JavaScript/PHP; HTML is “just” the interface.
3.1: The 3.1: The table Element Element 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>
Radon Radon TestingTesting
Document 3.1 (radonTable.htm)
<html><head><title>Radon Table</title></head><body><h1>Results of radon testing</h1><p>The table below shows some radon levels measured in residences.<br /> For values greater than or equal to 4 pCi/L, action should be taken<br /> to reduce the concentration of radon gas. For values greater than or<br />equal to 3 pCi/L, retesting is recommended.</p><table> <tr bgcolor="silver"> <td>Location</td> <td>Value, pCi/L</td> <td>Comments</td></tr>
E-Mailing the Contents of FormsE-Mailing the Contents of Forms
Use the method and action attributes: <form method="post" action="mailto:[email protected]"> 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.
Here is what appears in the body of an e-mail::last_name=Brookslat=40NS=Nlon=75EW=Welevation=15
Using ListsUsing ListsDescription HTML Tags Use
Definition(or glossary)
<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> for a list of “bulleted” items
Lists Demo (see Document 3.8)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, ordered, 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.11Output from Document 3.11