html 5-tables-forms-frames (1)
DESCRIPTION
TRANSCRIPT
![Page 1: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/1.jpg)
HTML 5 – Tables, Forms and Frames
Doncho Minkov
Telerik Web Design Course html5course.telerik.com
Technical Trainerhttp://minkov.it
![Page 2: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/2.jpg)
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 Span2
![Page 3: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/3.jpg)
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
![Page 4: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/4.jpg)
Contents (3)
HTML Frames Frame and Noframe tags IFrames
4
![Page 5: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/5.jpg)
HTML Tables
![Page 6: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/6.jpg)
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
![Page 7: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/7.jpg)
Simple HTML Tables – Example
7
<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>
![Page 8: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/8.jpg)
Simple HTML TablesLive Demo
![Page 9: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/9.jpg)
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>
![Page 10: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/10.jpg)
Data and Header Cells
Live Demo
10
![Page 11: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/11.jpg)
Complete HTML 5 Tables
With Header, Footer and Body
11
![Page 12: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/12.jpg)
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
![Page 13: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/13.jpg)
Complete HTML Table: Example
13
<table><colgroup> <col style="width:100px" /><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> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody></table>
header
footer
Last comes the body (data)
th
columns
![Page 14: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/14.jpg)
<table><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> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody></table>
Complete HTML Table:Example (2)
14
table-full.html
Although the footer is before the data in the
code, it is displayed last
![Page 15: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/15.jpg)
Complete HTML 5 TablesLive Demo
15
![Page 16: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/16.jpg)
Nested TablesTables in Tables in Tables in Tables…
16
![Page 17: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/17.jpg)
Nested Tables Table "cells" (<td>) can contain
nested tables (tables within tables):
17
<table> <tr> <td>Contact:</td> <td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr></table>
nested-
tables.html
![Page 18: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/18.jpg)
Nested TablesLive Demo
![Page 19: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/19.jpg)
Complex TablesWith Padding, Spacing and Stuff
![Page 20: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/20.jpg)
cellpadding
Defines the empty space around the cell content
cellspacing
Defines the empty space between cells
Cell Spacing and Padding
Tables have two attributes related to space
20
cell cell
cell cell
cell
cell
cell
cell
![Page 21: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/21.jpg)
Cell Spacing and Padding – Example
21
<html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr> </table> </body></html>
table-
cells.html
![Page 22: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/22.jpg)
Cell Spacing and Padding – Example (2)
22
<html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr> </table> </body></html>
table-
cells.html
![Page 23: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/23.jpg)
Table Cell Spacing and Cell Padding
Live Demo
![Page 24: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/24.jpg)
Row and Column SpansHow to make a two-
cells column? Or row?
![Page 25: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/25.jpg)
rowspan
Defines how many rows the cell occupies
colspan
Defines how many columns the cell occupies
Column and Row Span Cells have two attributes related to merging
25
cell[1,1]
cell[1,2]
cell[2,1]
colspan="1"
colspan="1"
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
rowspan="2"
rowspan="1"
rowspan="1"
![Page 26: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/26.jpg)
Column and Row Span – Example
26
<table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr class="2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class="3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr></table>
table-colspan-rowspan.html
![Page 27: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/27.jpg)
<table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr class="2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class="3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr></table>
Column and Row Span –Example (2)
27
table-colspan-rowspan.html
Cell[2,3]
Cell[1,3]
Cell[3,2]Cell[2,2
]
Cell[1,2]
Cell[2,1]Cell[1,1
]
![Page 28: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/28.jpg)
Row and Columns SpansLive Demo
28
![Page 29: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/29.jpg)
HTML 5 FormsEntering User Data from a
Web Page
![Page 30: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/30.jpg)
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
![Page 31: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/31.jpg)
How to Create Forms?
Create a form block with
Example:
31
<form></form>
<form name="myForm" method="post" action="path/to/some-script.php"> ...</form>
The "action" attribute tells where the form data
should be sent
The "method" attribute tells how the form data should be sent – via GET
or POST request
![Page 32: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/32.jpg)
Text Fields Single-line text input fields:
Multi-line text input fields (textarea):
Password input – a text field which masks the entered text with * signs
32
<input type="text" name="FirstName" value="This is a text field" />
<textarea name="Comments">This is a multi-line text field</textarea>
<input type="password" name="pass" />
![Page 33: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/33.jpg)
Buttons Reset button – brings the form to its
initial state
Submit button:
Image button – acts like submit but image is displayed and click coordinates are sent
Ordinary button – no default action, used with JS
33
<input type="reset" name="resetBtn" value="Reset the form" />
<input type="image" src="submit.gif" name="submitBtn" alt="Submit" />
<input type="button" value="click me" />
<input type="submit" value="Apply Now" />
![Page 34: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/34.jpg)
Checkboxes and Radio Buttons
Checkboxes:
Radio buttons:
Radio buttons can be grouped, allowing only one to be selected from a group:
34
<input type="checkbox" name="fruit" value="apple" />
<input type="radio" name="title" value="Mr." />
<input type="radio" name="city" value="Lom" /><input type="radio" name="city" value="Ruse" />
![Page 35: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/35.jpg)
Select Fields Dropdown menus:
Multiple-choice menus
35
<select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option></select>
<select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option></select>
![Page 36: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/36.jpg)
Hidden Fields
Hidden fields contain invisible data
Not shown to the user Used by JavaScript and server-side
code ViewState, SessionState, etc..
36
<input type="hidden" name="Account" value="This is a hidden text field" />
![Page 37: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/37.jpg)
Labels
Labels are used to associate an explanatory text to a form field using the field's ID.
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
<label for="fn">First Name</label><input type="text" id="fn" />
![Page 38: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/38.jpg)
Fieldsets Fieldsets are used to enclose a group
of related form fields:
The <legend> is the fieldset's title.38
<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>
![Page 39: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/39.jpg)
HTML 5 FormsInputs Fields
Live Demo
39
![Page 40: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/40.jpg)
Sliders and SpinboxesLets make it spin
![Page 41: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/41.jpg)
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
Have some differences on different browsers
Sliders and Spinboxes do not work on Firefox Shown as regular textboxes
41
<input type="range" min="0" max="100" /><input type="number" min="0" max="100" />
![Page 42: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/42.jpg)
Sliders and Spinboxes
Live Demo
42
![Page 43: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/43.jpg)
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
![Page 44: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/44.jpg)
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
URL – has validation for url On a mobile device brings the url
keyboard
Telephone Brings the numbers keyboard
44
<input type="email" required="true" pattern="[^ @]*@[^ @].[^ @]"/>
<input type="url" required="true" />
<input type="tel" required="true" />
![Page 45: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/45.jpg)
HTML Forms Validation
Live Demo
45
![Page 46: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/46.jpg)
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
46
<input type="text" tabindex="10" />
![Page 47: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/47.jpg)
Tab IndexLive Demo
47
![Page 48: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/48.jpg)
HTML Frames<frameset>, <frame> and <iframe>
![Page 49: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/49.jpg)
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
![Page 50: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/50.jpg)
HTML Frames – Demo
50
<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>
frames.ht
ml
Note the target attribute applied to the <a> elements in the left frame.
![Page 51: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/51.jpg)
Inline Frames: <iframe> Inline frames provide a way to show one website inside another website:
51
<iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe>
iframe-
demo.html
![Page 52: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/52.jpg)
HTML – Tables and Forms
Questions? ??
? ? ???
?
?
http://academy.telerik.com
![Page 53: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/53.jpg)
Homework
53
1. Create Web Pages like the following using tables:
2. Create a Web Page like the following using forms:
![Page 54: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/54.jpg)
Homework (2)
3. Create a Web form that looks like this sample:
54
![Page 55: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/55.jpg)
Homework (3)
4. Create a Calculator-like table. You should use a HTML 5 form for the Calculator
Buttons for all the numbersand operators (+, -, etc.)
Textbox for the result
Do not make the same stylesas the example.
55
![Page 56: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/56.jpg)
Homework (4)
5. Create the following using tables and forms:
56
![Page 57: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/57.jpg)
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
![Page 58: Html 5-tables-forms-frames (1)](https://reader037.vdocument.in/reader037/viewer/2022102804/54626065b4af9f6c1c8b46f2/html5/thumbnails/58.jpg)
Homework (7)7. Create the following HTML 5 Page
Hint: Use Fieldsets and Nested tables
58