Html 5-tables-forms-frames (1)

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

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

10

Complete
HTML 5 Tables
With Header, Footer
and Body

11

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>
columns
<colgroup>
<col style="width:100px" /><col />
</colgroup>
th
header
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
footer
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
Last comes the body (data)
<tbody>
<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 last
</table>
14

Complete HTML 5 Tables
Live Demo

15

Nested Tables
Tables in Tables in Tables in Tables…

16

Nested Tables


Table "cells" (<td>) can contain nested tables
(tables within tables):
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>

nested-tables.html

17

Complex Tables
With Padding, Spacing and Stuff

Cell Spacing and Padding
 Tables have two attributes
 cellspacing

related to space

 cellpadding

cell

cell

cell

cell


cell
cell

cell

cell

Defines the
empty space
between cells



Defines the empty
space around the cell
content
20

table-cells.html

Cell Spacing and Padding –
Example

<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

table-cells.html

Cell Spacing and Padding –
Example (2)

<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


colspan

colspan="1"

cell[1,1]

related to merging


colspan="1"

rowspan

rowspan="2"

rowspan="1"
cell[1,2]

cell[1,2]
cell[1,1]

cell[2,1]

cell[2,1]

rowspan="1"

colspan="2"


Defines how
many columns
the cell occupies



Defines how
many rows the
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 –
Example (2)
table-colspan-rowspan.html
<table cellspacing="0">
<td colspan="2">Cell[2,1]</td></tr>
<td rowspan="2">Cell[2,2]</td>
Cell[1,1]
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

28

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>

 Example:

The "method" attribute tells how
the form data should be 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>
</form>



The <legend> is the fieldset's title.
38

HTML 5 Forms
Inputs Fields
Live Demo

39

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

42

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 – Tables and Forms

Questions?

http://academy.telerik.com

Homework
1.

Create Web Pages like the following using
tables:

2.

Create a Web Page
like the following
using forms:
53

Homework (2)
3.

Create a Web form
that looks like this
sample:

54

Homework (3)
4.

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)
5.

Create the following using tables and forms:

56

Homework (5)
6.

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)
7.

Create the following HTML 5 Page
 Hint: Use Fieldsets and Nested tables

58

Html 5-tables-forms-frames (1)

Related slideshows

More Related Content

Html 5-tables-forms-frames (1)