0
HTML – Tables and FormsSvetlin NakovManager Technical Trainerhttp://www.nakov.com/Telerik Software Academyhttp://academy.t...
HTML – Tables and FormsSvetlin NakovManager Technical Trainerhttp://www.nakov.com/Telerik Academyhttp://academy.telerik.com
Contents1.   HTML Tables        Nested Tables        Cells Width        Cell Spacing and Padding        Column and Row...
Contents (2)2.   HTML Forms        Form Fields and Fieldsets        Form Controls and Labels            Text field     ...
HTML Tables
HTML Tables Tables represent tabular   data   A table consists of one or several rows   Each row has one or more column...
Simple HTML Tables – Example<table cellspacing="0" cellpadding="5">  <tr>    <td><img src="ppt.gif"></td>    <td><a href="...
Simple HTML Tables      Live Demo
Complete HTML Tables Table rows           split into three semantic sections: header, body and footer  <thead> denotes t...
Complete HTML Table: Example<table><colgroup>                     columns  <col style="width:100px" /><col /></colgroup>  ...
Complete HTML Table:         By default, header text                                 Example (2)<table> is bold and center...
Nested Tables   Table data “cells” (<td>) can contain nested    tables (tables within tables):    <table>                ...
Nested Tables   Live Demo
Cell Spacing and Padding Tables have two attributes    related to space  cellspacing            cellpadding      cell  ...
Cell Spacing and Padding –                                     Exampletable-cells.html<html>  <head><title>Table Cells</ti...
Cell Spacing and Padding –                                  Example (2)table-cells.html<html>  <head><title>Table Cells</t...
Table Cell Spacing and Cell Padding     Live Demo
Column and Row Span Cells have two attributes             related to merging    colspan                                ...
Column and Row Span – Exampletable-colspan-rowspan.html<table cellspacing="0">    <tr class="1"><td>Cell[1,1]</td>        ...
Column and Row Span –table-colspan-rowspan.html                                 Example (2)<table cellspacing="0">    <tr ...
HTML FormsEntering User Data from a Web Page
HTML Forms Forms are the primary    method for gathering data from site visitors Create a form block with   <form></form...
Form Fields   Single-line text input fields:     <input type="text" name="FirstName" value="This     is a text field" />...
Fieldsets   Fieldsets are used to enclose a group of related    form fields:     <form method="post" action="form.aspx"> ...
Form Input Controls   Checkboxes:     <input type="checkbox" name="fruit"     value="apple" />   Radio buttons:     <inp...
Other Form Controls Dropdown menus:  <select name="gender">    <option value="Value 1"      selected="selected">Male</opt...
Other Form Controls (2)   Reset button – brings the form to its initial state     <input type="reset" name="resetBtn"    ...
Other Form Controls (3)   Password input – a text field which masks the    entered text with * signs     <input type="pas...
Other Form Controls (4)   File input – a field used for uploading files     <input type="file" name="photo" />     When ...
Labels   Form labels are used to associate an explanatory    text to a form field using the fields ID.     <label for="fn...
HTML Forms – Exampleform.html<form method="post" action="apply-now.php">  <input name="subject" type="hidden" value="Class...
HTML Forms – Example (2)form.html (continued)   <br />     Gender:     <input name="gender" type="radio" id="gm" value="m"...
HTML Forms – Example (3)form.html (continued)                                          33
TabIndex The tabindex HTML attribute  controls the order in which form fields and hyperlinks are focused when repeatedly ...
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 separat...
HTML Frames – Demo                                           frames.html<html>    <head><title>Frames Example</title></hea...
Inline Frames: <iframe> Inline frames provide a way to show one website inside another website:                          ...
HTML – Tables and Forms    курсове и уроци по програмиране, уеб дизайн – безплатно     BG Coder - онлайн състезателна сист...
Exercises1.   Create Web Pages like the following using     tables:2.   Create a Web Page     like the following     using...
Exercises (2)3.   Create a Web form     that looks like this     sample:                            See the image Sample-f...
Free Trainings @ Telerik Academy Cross-Platform   Mobile Development    http://mobiledevcourse.telerik.com   Telerik Sof...
Upcoming SlideShare
Loading in...5
×

2. HTML – Tables and Forms

2,184

Published on

Cross-Platform Mobile Development @ Telerik Academy
Telerik Software Academy: http://mobiledevcourse.telerik.com
The website and all video materials are in Bulgarian
Content:
HTML Tables
Nested Tables
Cells Width
Cell Spacing and Padding
Column and Row Span
HTML Forms
Form Fields and Fieldsets

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,184
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
113
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "2. HTML – Tables and Forms"

  1. 1. HTML – Tables and FormsSvetlin NakovManager Technical Trainerhttp://www.nakov.com/Telerik Software Academyhttp://academy.telerik.com
  2. 2. HTML – Tables and FormsSvetlin NakovManager Technical Trainerhttp://www.nakov.com/Telerik Academyhttp://academy.telerik.com
  3. 3. Contents1. HTML Tables  Nested Tables  Cells Width  Cell Spacing and Padding  Column and Row Span 3
  4. 4. Contents (2)2. HTML Forms  Form Fields and Fieldsets  Form Controls and Labels  Text field  Text area  Select  Radio button  Checkbox  Button  Image button 4
  5. 5. HTML Tables
  6. 6. 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
  7. 7. 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
  8. 8. Simple HTML Tables Live Demo
  9. 9. 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) 9
  10. 10. Complete HTML Table: Example<table><colgroup> columns <col style="width:100px" /><col /></colgroup> th<thead> header <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> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody></table> 10
  11. 11. Complete HTML Table: By default, header text Example (2)<table> is bold and centered. 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> <tr><td>CellAlthough the footer is 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell before the data in 2.2</td></tr> 2.1</td><td>Cell the</tbody> code, it is displayed last</table> 11
  12. 12. Nested Tables Table data “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> 12
  13. 13. Nested Tables Live Demo
  14. 14. 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 14
  15. 15. Cell Spacing and Padding – Exampletable-cells.html<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> 15
  16. 16. Cell Spacing and Padding – Example (2)table-cells.html<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> 16
  17. 17. Table Cell Spacing and Cell Padding Live Demo
  18. 18. 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 18
  19. 19. Column and Row Span – Exampletable-colspan-rowspan.html<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> 19
  20. 20. Column and Row Span –table-colspan-rowspan.html Example (2)<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> Cell[1,1] Cell[2,1]</table> Cell[1,2] Cell[3,2] Cell[2,2] Cell[1,3] Cell[2,3] 20
  21. 21. HTML FormsEntering User Data from a Web Page
  22. 22. HTML Forms Forms are the primary method for gathering data from site visitors Create a form block with <form></form> The “method" attribute tells how the form data should be sent – Example: 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 22
  23. 23. Form Fields Single-line text input fields: <input type="text" name="FirstName" value="This is a text field" /> Multi-line textarea fields: <textarea name="Comments">This is a multi-line text field</textarea> Hidden fields contain data not shown to the user: <input type="hidden" name="Account" value="This is a hidden text field" />  Used by JavaScript and server-side code 23
  24. 24. 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 fieldsets title. 24
  25. 25. Form Input Controls 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" /> 25
  26. 26. Other Form Controls 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> Submit button: <input type="submit" name="submitBtn" value="Apply Now" /> 26
  27. 27. Other Form Controls (2) Reset button – brings the form to its initial state <input type="reset" name="resetBtn" value="Reset the form" /> 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 – used for Javascript, no default action <input type="button" value="click me" /> 27
  28. 28. Other Form Controls (3) Password input – a text field which masks the entered text with * signs <input type="password" name="pass" /> Multiple select field – displays the list of items in multiple lines, instead of one <select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option> <option value="Value 3">speakers</option> </select> 28
  29. 29. Other Form Controls (4) File input – a field used for uploading files <input type="file" name="photo" />  When used, it requires the form element to have a specific attribute: <form enctype="multipart/form-data"> ... <input type="file" name="photo" /> ... </form> 29
  30. 30. Labels Form labels are used to associate an explanatory text to a form field using the fields 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. 30
  31. 31. HTML Forms – Exampleform.html<form method="post" action="apply-now.php"> <input name="subject" type="hidden" value="Class" /> <fieldset><legend>Academic information</legend> <label for="degree">Degree</label> <select name="degree" id="degree"> <option value="BA">Bachelor of Art</option> <option value="BS">Bachelor of Science</option> <option value="MBA" selected="selected">Master of Business Administration</option> </select> <br /> <label for="studentid">Student ID</label> <input type="password" name="studentid" /> </fieldset> <fieldset><legend>Personal Details</legend> <label for="fname">First Name</label> <input type="text" name="fname" id="fname" /> <br /> <label for="lname">Last Name</label> <input type="text" name="lname" id="lname" /> 31
  32. 32. HTML Forms – Example (2)form.html (continued) <br /> Gender: <input name="gender" type="radio" id="gm" value="m" /> <label for="gm">Male</label> <input name="gender" type="radio" id="gf" value="f" /> <label for="gf">Female</label> <br /> <label for="email">Email</label> <input type="text" name="email" id="email" /> </fieldset> <p> <textarea name="terms" cols="30" rows="4" readonly="readonly">TERMS AND CONDITIONS...</textarea> </p> <p> <input type="submit" name="submit" value="Send Form" /> <input type="reset" value="Clear Form" /> </p></form> 32
  33. 33. HTML Forms – Example (3)form.html (continued) 33
  34. 34. 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" /> 34
  35. 35. HTML Frames<frameset>, <frame> and <iframe>
  36. 36. 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. 36
  37. 37. 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. 37
  38. 38. 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> 38
  39. 39. HTML – Tables and Forms курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://mobiledevcourse.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  40. 40. Exercises1. Create Web Pages like the following using tables:2. Create a Web Page like the following using forms: 40
  41. 41. Exercises (2)3. Create a Web form that looks like this sample: See the image Sample-form.png 41
  42. 42. Free Trainings @ Telerik Academy Cross-Platform Mobile Development http://mobiledevcourse.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×