IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing images for animation Boxes, sidebars, etc. (should use style sheets) Notice: This session is being recorded. Copyright 2007 by Bob Brown Defining Tables The <table> tag: <table summary="juice drinks">... table definitions... Tables are defined row-wise: <tr>... </tr> Table Cells Table cells are defined with the table-data <td> tag sets within each row <table summary="schedule"> <tr><td>jan 12</td> <td>html I</td> <td>2.1-2.6</td> </tr> Table Defaults Cell contents are left-aligned Cell widths are determined automatically based on the cell in each column with the widest content Cell heights are determined automatically based on the cell in each row with the tallest content Borders and grid lines are invisible Table Headings Table heading tags define a row or column of heading; similar to <td> <tr><th>apples</th><th>oranges</th></tr> <tr><td>12</td><td>8</td></tr> By default, table headings are centered in their cells and bold. 1
Headings for Rows and Columns Headings for Rows and Columns <table> <tr><th></th><th>saw</th> <th>spanner</th><th>c-clamp</th></tr> <tr><th>price</th><td>13.00</td> </tr> <tr><th>weight</th><td>5.0</td> </tr> That Pesky Empty Cell <table> <tr><th> </th><th>saw</th> <th>spanner</th><th>c-clamp</th></tr> <tr><th>price</th><td>13.00</td>...</tr>... Two Levels of Headings colspan attribute; span multiple columns <tr><th colspan="3">fruit Juices</th></tr> <tr><th>orange</th><th>apple</th> <th>lemon</th></tr> Colspan and Rowspan Together <tr><td rowspan="2"></td> <th colspan="3">fruit Juice Drinks</th></tr> <tr><th>apple</th><th>orange</th> <th>tomato</th></tr> Alignment with Styles <tr style="text-align: left;"><td>... Applies to an entire row. <td style="text-align: right;">7.98</td> Applies to one cell. Choices: left, right, center, justify. Alternate Example <tr style="text-align: left;"> </tr> 2
Alignment with Styles <tr style="vertical-align: top;"><td>... Applies to an entire row. <td style="vertical-align: top;">7.98</td> Applies to one cell. Choices: top, middle, bottom, baseline. The default vertical alignment is middle. Baseline specifies that all cells in the same row have their first lines of text positioned on a common baseline. Styles can be Combined Two or more style property specifications can be combined. If two or more properties are used, separate them with semi-colons. <td style="text-align: right; vertical-align: top;">7.98</td> Sketch your table before coding. Align and Valign Attributes Align applies to <tr> (entire row), or to <th> and <td> (one cell) align="left" (center, right) Horizontal valign="default" (top, bottom) Vertical <td align="left" valign="bottom">7.98</td> Styles are a better alternative. Borders, Spacing and Padding <table style="border: 2px solid black;"> width in pixels, type, color <table style="padding: 3px;"> padding: between contents and cell wall border-spacing: between cells 1 2 Positioning Tables Tables are block elements. They can be floated left or right so that text flows around them. <table style="float: left"> <table style="float: right"> Centering a Table Centering a table using styles: <div style="text-align: center;"> <table style="margin: auto;"> <tr> </tr> </div> 3
A Complete Table <html> <head> <title>complete Table</title> <style type="text/css"> table, th, { border: 1px solid gray; } td { border: 1px solid gray; text-align: right; } </style> </head> <body> <table summary="fruit Juice Drink Schedule"> <tr><td rowspan="2"></td> <th colspan="3">fruit Juice Drinks</th></tr> <tr><th>apple</th><th>orange</th> <th>tomato</th></tr> <tr><th>breakfast</th><td>0</td><td>1</td><td>0</td></tr> <tr><th>lunch</th><td>1</td><td>0</td><td>0</td></tr> <tr><th>dinner</th><td>0</td><td>0</td><td>1</td></tr> </body> </html> A Complete Table A Complete Table <html> <head> <title>complete Table</title> <style type="text/css"> table, th, { border: 1px solid gray; } td { border: 1px solid gray; text-align: right; } </style> </head> <body> <table summary="fruit Juice Drink Schedule"> <tr><td rowspan="2"></td> <th colspan="3">fruit Juice Drinks</th></tr> <tr><th>apple</th><th>orange</th> <th>tomato</th></tr> <tr><th>breakfast</th><td>0</td><td>1</td><td>0</td></tr> <tr><th>lunch</th><td>1</td><td>0</td><td>0</td></tr> <tr><th>dinner</th><td>0</td><td>0</td><td>1</td></tr> </body> </html> Summary and Caption The caption is an element of table and provides a short description of the table s contents. The summary is an attribute of the table tag and is intended to provide more information than caption. Accessibility guidelines suggest/require that caption and summary not contain the same text. http://www.w3.org/tr/html4/struct/tables.html#edef-caption http://checker.atrc.utoronto.ca/servlet/showcheck?check=243 Styling Columns We did not discuss COL or COLGROUP in class. Styles may be applied to columns by using the COL element. http://www.w3.org/tr/html4/struct/tables.html Gray and Grey The W3C lists only gray as the name of the #808080 color, but allows lightgrey as well as lightgray for a lighter shade! http://www.w3.org/tr/css3-color/ 4
Purpose of HTML Forms User interaction: With a server Locally, using JavaScript Data collection to enable data processing HTML Forms We send data to Web servers with HTML forms The server can process the data with a CGI program or a scripting language. HTML Forms CGI is common gateway interface It is the glue between the Web server and a data processing application. Form data can also be processed on the client using JavaScript. CGI Requests CGI Requests are made in URLs http://www.webdev.spsu.edu/bbrown/reply.cgi The Web server recognizes the CGI request and... runs the specified program Overview of CGI Processing The Internet Web Server Computer Web Server Program CGI Appl Prog Must have program support on the server Application program receives input on stdin or in an environment variable; Output (stdout) goes back to Web browser Integrated Languages Some languages (perl, PHP) are integrated into Web servers Integration can offer more efficient operation Processing form data follows the CGI model 5
About /cgi-bin/ Most production Web systems have a /cgi-bin/ directory It is outside the document root for security reasons All CGI program go in /cgi-bin/ We will not write CGI programs in this class, and your PHP programs will go in public_html HTML Forms A large part of HTML is devoted to sending data to servers. Form elements (controls, or widgets ) collect data Different elements available depending on data Submit button sends data to the server. Other actions can invoke local JavaScript The <form> Tag Define a form with the <form> element The action attribute specifies the URL of the program to process the data. <form action="http://webdev.spsu.edu/bbrown/myform.cgi" method="post"> <! form contents go here --> </form> The Method Attribute The method attribute tells how to send data method="get" Form data is attached to the URL and appears in an environment variable. method="post" Form data is sent as HTTP data and appears on stdin of CGI program In general, use method="post" because Get and Idempotence An idempotent function is one for which repeated application returns the same result; e.g. multiplication by one. The get method is defined to be idempotent Therefore, get must not have side effects, like placing an order or changing a database. Get method responses can be cached. Name / Value Pairs Form elements have name and value attributes. <input type="text" name="lastname" /> Brown The server receives this: lastname=brown 6
Text boxes Checkboxes Radio buttons Submit button Hidden data Others The <input> Tag The <input> control is used for: Brown Text Boxes <form > <input type="text" name="lastname" id="lastname" size="25" /> </form> Creates a typing box 25 characters wide. Text Boxes One line high Width of the box is set by size="25" Input is not limited to 25 characters; text will scroll if the box fills up. Use maxlength to set a maximum input length. Set a default value with value= The <label> Tag Provides labels for form elements Used by screen reader programs for accessibility Can assign shortcut keys for form elements Connects to the form element by: Enclosing the element Naming the element s id attribute on the for= attribute <label>your last name: <input type="text" name="lastname" id="lastname size="25" /> </label> Your last name: Text Box with Label Label with for= Attribute <form > <table > <tr><td style="text-align: right;"> <label for="firstname">your given name: </label></td> <td><input type="text" name="firstname" id="firstname" /></td></tr> <tr><td style="text-align: right;"> <label for="lastname">family name: </label></td> <td><input type="text" name="lastname" id="lastname" /></td></tr> </form> 7
Label with for= Attribute The example form uses a table to align labels and input text boxes. The <label> element cannot enclose the <input> element because they are in different table cells. Instead, the for= attribute on the <label> tag names the id of the input element to associate the label Your given name: with the firstname <input> element. Check Boxes Allow selection from a number of choices. Zero or more may be selected. Languages you speak: English Français Español Check Boxes Languages you speak: <label>english <input type="checkbox" name="en" id="en" value="true" /></label><br /> <label>français <input type="checkbox" name="fr" id="fr" value="true" /></label><br /> Check Boxes <div style="width: 20%; text-align: right"> Languages you speak<br /> <label>english <input type="checkbox" checked="checked" name="en" id="en" value="true" /> </label><br /> <label>français <input type="checkbox" name="fr" id="fr" value="true" /> </label><br /> <label>español <input type="checkbox" name="es" id="es" value="true" /> </label> </div> Check Boxes Languages you speak English Français Español Server receives: en=true&fr=true Radio Buttons Allow one selection from a number of choices. At most one choice can be selected Your preferred language: English Français Español 8
Radio Buttons <label>english <input type="radio" name="pref_lang" id="pref_lang_en" value="en" checked="checked" /> </label><br /> <label>français <input type="radio" name="pref_lang" id="pref_lang_fr" value="fr" /> </label><br /> Radio Buttons Your preferred language English Français Español Server receives: pref_lang=en Pulldown Menus State: Alabama Georgia Alabama Florida Georgia Mississippi Pulldown Menus <label>state: <select name="state" > <option>alabama</option> <option>florida</option> <option>georgia</option> <option>mississippi</option> </select> </label> Server receives: state=georgia Options with Values <label>state: <select name="state" > <option value="al">alabama</option> <option value="fl">florida</option> <option value="ga">georgia</option> <option value="ms">mississippi</option> </select> </label> Server receives: state=ga Multi-Item Select Lists <label>shopping List: <select name="list" multiple="multiple"> <option>bread</option> <option>milk</option> <option>cheese</option> </select> </label> Server receives: list=bread&list=cheese 9
Text Area Be brief, concise and specific <textarea name="comments" rows="3" cols="30"> Be brief, concise, and specific </textarea> Hidden Data <input type="hidden" name="account" value="a1234567" /> Allows tagging of forms generated on the server Not secure (visible in view source ) Submit Button <input type="submit" value="submit" /> Submit Causes the form to be submitted to the server using the method given on the <form> element. Reset Button <input type="reset" value="clear Form" /> Clear Form Resets all form elements to empty or default values. Consider carefully whether you need a reset button. The Button Element <button id="compute">compute It!</button> Compute It! Defines a generic button. Mainly useful with JavaScript because it can generate an event JavaScript can listen for. Password: File: Image: Other Input Types Typed text echoes as asterisks Prevents shoulder surfing Not secure Allows uploads of files, browse dialog Image substitutes for Submit button 10
Questions 11