HTML 5 Tables and Forms

HTML 5 – Tables, Forms
and Frames
Doncho Minkov
Technical Trainer
http://minkov.it
Telerik Web Design Course
html5course.telerik.com

Contents
 HTML Tables

 Simple Tables
 Complete HTML 5 Tables
 Data cells and Header cells
 Nested Tables

 Complex tables

 Cells Width
 Cell Spacing and Padding
 Column and Row Span
2

Contents (2)
 HTML Forms

 Form Fields and Fieldsets
 Text boxes
 Buttons
 Checkboxes and Radio Buttons
 Select fields
 Hidden fields
 Sliders and Spinboxes
 Validation fields
3

Contents (3)
 HTML Frames

 Frame and Noframe tags
 IFrames

4

HTML Tables
 Tables represent tabular data

 A table consists of one or several rows
 Each row has one or more columns
 Tables comprised of several core tags:

<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
 Tables should not be used for layout. Use CSS

floats and positioning styles instead
6

Simple HTML Tables – Example
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
7

Simple HTML Tables
Live Demo

Data Cells and Header Cells
 Two kinds of cells in HTML 5 tables

 Data cells – containing the table data
 Header cells – used for the column names or
some more important cells in a table
 Why two kinds of cells?

 Used to semantically separate the cells
<tr>
<th>Full name</th> <th> Mark </th>
</tr>
<tr>
<td>Doncho Minkov</td> <td>Very good 5</td>
</tr>
<tr>
<td>Georgi Georgiev</td> <td>Exellent 6</td>
</tr>

Data and Header Cells
Live Demo

Complete
HTML 5 Tables
With Header, Footer
and Body

Complete HTML Tables
 Table rows split into three semantic sections:

header, body and footer
 <thead> denotes table header and contains
<th> elements, instead of <td> elements
 <tbody> denotes collection of table rows that
contain the very data
 <tfoot> denotes table footer but comes
BEFORE the <tbody> tag
 <colgroup> and <col> define columns (used
to set column widths)
12

Complete HTML Table: Example
<table>
<colgroup> columns
<col style="width:100px" /><col />
</colgroup>
header th
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot> footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody> Last comes the body
(data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
</tbody>
</table>
13

Complete HTML Table:
Example (2)
<table>
table-full.html
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Although the footer is
<tr><td>Cellbefore the data in the
2.1</td><td>Cell 2.2</td></tr>
</tbody>
code, it is displayed
</table>
last 14

Complete HTML 5 Tables
Live Demo

Nested Tables
Tables in Tables in Tables in Tables…

Nested Tables
 Table "cells" (<td>) can contain nested tables
(tables within tables):
<table> nested-tables.html
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
17

Complex Tables
With Padding, Spacing and Stuff

Cell Spacing and Padding
 Tables have two attributes related to space

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty
empty space space around the cell
between cells content
20

Cell Spacing and Padding –
Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

21

Cell Spacing and Padding –
Example (2)
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

22

Table Cell Spacing
and Cell Padding
Live Demo

Row and Column
Spans
How to make a two-cells
column? Or row?

Column and Row Span
 Cells have two attributes related to merging

 colspan  rowspan
colspan="1 colspan="1 rowspan="2 rowspan="1
" " " "
cell[1,1] cell[1,2] cell[1,2]
cell[1,1]
cell[2,1] cell[2,1]

colspan="2 rowspan="1
 Defines how "  Defines how"

many columns many rows the
the cell occupies cell occupies
25

Column and Row Span –
Example
table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
</table>

26

Column and Row Span –
table-colspan-rowspan.html
Example (2)
<table cellspacing="0">
<td colspan="2">Cell[2,1]</td></tr>
<td rowspan="2">Cell[2,2]</td>
Cell[1,1]
<td>Cell[2,3]</td></tr> Cell[2,1]
</table>
Cell[1,2] Cell[3,2]
Cell[2,2]
Cell[1,3] Cell[2,3]

27

Row and Columns
Spans
Live Demo

HTML 5 Forms
Entering User Data from a Web Page

What are HTML 5 Forms?
 The primary method for gathering data from

site visitors
 HTML 5 Forms can contain

 Text fields for the user to type
 Buttons for interactions like "Register", "Login",
"Search"
 Menus, Sliders, etc…
 Check Google, Yahoo, Facebook

 Google search field is a simple Text field
30

How to Create Forms?

 Create a form block with

<form></form> The "method" attribute tells
how the form data should be
 Example: sent – via GET or POST request

<form name="myForm" method="post" action="path/
to/some-script.php">
...
</form>
The "action" attribute tells
where the form data should be
sent
31

Text Fields
 Single-line text input fields:
<input type="text" name="FirstName" value="This
is a text field" />
 Multi-line text input fields (textarea):
<textarea name="Comments">This is a multi-line
text field</textarea>

 Password input – a text field which masks the
entered text with * signs
<input type="password" name="pass" />

32

Buttons
 Reset button – brings the form to its initial state
<input type="reset" name="resetBtn"
value="Reset the form" />
 Submit button:
<input type="submit" value="Apply Now" />
 Image button – acts like submit but image is
displayed and click coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />
 Ordinary button – no default action, used with JS
<input type="button" value="click me" />
33

Checkboxes and Radio Buttons
 Checkboxes:

<input type="checkbox" name="fruit"
value="apple" />
 Radio buttons:

<input type="radio" name="title" value="Mr." />
 Radio buttons can be grouped, allowing only one
to be selected from a group:

<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />

34

Select Fields
 Dropdown menus:

<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
 Multiple-choice menus

<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
</select>
35

Hidden Fields

 Hidden fields contain invisible data
<input type="hidden" name="Account" value="This
is a hidden text field" />
 Not shown to the user
 Used by JavaScript and server-side code
 ViewState, SessionState, etc..

36

Labels
 Labels are used to associate an explanatory text
to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

 Clicking on a label focuses its associated field
(checkboxes are toggled, radio buttons are
checked)
 Labels are both a usability and accessibility
feature and are required in order to pass
accessibility validation.
37

Fieldsets
 Fieldsets are used to enclose a group of related
form fields:
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
 The <legend> is the fieldset's title.
</form>
38

HTML 5 Forms
Inputs Fields
Live Demo

Sliders and Spinboxes
Lets make it spin

Range and Spinbox
 Restricts users to enter only numbers

 Additional attributes min, max and step and
value
 Can become Spinbox or Slider, depending on
the input type
<input type="range" min="0" max="100" />
<input type="number" min="0" max="100" />
 Have some differences on different browsers
 Sliders and Spinboxes do not work on Firefox
 Shown as regular textboxes
41

Sliders and Spinboxes
Live Demo

Attributes from HTML 5
 Autocomplete
 The browser stores the previously typed values
 Brings them back on a later visit on the same
page
 Autofocus
 The field becomes on focus on page load
 Required
 The field is required to be filled/selected

43

Input Fields with Validation
 Email – provides a simple validation for email

 Can be passed a pattern for validation
 On a mobile device brings the email keyboard
<input type="email" required="true"
pattern="[^ @]*@[^ @].[^ @]"/>
 URL – has validation for url

 On a mobile device brings the url keyboard
<input type="url" required="true" />
 Telephone

 Brings the numbers keyboard
<input type="tel" required="true" />
44

HTML Forms Validation
Live Demo

45

TabIndex
 The tabindex HTML attribute controls the

order in which form fields and hyperlinks are
focused when repeatedly pressing the TAB key
 tabindex="0" (zero) - "natural" order
 If X < Y, then elements with tabindex="X" are
iterated before elements with tabindex="Y"
 Elements with negative tabindex are skipped,
however, this is not defined in the standard

<input type="text" tabindex="10" />

46

HTML Frames
<frameset>, <frame> and <iframe>

HTML Frames
 Frames provide a way to show multiple HTML

documents in a single Web page
 The page can be split into separate views

(frames) horizontally and vertically
 Frames were popular in the early ages of HTML

development, but now their usage is rejected
 Frames are not supported by all user agents

(browsers, search engines, etc.)
 A <noframes> element is used to provide
content for non-compatible agents. 49

HTML Frames – Demo
frames.html
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>

 Note the target attribute applied to the
<a> elements in the left frame.
50

Inline Frames: <iframe>
 Inline frames provide a way to show one

website inside another website:

iframe-demo.html
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>

51

HTML 5 Tables and Forms

http://html5course.telerik.com

Homework
1. Create Web Pages like the following using
tables:

1. Create a Web Page
like the following
using forms:

53

Homework (2)
1. Create a Web form
that looks like this
sample:

54

Homework (3)
1. Create a Calculator-like table.
You should use a HTML 5
form for the Calculator
 Buttons for all the numbers
and operators (+, -, etc.)
 Textbox for the result
 Do not make the same styles
as the example.

55

Homework (4)
1. Create the following using tables and forms:

56

Homework (5)
1. Construct the following Grid component:

 Try to make a HTML page, that looks just like the
example
 Not required to style for the homework
57

Homework (7)
1. Create the following HTML 5 Page
 Hint: Use Fieldsets and Nested tables

58

HTML 5 Tables and Forms

In this document