Scribd
Upload
5 views45 pages

Lec1 3 Chapter05 HTMLTablesAndForms

Chapter 5 of 'Fundamentals of Web Development' covers HTML tables and forms, detailing their structure, styling, and accessibility. It introduces key elements such as table headers, form controls, and the importance of using semantic markup for accessibility. The chapter also discusses microformats and provides a summary of key terms related to the topics covered.

Uploaded by

Saiar Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views45 pages

Lec1 3 Chapter05 HTMLTablesAndForms

Chapter 5 of 'Fundamentals of Web Development' covers HTML tables and forms, detailing their structure, styling, and accessibility. It introduces key elements such as table headers, form controls, and the importance of using semantic markup for accessibility. The chapter also discusses microformats and provides a summary of key terms related to the topics covered.

Uploaded by

Saiar Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

HTML Tables and

Forms

Chapter 5

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
http://www.funwebdev.com
Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form


Accessibility 6 Microformats

7 8
Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form


Accessibility 6 Microformats

7 8
Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Tables
Basic Table Structure

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Tables
Basic Table Structure

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Tables
Adding Headings

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Tables
Spanning Columns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Tables
Spanning Rows

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Tables
Additional Table Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Tables
Using Tables for Layout

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form


Accessibility 6 Microformats

7 8
Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Styling Tables
Table Borders

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Styling Tables
Table Borders

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Styling Tables
Boxes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Styling Tables
Boxes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Styling Tables
Boxes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Styling Tables
Hover & Zebras

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form


Accessibility 6 Microformats

7 8
Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Forms
Form Structure

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Forms
How Forms Work

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Forms
Query Strings

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Forms
GET and POST

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Introducing Forms
HTML Form elements

• <button> • <legend>

• <datalist> • <option>

• <fieldset> • <optgroup>

• <form> • <select>

• <input> • <textarea>

• <label> • <output>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form


Accessibility 6 Microformats

7 8
Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Text Input Controls

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
New in HTML5 – pattern and datalist

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Choice Controls ( <select>)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Choice Controls <select> using value attribute

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Button Controls (radio)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Button Controls (checkbox)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Button Controls (checkbox)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Specialized Controls (file upload)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Specialized Controls (number and range controls)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Specialized Controls (colour)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Date and Time Controls

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Form Control Elements
Date and Time Controls

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form


Accessibility 6 Microformats

7 8
Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Table and Form Accessibility
Accessible Tables

• Use tables for data, not layout


• Use the <caption> element
• Connect cells with a textual description in the
header
<caption>Famous Paintings</caption>
<tr>
<th scope="col">Title</th>
<th scope="col">Artist</th>
<th scope="col">Year</th>
<th scope="col">Width</th>
<th scope="col">Height</th>
</tr>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Table and Form Accessibility
Accessible Form

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form


Accessibility 6 Microformats

7 8
Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Microformats

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Microformats
Schema.org

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Microformats
References

hCard, which is used to semantically mark up contact


information for a person
• http://microformats.org/wiki/hcard.
Schema.org aims to create and promote schemas for
structured data on the Web. Google’s on-line testing
tool helps developers test their semantic markup and
microformats
• https://search.google.com/structured-data/testing-
tool/u/0/

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form


Accessibility 6 Microformats

7 8
Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Summary
Key Terms

• checkbox • query string • web


accessibility
• colspan • radio
buttons • Web
• form Accessibility
• rowspan
• GET • Initiative
• schema.org (WAI)
• hCard
• table
• microformat
• URL
• POST encoded

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.

You might also like