Tables and Tables and FormsForms

HTML5 Tables and FormsHTML5 Tables and Forms

Table OverviewTable Overview

table element (<table></table>)table element (<table></table>)

Attributes: align (left, right, center), bgcolor, border, cellpadding, Attributes: align (left, right, center), bgcolor, border, cellpadding, cellspacing, summary, title, widthcellspacing, summary, title, width

table row (<tr></tr>)table row (<tr></tr>)

Attributes: align (left, right, center), bgcolorAttributes: align (left, right, center), bgcolor

table data cell (<td></td>)table data cell (<td></td>)

Attributes: align, bgcolor, colspan, headers, height, rowspan, scope, Attributes: align, bgcolor, colspan, headers, height, rowspan, scope, valign, widthvalign, width

table captions (<caption></caption>)table captions (<caption></caption>)

Span Rows and ColumnsSpan Rows and Columns

Similar to “merge cells”Similar to “merge cells”in Excelin Excel

colspancolspan

rowspanrowspan

This spans two columns

Col 1 Col 2

This spans two rows

Row 1 Col 2

Row 2Col 2

Style a Table with CSSStyle a Table with CSS

HTML properties (corresponding CSS table HTML properties (corresponding CSS table properties)properties)

align (table { width: 75%; margin: auto; })align (table { width: 75%; margin: auto; })

width (width), height (height), cellpadding width (width), height (height), cellpadding (padding)(padding)

cellspacing (border-spacing, border-collapse)cellspacing (border-spacing, border-collapse)

bgcolor (background-color), valign (vertical-align)bgcolor (background-color), valign (vertical-align)

border (border, border-style, border-spacing)border (border, border-style, border-spacing)

CSS3 Structural Pseudo-CSS3 Structural Pseudo-ClassClass

Alternating row colors (aka: zebra-striping)Alternating row colors (aka: zebra-striping)

:first-of-type (applies to the first element of the type):first-of-type (applies to the first element of the type)

:first-child (applies to the first child of an element):first-child (applies to the first child of an element)

:last-of-type (applies to the last element of the type):last-of-type (applies to the last element of the type)

:last-child (applies to the last child of an element):last-child (applies to the last child of an element)

:nth-of-type(n) (applies to the nth element – number, :nth-of-type(n) (applies to the nth element – number, odd, even)odd, even)

Configure Table SectionsConfigure Table Sections

<caption>, <thead>, <caption>, <thead>, <tbody>, <tfoot><tbody>, <tfoot>

<table border="1">  <thead>    <tr>      <th>Month</th>      <th>Savings</th>    </tr>  </thead>  <tfoot>    <tr>      <td>Sum</td>      <td>$180</td>    </tr>  </tfoot>  <tbody>    <tr>      <td>January</td>      <td>$100</td>    </tr>    <tr>      <td>February</td>      <td>$80</td>    </tr>  </tbody></table>

FormsForms

form element (<form></form>)form element (<form></form>)

Attributes: action, autocomplete (on, off), id, method (get, post), nameAttributes: action, autocomplete (on, off), id, method (get, post), name

Generally the action is sending the form data to a PHP page for Generally the action is sending the form data to a PHP page for processingprocessing

input element form controlsinput element form controls

type (text, radio, checkbox, hidden, password)type (text, radio, checkbox, hidden, password)

name, id, size, maxlength, value, disabled, readonly, autocomplete (on, name, id, size, maxlength, value, disabled, readonly, autocomplete (on, off) autofocus, list, placeholder, required, accesskey, tabindexoff) autofocus, list, placeholder, required, accesskey, tabindex

Submit and Reset Button (type=“submit”, Submit and Reset Button (type=“submit”, type=“reset”)type=“reset”)

type (submit, reset), name, id, value, accesskey, tabindex)type (submit, reset), name, id, value, accesskey, tabindex)

Input ElementsInput Elements

<input type=“text”…><input type=“text”…>

<input type=“radio”…><input type=“radio”…>

<input type=“checkbox”…><input type=“checkbox”…>

<input type=“password”…><input type=“password”…>

<input type=“submit”…><input type=“submit”…>

<input type=“reset”…><input type=“reset”…>

Textarea ElementTextarea Element

<textarea name=“comments” id=“comments” cols=“40” <textarea name=“comments” id=“comments” cols=“40” rows=“2”>Enter your comments here</textarea>rows=“2”>Enter your comments here</textarea>

name, id, cols, rows, maxlength, disabled, name, id, cols, rows, maxlength, disabled, readonly, autofocus, placeholder, required, readonly, autofocus, placeholder, required, wrap (hard, soft), tabindexwrap (hard, soft), tabindex

Typical Contact FormTypical Contact Form

<form><form><input…><input…><input…><input…><input…><input…><textarea…><textarea…><input…><input…><input…><input…>

</form></form>

ResetResetSubmitSubmit

Select ListSelect List

Drop-down listDrop-down list

Attributes: name, id, size, multiple, disabled, Attributes: name, id, size, multiple, disabled, tabindextabindex

Requires “option” elementRequires “option” element

<select size=“1” name=“dropdown” <select size=“1” name=“dropdown” id=“dropdown”>id=“dropdown”>

<option value=“NC”>North <option value=“NC”>North Carolina</option>Carolina</option>

<option value=“SC”>South <option value=“SC”>South Carolina</option>Carolina</option></select></select>

Other Forms of Other Forms of SubmissionSubmission

Image button: when an image button is clicked, Image button: when an image button is clicked, the form is submittedthe form is submitted

<input type=“image” src=“pic.jpg” alt=“Alt”><input type=“image” src=“pic.jpg” alt=“Alt”>

Button element: can be used to configure not Button element: can be used to configure not only images, but also blocks of text as the only images, but also blocks of text as the selectable area that can submit or reset a formselectable area that can submit or reset a form

<button type=“submit”><button type=“submit”><img src=“pic.jpg”><img src=“pic.jpg”>

</button></button>

Accessibility and FormsAccessibility and Forms

Label Element: a way to label inputs more easilyLabel Element: a way to label inputs more easily

<label>Email: <input type=“text” name=“email” id=“email”></label><label>Email: <input type=“text” name=“email” id=“email”></label>

Fieldset and Legend Elements: very useful for form Fieldset and Legend Elements: very useful for form organizationorganization

<fieldset><fieldset><legend>Billing Address</legend><legend>Billing Address</legend><label>Street: <input type=“text” name=“street” <label>Street: <input type=“text” name=“street”

id=“street”></label><br>id=“street”></label><br><label>City: <input type=“text” name=“city” <label>City: <input type=“text” name=“city”

id=“city”></label>id=“city”></label><label>State: <input type=“text” name=“state” <label>State: <input type=“text” name=“state”

id=“state”></label>id=“state”></label><label>Zip: <input type=“text” name=“zip” id=“zip”></label><label>Zip: <input type=“text” name=“zip” id=“zip”></label>

</fieldset></fieldset>

tabindex & accesskeytabindex & accesskey

Most tab orders are based on order of input Most tab orders are based on order of input element within the code. However, if you would element within the code. However, if you would like to change the order…like to change the order…

<input type=“text” name=“email” <input type=“text” name=“email” tabindex=“1”>=“1”>

If you need a shortcut key to take you to that If you need a shortcut key to take you to that particular input element…particular input element…

<input type=“text” name=“email” <input type=“text” name=“email” accesskeyaccesskey=“E”>=“E”>

Styling a FormStyling a Form

Using table structuresUsing table structures

Transitional Approach: code the form into a Transitional Approach: code the form into a table, but use CSS to style the tabletable, but use CSS to style the table

Pure CSS: style your form (labels, text boxes, Pure CSS: style your form (labels, text boxes, buttons, etc…) with nothing but CSSbuttons, etc…) with nothing but CSS

After the Form After the Form SubmissionSubmission

What do we do with the user’s data once the What do we do with the user’s data once the form is submitted?form is submitted?

We need server-side scripting/processingWe need server-side scripting/processing

CGI (Common Gateway Interface)CGI (Common Gateway Interface)

PHP (Hypertext Pre-Processor)PHP (Hypertext Pre-Processor)

How?...Remote Hosted Form ProcessingHow?...Remote Hosted Form Processing

FormBuddy.com, FormMail, ExpressDB, Master.comFormBuddy.com, FormMail, ExpressDB, Master.com

Write our own PHP or CGI script?Write our own PHP or CGI script?

We must ensure our scripts are secure, so we’ll use PHP (which is 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.what I’m familiar with). We’ll cover this in Lecture 5.

HTML5 Form ControlsHTML5 Form Controls

Email Address Input (must be in Email Address Input (must be in a@b.c format) format)<input type=“email” name=“myemail” id=“myemail”><input type=“email” name=“myemail” id=“myemail”>

URL Input (looks for website URLs)URL Input (looks for website URLs)<input type=“url” name=“myurl” id=“myurl”><input type=“url” name=“myurl” id=“myurl”>

Telephone Number Input (555-555-5555 format)Telephone Number Input (555-555-5555 format)<input type=“tel” name=“mobile” id=“mobile”><input type=“tel” name=“mobile” id=“mobile”>

Search Field InputSearch Field Input<input type=“search” name=“mysearch” id=“mysearch”><input type=“search” name=“mysearch” id=“mysearch”>

More HTML5 Form More HTML5 Form ControlControl

Datalist Form Control (allows input and list choice)Datalist Form Control (allows input and list choice)<input type=“text” name=“color” id=“color” list=“colors”><input type=“text” name=“color” id=“color” list=“colors”>

<datalist id=“colors”><datalist id=“colors”><option value=“red”><option value=“red”><option value=“blue”><option value=“blue”>

</datalist></datalist>

Slider Form Control (uses a slider to control value)Slider Form Control (uses a slider to control value)<input type=“range” name=“mychoice” id=“mychoice”><input type=“range” name=“mychoice” id=“mychoice”>

Calendar Form Control (presents a calendar for date configurations)Calendar Form Control (presents a calendar for date configurations)<input type=“date” name=“calendar” id=“calendar”><input type=“date” name=“calendar” id=“calendar”>

Color-well Form Control (gives a color choice map)Color-well Form Control (gives a color choice map)<input type=“color” name=“mycolor” id=“mycolor”><input type=“color” name=“mycolor” id=“mycolor”>