tables and forms html5 tables and forms. table overview table element ( ) attributes: align (left,...
Post on 29-Dec-2015
240 Views
Preview:
TRANSCRIPT
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”>
top related