Embed Size (px)
DESCRIPTION
Citation preview
HTML – Tables and HTML – Tables and FormsForms
Doncho MinkovDoncho Minkov
Telerik Mobile Development CourseTelerik Mobile Development Coursemobiledevcourse.telerik.com
Technical TrainerTechnical Trainerhttp://www.minkov.it
Contents Contents
1.1. HTML TablesHTML Tables Nested TablesNested Tables
Cells WidthCells Width
Cell Spacing and PaddingCell Spacing and Padding
Column and Row SpanColumn and Row Span
2
Contents (2)Contents (2)
2.2. HTML FormsHTML Forms Form Fields and FieldsetsForm Fields and Fieldsets Form Controls and LabelsForm Controls and Labels
Text fieldText field Text areaText area SelectSelect Radio buttonRadio button CheckboxCheckbox ButtonButton Image buttonImage button
3
HTML TablesHTML Tables
HTML TablesHTML Tables Tables represent tabular dataTables represent tabular data
A table consists of one or several rowsA table consists of one or several rows
Each row has one or more columnsEach row has one or more columns
Tables comprised of several core Tables comprised of several core tags: tags: <table></table><table></table>: begin / end the : begin / end the tabletable<tr></tr><tr></tr>: : create a table rowcreate a table row<td></td><td></td>: create tabular data (cell): create tabular data (cell)
Tables should not be used for layout. Tables should not be used for layout. Use CSS floats and positioning styles Use CSS floats and positioning styles insteadinstead 5
Simple HTML Tables – Simple HTML Tables – ExampleExample
6
<table cellspacing="0" cellpadding="5"><table cellspacing="0" cellpadding="5"> <tr><tr> <td><img src="ppt.gif"></td><td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture <td><a href="lecture1.ppt">Lecture 1</a></td>1</a></td> </tr></tr> <tr><tr> <td><img src="ppt.gif"></td><td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture <td><a href="lecture2.ppt">Lecture 2</a></td>2</a></td> </tr></tr> <tr><tr> <td><img src="zip.gif"></td><td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"><td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td>Lecture 2 - Demos</a></td> </tr></tr></table></table>
Simple HTML TablesSimple HTML TablesLive DemoLive Demo
Complete HTML TablesComplete HTML Tables Table rows split into three semantic Table rows split into three semantic
sections: header, body and footersections: header, body and footer <thead><thead> denotes table header and denotes table header and
contains contains <th><th> elements, instead of elements, instead of <td><td> elements elements
<tbody><tbody> denotes collection of table denotes collection of table rows that contain the very datarows that contain the very data
<tfoot><tfoot> denotes table footer but denotes table footer but comes BEFORE the comes BEFORE the <tbody><tbody> tag tag
<colgroup><colgroup> and and <col><col> define columns define columns (used to set column widths)(used to set column widths)
8
Complete HTML Table: Complete HTML Table: ExampleExample
9
<table><table><colgroup><colgroup> <col style="width:100px" /><col /><col style="width:100px" /><col /></colgroup></colgroup><thead><thead> <tr><th>Column 1</th><th>Column 2</th></tr><tr><th>Column 1</th><th>Column 2</th></tr></thead></thead><tfoot><tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr><tr><td>Footer 1</td><td>Footer 2</td></tr></tfoot></tfoot><tbody><tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr><tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr><tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody></tbody></table></table>
headerheader
footerfooter
Last comes the Last comes the body (data)body (data)
thth
columnscolumns
<table><table><colgroup><colgroup> <col style="width:200px" /><col /><col style="width:200px" /><col /></colgroup></colgroup><thead><thead> <tr><th>Column 1</th><th>Column 2</th></tr><tr><th>Column 1</th><th>Column 2</th></tr></thead></thead><tfoot><tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr><tr><td>Footer 1</td><td>Footer 2</td></tr></tfoot></tfoot><tbody><tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr><tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr><tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody></tbody></table></table>
Complete HTML Table:Complete HTML Table:Example (2)Example (2)
10
table-full.htmltable-full.html
Although the Although the footer is before footer is before the data in the the data in the
code, it is code, it is displayed lastdisplayed last
By default, By default, header text is header text is
bold and bold and centered.centered.
Nested TablesNested Tables Table data “cells” (Table data “cells” (<td><td>) can contain ) can contain
nested tables (tables within tables):nested tables (tables within tables):
11
<table><table> <tr><tr> <td>Contact:</td><td>Contact:</td> <td><td> <table><table> <tr><tr> <td>First Name</td><td>First Name</td> <td>Last Name</td><td>Last Name</td> </tr></tr> </table></table> </td></td> </tr></tr></table></table>
nested-nested-
tables.htmltables.html
Nested TablesNested TablesLive DemoLive Demo
cellpaddingcellpadding
Defines the Defines the empty space empty space around the cell around the cell contentcontent
cellspacingcellspacing
Defines the Defines the empty space empty space between between cellscells
Cell Spacing and Cell Spacing and PaddingPadding
Tables have two attributes related to spaceTables have two attributes related to space
13
cellcell cellcell
cellcell cellcell
cellcell
cellcell
cellcell
cellcell
Cell Spacing and Padding Cell Spacing and Padding – Example– Example
14
<html><html> <head><title>Table Cells</title></head><head><title>Table Cells</title></head> <body><body> <table <table cellspacing="15" cellpadding="0"cellspacing="15" cellpadding="0">> <tr><td>First</td><tr><td>First</td> <td>Second</td></tr><td>Second</td></tr> </table></table> <br/><br/> <table cellspacing="0" cellpadding="10"><table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr><tr><td>First</td><td>Second</td></tr> </table></table> </body></body></html></html>
table-table-
cellscells.html.html
Cell Spacing and Padding Cell Spacing and Padding – Example (2)– Example (2)
15
<html><html> <head><title>Table Cells</title></head><head><title>Table Cells</title></head> <body><body> <table <table cellspacing="15" cellpadding="0"cellspacing="15" cellpadding="0">> <tr><td>First</td><tr><td>First</td> <td>Second</td></tr><td>Second</td></tr> </table></table> <br/><br/> <table cellspacing="0" cellpadding="10"><table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr><tr><td>First</td><td>Second</td></tr> </table></table> </body></body></html></html>
table-table-
cellscells.html.html
Table Cell Table Cell Spacing and Spacing and Cell PaddingCell Padding
Live DemoLive Demo
rowspanrowspan
Defines how Defines how many rows many rows the cell the cell occupiesoccupies
colspancolspan
Defines how Defines how many many columns the columns the cell occupiescell occupies
Column and Row SpanColumn and Row Span Cells have two attributes related to mergingCells have two attributes related to merging
17
cell[1,cell[1,1]1]
cell[1,cell[1,2]2]
cell[2,1]cell[2,1]
colspancolspan="1"="1"
colspancolspan="1"="1"
colspancolspan="2"="2"
cell[1,1]cell[1,1]
cell[1cell[1,2],2]
cell[2cell[2,1],1]
rowspanrowspan="2"="2"
rowspanrowspan="1"="1"
rowspanrowspan="1"="1"
Column and Row Span – Column and Row Span – ExampleExample
18
<table cellspacing="0"><table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td><tr class="1"><td>Cell[1,1]</td> <td <td colspan="2"colspan="2">Cell[2,1]</td></tr>>Cell[2,1]</td></tr> <tr class=“2"><td>Cell[1,2]</td><tr class=“2"><td>Cell[1,2]</td> <td <td rowspan="2"rowspan="2">Cell[2,2]</td>>Cell[2,2]</td> <td>Cell[3,2]</td></tr><td>Cell[3,2]</td></tr> <tr class=“3"><td>Cell[1,3]</td><tr class=“3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr><td>Cell[2,3]</td></tr></table></table>
table-colspan-rowspan.htmltable-colspan-rowspan.html
<table cellspacing="0"><table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td><tr class="1"><td>Cell[1,1]</td> <td <td colspan="2"colspan="2">Cell[2,1]</td></tr>>Cell[2,1]</td></tr> <tr class=“2"><td>Cell[1,2]</td><tr class=“2"><td>Cell[1,2]</td> <td <td rowspan="2"rowspan="2">Cell[2,2]</td>>Cell[2,2]</td> <td>Cell[3,2]</td></tr><td>Cell[3,2]</td></tr> <tr class=“3"><td>Cell[1,3]</td><tr class=“3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr><td>Cell[2,3]</td></tr></table></table>
Column and Row Span –Column and Row Span –Example (2)Example (2)
19
table-colspan-rowspan.htmltable-colspan-rowspan.html
Cell[2,3]
Cell[1,3]
Cell[3,2]Cell[2,2
]
Cell[1,2]
Cell[2,1]Cell[1,1
]
HTML FormsHTML FormsEntering User Data from a Entering User Data from a
Web PageWeb Page
HTML FormsHTML Forms Forms are the primary method for Forms are the primary method for
gathering data from site visitorsgathering data from site visitors
Create a form block withCreate a form block with
Example:Example:
21
<form></form><form></form>
<form name="myForm" method="post" <form name="myForm" method="post" action="path/to/some-script.php">action="path/to/some-script.php"> ......</form></form>
The "action" attribute The "action" attribute tells where the form tells where the form data should be sentdata should be sent
The “method" attribute The “method" attribute tells how the form data tells how the form data
should be sent – via should be sent – via GET or POST requestGET or POST request
Form FieldsForm Fields Single-line text input fields:Single-line text input fields:
Multi-line textarea fields:Multi-line textarea fields:
Hidden fields contain data not shown Hidden fields contain data not shown to the user:to the user:
Used by JavaScript and server-side codeUsed by JavaScript and server-side code22
<input type="text" name="FirstName" <input type="text" name="FirstName" value="This is a text field" />value="This is a text field" />
<textarea name="Comments">This is a multi-<textarea name="Comments">This is a multi-line text field</textarea>line text field</textarea>
<input type="hidden" name="Account" <input type="hidden" name="Account" value="This is a hidden text field" />value="This is a hidden text field" />
FieldsetsFieldsets FieldsetsFieldsets are used to enclose a group are used to enclose a group
of related form fields:of related form fields:
The The <legend><legend> is the fieldset's title. is the fieldset's title.23
<form method="post" action="form.aspx"><form method="post" action="form.aspx"> <fieldset><fieldset> <legend>Client Details</legend><legend>Client Details</legend> <input type="text" id="Name" /><input type="text" id="Name" /> <input type="text" id="Phone" /><input type="text" id="Phone" /> </fieldset></fieldset> <fieldset><fieldset> <legend>Order Details</legend><legend>Order Details</legend> <input type="text" id="Quantity" /><input type="text" id="Quantity" /> <textarea cols="40" rows="10"<textarea cols="40" rows="10" id="Remarks"></textarea> id="Remarks"></textarea> </fieldset></fieldset></form></form>
Form Input ControlsForm Input Controls Checkboxes:Checkboxes:
Radio buttons:Radio buttons:
Radio buttons can be grouped, Radio buttons can be grouped, allowing only one to be selected from allowing only one to be selected from a group:a group:
24
<input type="checkbox" name="fruit" <input type="checkbox" name="fruit" value="apple" />value="apple" />
<input type="radio" name="title" <input type="radio" name="title" value="Mr." />value="Mr." />
<input type="radio" name="<input type="radio" name="citycity" value="Lom" " value="Lom" />/><input type="radio" name="<input type="radio" name="citycity" " value="Ruse" />value="Ruse" />
Other Form ControlsOther Form Controls Dropdown menus:Dropdown menus:
Submit button:Submit button:
25
<select name="gender"><select name="gender"> <option value="Value 1"<option value="Value 1" selected="selected">Male</option>selected="selected">Male</option> <option value="Value 2">Female</option><option value="Value 2">Female</option> <option value="Value 3">Other</option><option value="Value 3">Other</option></select></select>
<input type="submit" name="submitBtn" <input type="submit" name="submitBtn" value="Apply Now" />value="Apply Now" />
Other Form Controls (2)Other Form Controls (2) Reset button – brings the form to its Reset button – brings the form to its
initial stateinitial state
Image button – acts like submit but Image button – acts like submit but image is displayed and click image is displayed and click coordinates are sentcoordinates are sent
Ordinary button – used for Javascript, Ordinary button – used for Javascript, no default actionno default action
26
<input type="reset" name="resetBtn" <input type="reset" name="resetBtn" value="Reset the form" />value="Reset the form" />
<input type="image" src="submit.gif" <input type="image" src="submit.gif" name="submitBtn" alt="Submit" />name="submitBtn" alt="Submit" />
<input type="button" value="click me" /><input type="button" value="click me" />
Other Form Controls (3)Other Form Controls (3)
Password input – a text field which Password input – a text field which masks the entered text with * signsmasks the entered text with * signs
Multiple select field – displays the list Multiple select field – displays the list of items in multiple lines, instead of of items in multiple lines, instead of oneone
27
<input type="password" name="pass" /><input type="password" name="pass" />
<select name="products" <select name="products" multiple="multiple">multiple="multiple"> <option value="Value 1"<option value="Value 1" selected="selected">keyboard</option>selected="selected">keyboard</option> <option value="Value 2">mouse</option><option value="Value 2">mouse</option> <option value="Value <option value="Value 3">speakers</option>3">speakers</option></select></select>
Other Form Controls (4)Other Form Controls (4)
File input – a field used for uploading File input – a field used for uploading filesfiles
When used, it requires the form When used, it requires the form element to have a specific attribute:element to have a specific attribute:
28
<input type="file" name="photo" /><input type="file" name="photo" />
<form enctype="multipart/form-data"><form enctype="multipart/form-data">...... <input type="file" name="photo" /><input type="file" name="photo" />......</form></form>
LabelsLabels Form labels are used to associate an Form labels are used to associate an
explanatory text to a form field using explanatory text to a form field using the field's ID.the field's ID.
Clicking on a label focuses its associated Clicking on a label focuses its associated field (checkboxes are toggled, radio field (checkboxes are toggled, radio buttons are checked)buttons are checked)
Labels are both a usability and Labels are both a usability and accessibility feature and are required in accessibility feature and are required in order to pass accessibility validation.order to pass accessibility validation.
29
<label for="fn">First Name</label><label for="fn">First Name</label><input type="text" id="fn" /><input type="text" id="fn" />
HTML Forms – ExampleHTML Forms – Example
30
<form method="post" action="apply-now.php"><form method="post" action="apply-now.php"> <input name="subject" type="hidden" value="Class" /><input name="subject" type="hidden" value="Class" /> <fieldset><legend>Academic information</legend><fieldset><legend>Academic information</legend> <label for="degree">Degree</label><label for="degree">Degree</label> <select name="degree" id="degree"><select name="degree" id="degree"> <option value="BA">Bachelor of Art</option><option value="BA">Bachelor of Art</option> <option value="BS">Bachelor of Science</option><option value="BS">Bachelor of Science</option> <option value="MBA" selected="selected">Master of<option value="MBA" selected="selected">Master of Business Administration</option>Business Administration</option> </select></select> <br /><br /> <label for="studentid">Student ID</label><label for="studentid">Student ID</label> <input type="password" name="studentid" /><input type="password" name="studentid" /> </fieldset></fieldset> <fieldset><legend>Personal Details</legend><fieldset><legend>Personal Details</legend> <label for="fname">First Name</label><label for="fname">First Name</label> <input type="text" name="fname" id="fname" /><input type="text" name="fname" id="fname" /> <br /><br /> <label for="lname">Last Name</label><label for="lname">Last Name</label> <input type="text" name="lname" id="lname" /><input type="text" name="lname" id="lname" />
form.htmlform.html
HTML Forms – Example HTML Forms – Example (2)(2)
31
<br /><br /> Gender: Gender: <input name="gender" type="radio" id="gm" <input name="gender" type="radio" id="gm" value="m" />value="m" /> <label for="gm">Male</label><label for="gm">Male</label> <input name="gender" type="radio" id="gf" <input name="gender" type="radio" id="gf" value="f" />value="f" /> <label for="gf">Female</label><label for="gf">Female</label> <br /><br /> <label for="email">Email</label><label for="email">Email</label> <input type="text" name="email" id="email" /><input type="text" name="email" id="email" /> </fieldset></fieldset> <p><p> <textarea name="terms" cols="30" rows="4"<textarea name="terms" cols="30" rows="4" readonly="readonly">TERMS AND readonly="readonly">TERMS AND CONDITIONS...</textarea>CONDITIONS...</textarea> </p></p> <p><p> <input type="submit" name="submit" value="Send <input type="submit" name="submit" value="Send Form" />Form" /> <input type="reset" value="Clear Form" /><input type="reset" value="Clear Form" /> </p></p></form></form>
form.html (continued)form.html (continued)
form.html (continued)form.html (continued)
HTML Forms – Example HTML Forms – Example (3)(3)
32
TabIndexTabIndex The tabindex HTML attribute controls The tabindex HTML attribute controls
the order in which form fields and the order in which form fields and hyperlinks are focused when hyperlinks are focused when repeatedly pressing the TAB keyrepeatedly pressing the TAB key tabindex="0" (zero) - "natural" ordertabindex="0" (zero) - "natural" order
If X > Y, then elements with If X > Y, then elements with tabindex="X" are iterated before tabindex="X" are iterated before elements with tabindex="Y"elements with tabindex="Y"
Elements with negative tabindex are Elements with negative tabindex are skipped, however, this is not defined skipped, however, this is not defined in the standardin the standard
33
<input type="text" tabindex="10" /><input type="text" tabindex="10" />
HTML FramesHTML Frames<frameset><frameset>, , <frame><frame> and and <iframe><iframe>
HTML FramesHTML Frames FramesFrames provide a way to show multiple provide a way to show multiple
HTML documents in a single Web pageHTML documents in a single Web page The page can be split into separate views The page can be split into separate views
(frames) horizontally and vertically(frames) horizontally and vertically Frames were popular in the early ages of Frames were popular in the early ages of
HTML development, but now their usage HTML development, but now their usage is rejectedis rejected
Frames are not supported by all user Frames are not supported by all user agents (browsers, search engines, etc.)agents (browsers, search engines, etc.) A A <<noframesnoframes> > element is used to provide element is used to provide
content for non-compatible agents.content for non-compatible agents.
35
HTML Frames – DemoHTML Frames – Demo
36
<html><html>
<head><title>Frames Example</title></head><head><title>Frames Example</title></head>
<frameset cols="180px,*,150px"><frameset cols="180px,*,150px"> <frame src="left.html" /><frame src="left.html" /> <frame src="middle.html" /><frame src="middle.html" /> <frame src="right.html" /><frame src="right.html" /> </frameset></frameset>
</html></html>
frames.htframes.ht
mlml
Note the Note the targettarget attribute attribute applied to the applied to the <a><a> elements in elements in the left frame.the left frame.
Inline Frames: Inline Frames: <iframe><iframe> Inline framesInline frames provide a way to provide a way to
show one website inside another show one website inside another website:website:
37
<iframe name="iframeGoogle" width="600" <iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe>frameborder="yes" scrolling="yes"></iframe>
iframe-iframe-
demo.htmldemo.html
HTML – Tables and HTML – Tables and FormsForms
Questions?Questions?
http://academy.telerik.com
ExercisesExercises
39
1.1. Create Web Pages like the Create Web Pages like the following using tables:following using tables:
2.2. Create a Web Create a Web Page like the Page like the following using following using forms:forms:
Exercises (2)Exercises (2)
3.3. Create a Web Create a Web form that form that looks like this looks like this sample:sample:
40
See the image See the image Sample-form.pngSample-form.png
