1. HTML5 www.profburnett.com Session V
Chapter 10 - How to Work with Tables Chapter 11 - How to Work with Forms
Master a Skill / Learn for Life

2. Session Outline How to Work with Tables How to Work with Forms
11/21/2018
Copyright © Carl M. Burnett

3. Table Outline Basic Skills for Working with Tables
Other Skills for Working with Tables
11/21/2018
Copyright © Carl M. Burnett

4. Table Header Cells
Table Caption
Table Header
Table Rows
Table Body
Table Footer
Table Data Cells
11/21/2018
Copyright © Carl M. Burnett

5. Common Elements for Coding Tables
Description
table
Defines table tr
Defines table row th
Defines table header row td
Defines table data cell in a row
11/21/2018
Copyright © Carl M. Burnett

6. The HTML for the Sales by Book Table
<tr>
<th class="left">Book</th>
<th>Year Published</th>
<th>Sales</th>
</tr>
<td class="left">PHP and MySQL</td>
<td>2010</td>
<td>$372,381</td> .
<tr id="total">
<th class="left">Total Sales</th>
<td></td>
<td>$2,154,786</td>
</table>
Example
11/21/2018
Copyright © Carl M. Burnett

7. Common Properties for Formatting Tables
Property
Description
border-collapse
Keyword defines space between borders.
Values: collapse or separate (default)
border-spacing
Relative or absolute value of space between cells
padding
Space between cell content
text-align
Horizontal Alignment
vertical-align
Vertical Alignment
11/21/2018
Copyright © Carl M. Burnett

8. CSS for the Sales by Book Table
border: 1px solid black;
border-collapse: collapse; }
th, td {
padding: .2em .7em;
text-align: right; }
th.left, td.left { text-align: left; }
#total { font-weight: bold; }
Example
11/21/2018
Copyright © Carl M. Burnett

9. The elements for the header, body, and footer
Description
thead
Groups one of more rows in table header
tbody
Groups the rows between header and footer
tfoot
Groups one of more rows in table footer
11/21/2018
Copyright © Carl M. Burnett

10. HTML & CSS for a table with a header, body, and footer
<thead>
<tr>
<th class="left">Book</th>
<th>Year published</th>
<th>Total sales</th>
</tr>
</thead>
<tbody>
<td class="left">PHP and MySQL</td>
<td>2010</td>
<td>$372,381</td> .
</tbody>
<tfoot>
<th class="left">Total Sales</th>
<td></td>
<td>$2,154,786</td>
</tfoot>
</table>
thead, tfoot { background-color: aqua; }
tfoot { font-weight: bold; }
Example
11/21/2018
Copyright © Carl M. Burnett

11. The Syntax for CSS3 structural pseudo-class selectors
Element
Description
:nth-child(n)
nth child of parent
:nth-last-child(n)
nth child of parent counting backwards
:nth-of-type(n)
nth element of its type within the parent
:nth-last-of-type(n)
nth element of its type counting backwards
Value
Description
odd
Every odd child or element
even
Every even child or element n
Every nth child or element 2n
Same as even 3n
Every third child or element (3,6,9…..)
2n+1
Same as odd
3n+1
Every third child or element starting with 1 (1, 4, 7, ……)
11/21/2018
Copyright © Carl M. Burnett

12. CSS3 for formatting a table without using classes
th:first-child, td:first-child {
text-align: left; }
th:nth-child(2), td:nth-child(2) {
text-align: center; }
tbody tr:nth-child(even) {
background-color: silver; }
Example
11/21/2018
Copyright © Carl M. Burnett

13. The HTML for the figure and figcaption elements
<figcaption>Total Sales by Book</figcaption>
<table> .
</table>
</figure>
The CSS for the figure and figcaption elements
figure, figcaption {
margin: 0;
padding: 0; }
figure {
border: 1px solid black;
width: 450px;
padding: 15px; }
figcaption {
display: block;
font-weight: bold;
text-align: center;
font-size: 120%;
padding-bottom: .25em; }
table {
border-collapse: collapse;
margin: 10px auto; }
Example
11/21/2018
Copyright © Carl M. Burnett

14. Attributes for merging cells
Element
Description
colspan
The number of columns that will span cells
rowspan
The number of rows that will span cells
11/21/2018
Copyright © Carl M. Burnett

15. The CSS for the merged cells
The HTML for the table
<table>
<thead>
<tr>
<th rowspan="2">Book</th>
<th colspan="4">Sales</th>
</tr>
<th>North</th>
<th>South</th>
<th>West</th>
<th>Total</th>
</thead>
<tbody> .
</tbody>
<tfoot>
<th>Sales Totals</th>
<td>$140,775</td>
<td>$165,550</td>
<td>$762,794</td>
<td>$1,069,119</td>
</tfoot>
</table>
The CSS for the merged cells
th:first-child { vertical-align: bottom; }
th:nth-child(2) { text-align: center; }
tr:nth-child(2) th { text-align: right; }
Example
11/21/2018
Copyright © Carl M. Burnett

16. Attributes that can be used for accessibility
Description
caption
Describes the content of the table
headers
Identifies one or more header cells
scope
Keyword that associates with column or row. Keywords: col , row, rowgroup for merged cells
11/21/2018
Copyright © Carl M. Burnett

17. Student Exercise 1
Complete Exercise 10-1 on page 369 using Dreamweaver.
Upload your HTML pages and CSS files to the live site to preview.
11/21/2018
Copyright © Carl M. Burnett

18. Next – How to work with forms
Break
Next – How to work with forms
11/21/2018
Copyright © Carl M. Burnett

19. Forms Outline How to Use Forms and Controls
Other Skills for Working with Forms
How to Use HTML5 for Data Validation
How to Use HTML5 Controls
11/21/2018
Copyright © Carl M. Burnett

20. Attributes of Form Element
Description
name
Name for code
action
URL of processing file
method
Get or Post
target
Where to open page
Attributes - Input Elements
Attribute
Description
type
Type of control ie “button”, “text”, “checkbox”
name
Name of Code
disabled
Boolean that disables control
readonly
Boolean that means user can change control value
11/21/2018
Copyright © Carl M. Burnett

21. URL when form submitted with “get” method
HTML for Form
<form name=" _form" action="subscribe.php"
method="post">
<p>Please enter your address to subscribe to
our newsletter.</p>
<p> <input type="text" name=" "></p>
<p><input type="submit" name="submit"
value="Subscribe"></p>
</form>
URL when form submitted with “get” method
subscribe.php? =zak%40modulemedia.com&submit=Subscribe
Example
11/21/2018
Copyright © Carl M. Burnett

22. Attributes Input Element Buttons and Button Element
Descriptions
type
Submit, Reset, button, or image
value
Text to display
src
Relative or Absolute URL of image
alt
Alternate Text
height
Pixels or Percent
width
11/21/2018
Copyright © Carl M. Burnett

23. Four buttons that are created by the input element
<input type="button" name="message" value="Alert Me">
<input type="submit" name="checkout" value="Checkout">
<input type="reset" name="resetform" value="Reset">
<input type="image" src="images/submit.jpg"
alt="Submit button" width="114" height="42">
A button that is created by the button element
<button type="submit">
<img src="images/addtocart.png" width="30"
height="23" alt="Add to Cart">Add to Cart
</button>
Example
11/21/2018
Copyright © Carl M. Burnett

24. Attributes - Input Element Text Fields
Descriptions
type
text, password, or hidden
value
Default value
maxlength
Max Characters
size
Width of the field in characters
autofocus
A boolean attribute to set focus on
placeholder
Puts a default value or hint in the field. Value is removed when user’s cursor enters the control
11/21/2018
Copyright © Carl M. Burnett

25. The HTML for Text Fields
Quantity:<input type="text" name="quantity" value="1"
size="5" readonly><br><br>
Username:<input type="text" name="username"
autofocus><br><br>
Password:<input type="password" name="password"
maxlength="6"
placeholder="Enter your password"><br><br>
Hidden:<input type="hidden" name="productid"
value="widget">
Example
11/21/2018
Copyright © Carl M. Burnett

26. Attributes of Radio Buttons and Check Boxes
Descriptions
type
Radio or checkbox
value
Value Submitted
checked
Boolean
Crust:<br>
<input type="radio" name="crust" value="thin">
Thin Crust<br>
<input type="radio" name="crust" value="deep" checked>
Deep Dish<br>
<input type="radio" name="crust" value="hand">
Hand Tossed<br><br>
Toppings:<br>
<input type="checkbox" name="topping1" value="pepperoni">
Pepperoni<br>
<input type="checkbox" name="topping2" value="mushrooms">
Mushrooms<br>
<input type="checkbox" name="topping3" value="olives">
Olives
Example
11/21/2018
Copyright © Carl M. Burnett

27. Attributes of Optgroup and Option Element
Descriptions
optgroup
Label
Text used to identify group
option
value
Value sent to server
selected
Boolean value
Style:<br>
<select name="style_and_size">
<optgroup label="The New Yorker">
<option value="ny10">10"</option>
<option value="ny12">12"</option>
<option value="ny16">16"</option>
</optgroup>
<optgroup label="The Chicago">
<option value="chi10">10"</option>
<option value="chi12">12"</option>
<option value="chi16">16"</option>
</select>
Example
11/21/2018
Copyright © Carl M. Burnett

28. Attributes of Select Element for List Boxes
Descriptions
size
Number if item to display
multiple
Boolean for multiple select
<select name="toppings" size="4" multiple>
<option value="pepperoni">Pepperoni</option>
<option value="sausage" selected>Sausage</option>
<option value="mushrooms">Mushrooms</option>
<option value="olives">Black olives</option>
<option value="onions">Onions</option>
<option value="bacon">Canadian bacon</option>
<option value="pineapple">Pineapple</option>
</select>
Example
11/21/2018
Copyright © Carl M. Burnett

29. Attributes of Textarea Element
Descriptions
rows
Approximate number of rows
cols
Approximate number of columns
wrap
Text wrap specifications: hard | soft (default)
HTML for Text Area
Comments:<br>
<textarea name="comments" placeholder="If you have any comments, please enter them here.">
</textarea>
CSS for Text Area
textarea {
height: 5em;
width: 25em;
font-family: Arial, Helvetica, sans-serif; }
Example
11/21/2018
Copyright © Carl M. Burnett

30. The HTML for a form with label elements
Attributes
Descriptions
for
Set the id of the related control. id required for form that use labels for attributes.
<label for="quantity" id="quantity">Quantity:</label>
<input type="text" name="quantity" id="quantity"
value="1" size="5"><br><br>
Crust:<br>
<input type="radio" name="crust" id="crust1"
value="thin">
<label for="crust1">Thin Crust</label><br>
<input type="radio" name="crust" id="crust2"
value="deep">
<label for="crust2">Deep Dish</label><br>
<input type="radio" name="crust" id="crust3"
value="hand">
<label for="crust3">Hand Tossed</label><br><br>
Example
11/21/2018
Copyright © Carl M. Burnett

31. HTML that uses fieldset and legend elements
<form name="order" action="order.php" method="post">
<fieldset>
<legend>Crust</legend>
<input type="radio" name="crust" id="crust1"
value="thin">
<label for="crust1">Thin Crust</label><br>
<input type="radio" name="crust" id="crust2"
value="deep">
<label for="crust2">Deep Dish</label><br>
<input type="radio" name="crust" id="crust3"
value="hand">
<label for="crust3">Hand Tossed</label>
</fieldset>
<br>
Example
11/21/2018
Copyright © Carl M. Burnett

32. Attributes of the input element for a file upload control
Descriptions
accept
The types of files accepted for upload.
multiple
Boolean attribute to upload more than one file.
HTML for a file upload control
<form name="upload_form" action="send .php"
method="post" enctype="multipart/form-data">
Attach an image:<br>
<input type="file" name="fileupload"
accept="image/jpeg, image/gif">
</form>
Example
11/21/2018
Copyright © Carl M. Burnett

33. Aligned label, text box, and button controls
The HTML for the controls
The CSS for the controls
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"
autofocus><br>
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname"><br>
<label for="address">Address:</label>
<input type="text" name="address" id="address"><br>
<label for="city">City:</label>
<input type="text" name="city" id="city"><br>
<label for="state">State:</label>
<input type="text" name="state" id="state"><br>
<label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip"><br>
<input type="submit" name="register" id="button"
value="Register">
<input type="reset" name="reset" id="reset">
label {
float: left;
width: 5em;
text-align: right;}
input {
margin-left: 1em;
margin-bottom: .5em;}
#button {
margin-left: 7em;}
Example
11/21/2018
Copyright © Carl M. Burnett

34. The CSS for the enhanced form
body {
font: 90% Arial, Helvetica, sans-serif;
margin: 20px; }
label {
color: navy;
float: left;
width: 8em;
font-weight: bold;
text-align: right;}
input {
width: 15em;
margin-left: 1em;
margin-bottom: .5em;}
input:focus {
border: 2px solid navy; }
#button, #reset {
width: 7em;
box-shadow: 2px 2px 0 navy;
background-color: silver; }
#button { margin-left: 9.5em; }
Example
11/21/2018
Copyright © Carl M. Burnett

35. The attributes for tab order and access keys
Descriptions
tabindex
Sets the tab order of the control
accesskey
Keyboard and control key
Accessibility guideline - Setting a proper tab order and providing access keys improves the accessibility for users who can’t use a mouse.
The HTML for the controls
Another way to define the access keys
<label for="firstname"><u>F</u>irst name:</label>
<input type="text" name="firstname" id="firstname"
accesskey="F"><br>
<label for="lastname"><u>L</u>ast name:</label>
<input type="text" name="lastname" id="lastname"
accesskey="L"><br>
<label for=" "><u>E</u>mail:</label>
<input type="text" name=" " id=" " accesskey="E
<label for="firstname"
accesskey="F"><u>F</u>irst name:</label>
<input type="text" name="firstname" id="firstname"><br>
<label for="lastname"
accesskey="L"><u>L</u>ast name:</label>
<input type="text" name="lastname" id="lastname"><br>
<label for=" " accesskey="E"><u>E</u>mail:</label>
<input type="text" name=" " id=" ">
Example
11/21/2018
Copyright © Carl M. Burnett

36. The HTML5 attributes for data validation
Descriptions
autocomplete
Set attribute to off – disables auto-completion
required
Boolean attribute – Form submitted empty browser display error message
novalidate
Boolean attribute to tell browser not to validate form
HTML that uses the validation attributes
The CSS3 pseudo-classes for validation
Name: <input type="text" name="name" required><br>
Address: <input type="text" name="address"
novalidate><br>
Zip: <input type="text" name="zip" required><br>
Phone: <input type="text" name="phone"
required autocomplete="off"><br>
<input type="submit" name="submit" value="Submit Survey">
:valid
:invalid
input[required]
Example
Selector for controls with required attribute
:required
11/21/2018
Copyright © Carl M. Burnett

37. Attributes for using regular expressions
Descriptions
pattern
Specifies regular expression to valid entry
title
Test that is displayed in tooltip
Patterns for common entries
Used For
Pattern
Password (6+ alphanumeric)
[a-zA-Z0-9]{6,}
Zip code (99999 or )
\d{5}([\-]\d{4})?
Phone number ( )
\d{3}[\-]\d{3}[\-]\d{4}
Date (MM/DD/YYYY)
[01]?\d\/[0-3]\d\/\d{4}
URL (starting with or
https?://.+
Credit card ( )
^\d{4}-\d{4}-\d{4}-\d{4}$
11/21/2018
Copyright © Carl M. Burnett

38. HTML that uses regular expressions
Name: <input type="text" name="name"
required autofocus><br>
Zip: <input type="text" name="zip" required
pattern="\d{5}([\-]\d{4})?"
title="Must be or "><br>
Phone: <input type="text" name="phone" required
pattern="\d{3}[\-]\d{3}[\-]\d{4}"
title="Must be "><br>
<input type="submit" name="submit" value="Submit Survey">
Example
11/21/2018
Copyright © Carl M. Burnett

39. Attributes for the option elements within a datalist element
Descriptions
value
The value of the option in the datalist. Left aligned
label
Description of item
<p>Our company is conducting a survey. Please answer the
question below.</p>
<label for="link">What is your preferred search engine:
</label>
<input type="url" name="link" id="link" list="links">
<datalist id="links">
<option value="
label="Google">
<option value=" label="Yahoo">
<option value=" label="Bing">
<option value="
label="Dogpile">
</datalist>
<br><br>
<input type="submit" name="submit" value="Submit Survey">
Example
11/21/2018
Copyright © Carl M. Burnett

40. The type attribute for email, url, and tel controls
Attributes
Descriptions
A control for receiveing address (Implies Validation)
url
A control for receiving a URL (Implies Validation)
tel
A control for receiving a telephone number (Does not Imply Validation)
<form name=" _form" action="survey.php"
method="post">
<h3>Your information:</h3>
<label for=" ">Your address:</label>
<input type=" " name=" " id=" "
required><br>
<label for="link">Your web site:</label>
<input type="url" name="link" id="link"
list="links"><br>
<label for="phone">Your phone number:</label>
<input type="tel" name="phone" id="phone"
required><br><br>
<input type="submit" name="submit"
value="Submit Survey">
</form>
Example
11/21/2018
Copyright © Carl M. Burnett

41. Attributes for the number and range controls
Descriptions
min
Minimum value
max
Maximum value
step
The increase and decrease by user clicks or up and down arrow keys
<h3>Your information:</h3>
<form name="test_form" action="test.php" method="get">
<label for="investment">Monthly investment: </label>
<input type="number" name="investment"
id="investment" min="100" max="1000"
step="100" value="300"><br><br>
<label for="book">Rate the book from 1 to 5: </label>
<input type="range" name="book" id="book"
min="1" max="5" step="1"><br><br>
<input type="submit" name="submit"
value="Submit Survey">
</form>
Example
11/21/2018
Copyright © Carl M. Burnett

42. Attributes for the date and time controls
Descriptions
min
Minimum value
max
Maximum value
Date and time:  
<input type="datetime" name="datetime"><br><br>
Local date and time:  
<input type="datetime-local"
name="datetimelocal"><br><br>
Month:  
<input type="month" name="month"><br><br>
Week:  
<input type="week" name="week"><br><br>
Time:  
<input type="time" name="time"><br><br>
Date:  
<input type="date" name="date">
In Opera
Example
11/21/2018
Copyright © Carl M. Burnett

43. A search function that uses a search control
<form method="get" action="
<input type="search" name="q" size="30"
maxlength="255">
<input type="hidden" name="domains"
value="
<input type="hidden" name="sitesearch"
<input type="submit" name="search" value="Search">
</form>
Example
11/21/2018
Copyright © Carl M. Burnett

44. The HTML for a color control
<label for="firstcolor">Choose your first background
color:</label>
<input type="color" name="firstcolor" id="firstcolor">
In Opera
Example
11/21/2018
Copyright © Carl M. Burnett

45. An attribute for the output element
Descriptions
for
Can be used to associate output element with one or more controls
<p>Enter numbers in both fields and click the Calculate button.</p>
<form onsubmit="return false">
<input name="x" type="number" min="100" step="5"
value="100"> +
<input name="y" type="number" min="100" step="5"
value="100"><br><br>
<input type="button" value="Calculate"
onClick="result.value = parseInt(x.value) +
parseInt(y.value)">
<br><br>
Total: <output name="result" for="x y"></output>
</form>
In Safari
Example
11/21/2018
Copyright © Carl M. Burnett

46. Attributes for the progress and meter elements
Descriptions
high
High point
low
Low point
min
Lowest limit
max
Maximum limit
optimum
Optimum value
value
Current value
<body onLoad="setProgressAndMeter()">
<h3>Progress Element</h3>
Progress set by JavaScript on page load:
<progress id="progressBar" max="100"
value="0"></progress>
<h3>Meter Element</h3>
Meter set by JavaScript on page load:
<meter id="meterBar" max="100" value="0" optimum="50"
high="60"></meter>
</body>
In Opera
Example
11/21/2018
Copyright © Carl M. Burnett

47. A web page that uses HTML5 data validation (Opera)
CSS
In Opera
Example
11/21/2018
Copyright © Carl M. Burnett

48. Session Review How to Work with Tables How to Work with Forms
11/21/2018
Copyright © Carl M. Burnett