1. Tables and Forms HTML5 Tables and Forms

2. Table Overview table element ( ) Attributes: align (left, right, center), bgcolor, border, cellpadding, cellspacing, summary, title, width table row ( ) Attributes: align (left, right, center), bgcolor table data cell ( ) Attributes: align, bgcolor, colspan, headers, height, rowspan, scope, valign, width table captions ( )

3. Span Rows and Columns Similar to “merge cells” in Excel colspanrowspan This spans two columns Col 1Col 2 This spans two rows Row 1 Col 2 Row 2 Col 2

4. Style a Table with CSS HTML properties (corresponding CSS table properties) align (table { width: 75%; margin: auto; }) width (width), height (height), cellpadding (padding) cellspacing (border-spacing, border-collapse) bgcolor (background-color), valign (vertical-align) border (border, border-style, border-spacing)

5. CSS3 Structural Pseudo-Class Alternating row colors (aka: zebra-striping) :first-of-type (applies to the first element of the type) :first-child (applies to the first child of an element) :last-of-type (applies to the last element of the type) :last-child (applies to the last child of an element) :nth-of-type(n) (applies to the nth element – number, odd, even)

6. Configure Table Sections,,,,,, Month Savings Sum $180 January $100 February $80

7. Forms form element ( ) Attributes: action, autocomplete (on, off), id, method (get, post), name Generally the action is sending the form data to a PHP page for processing input element form controls type (text, radio, checkbox, hidden, password) name, id, size, maxlength, value, disabled, readonly, autocomplete (on, off) autofocus, list, placeholder, required, accesskey, tabindex Submit and Reset Button (type=“submit”, type=“reset”) type (submit, reset), name, id, value, accesskey, tabindex)

8. Input Elements

9. Textarea Element Enter your comments here Enter your comments here name, id, cols, rows, maxlength, disabled, readonly, autofocus, placeholder, required, wrap (hard, soft), tabindex

10. Typical Contact Form ResetSubmit

11. Select List Drop-down list Attributes: name, id, size, multiple, disabled, tabindex Requires “option” element North Carolina South Carolina North Carolina South Carolina

12. Other Forms of Submission Image button: when an image button is clicked, the form is submitted Button element: can be used to configure not only images, but also blocks of text as the selectable area that can submit or reset a form

13. Accessibility and Forms Label Element: a way to label inputs more easily Email: Email: Fieldset and Legend Elements: very useful for form organization Billing Address Street: City: State: Zip: Billing Address Street: City: State: Zip:

14. tabindex & accesskey Most tab orders are based on order of input element within the code. However, if you would like to change the order… If you need a shortcut key to take you to that particular input element…

15. Styling a Form Using table structures Transitional Approach: code the form into a table, but use CSS to style the table Pure CSS: style your form (labels, text boxes, buttons, etc…) with nothing but CSS

16. After the Form Submission What do we do with the user’s data once the form is submitted? We need server-side scripting/processing CGI (Common Gateway Interface) PHP (Hypertext Pre-Processor) How?...Remote Hosted Form Processing FormBuddy.com, FormMail, ExpressDB, Master.com Write our own PHP or CGI script? We must ensure our scripts are secure, so we’ll use PHP (which is what I’m familiar with). We’ll cover this in Lecture 5.

17. HTML5 Form Controls Email Address Input (must be in a@b.c format) Email Address Input (must be in a@b.c format) a@b.c URL Input (looks for website URLs) URL Input (looks for website URLs) Telephone Number Input (555-555-5555 format) Telephone Number Input (555-555-5555 format) Search Field Input Search Field Input

18. More HTML5 Form Control Datalist Form Control (allows input and list choice) Datalist Form Control (allows input and list choice) Slider Form Control (uses a slider to control value) Slider Form Control (uses a slider to control value) Calendar Form Control (presents a calendar for date configurations) Calendar Form Control (presents a calendar for date configurations) Color-well Form Control (gives a color choice map) Color-well Form Control (gives a color choice map)