IT350 Web and Internet Programming. XHTML Tables and Forms (from Chapter 4 of the text 4 th edition Chapter 2 of the text 5 th edition)

Size: px

Start display at page:

Download "IT350 Web and Internet Programming. XHTML Tables and Forms (from Chapter 4 of the text 4 th edition Chapter 2 of the text 5 th edition)"

Caitlin Ellis
6 years ago
Views:

1 IT350 Web and Internet Programming XHTML Tables and Forms (from Chapter 4 of the text 4 th edition Chapter 2 of the text 5 th edition) 4.10 Tables 1

2 Table Basics table element border, summary, caption Sections: <thead> <tfoot> <tbody> Actual contents: <th> <td> Table Example #1 <?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " table1.html (1 of 2)   <html xmlns = " <head> <title>a simple XHTML table</title> </head> <body>  <table border = "1" width = "40%" summary = "This table provides information about the price of fruit">   <caption><strong>price of Fruit</strong></caption> 2

3   <thead>  <th>fruit</th>  <th>price</th> </thead> table1.html (2 of 2)   <tfoot> <th>total</th> <th>$3.75</th> </tfoot>   <tbody> <td>apple</td>  <td>$0.25</td> <td>orange</td> <td>$0.50</td>... </tbody> </table> </body> </html> Table Example #2 (modified) 3

4 <table border = "1"> <caption>here is a more complex sample table.</caption> <thead>    <th rowspan = "2"> table2.html (2 of 4) <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" /> </th>  <th colspan = "4" valign="bottom"> <h1>camelid comparison</h1> <p>approximate as of 6/2007</p> </th> <th># of Humps</th> <th>indigenous region</th> <th>spits?</th> <th>produces Wool?</th> </thead> table2.html (3 of 4) <tbody> <th align="left">camels (bactrian)</th> <td>2</td> <td>africa/asia</td> <td>yes</td> <td>yes</td> <th align="left">llamas</th> <td>1</td> <td>andes Mountains</td> <td>yes</td> <td>yes</td> </tbody> </table> 4

5 Exercise #1: Write XHTML to generate this table: Exercise #2: Write XHTML to generate this table: 5

6 Exercise #3: Write XHTML to generate this table: 4.11 Forms 6

7 <form method = "post" action = "cgi -bin/sendmail.pl"> <p>   <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> form.html (2 of 3)  <p><label>name: <input name = "name" type = "text" size = "25" maxlength = "30" /> </label></p> <p>    <input type = "submit" value = "Submit" /> <input type = "reset" value = "Clear" /> </p> </form> 5.5 More Complex XHTML Forms 7

8 Key issue: How is data sent to the server? method = get Appends form data directly to the end of the URL submit.cgi?name=smith&vote=3 method = post Appends form data to the browser request Key issue: What provides security? Using <input type= password > Using <input type= hidden > Using Using 8

9 Exercise #1: Write XHTML to generate this form: Exercise #2: Write XHTML to generate this form: 9

Introduction to XHTML: Part 2

L Introduction to XHTML: Part 2 Objectives To be able to create tables with rows and columns of data. To be able to control table formatting. To be able to create and use forms. To be able to create and