HTML – Tables and FormsSvetlin NakovManager Technical Trainingwww.nakov.comTelerik Software Academyacademy.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...
HTML Tables (2) Start and end of a table   <table> ... </table> Start and end of a row   <tr> ... </tr> Start and end o...
Simple HTML Tables – Example<table cellspacing="0" cellpadding="5">  <tr>    <td><img src="ppt.gif"></td>    <td><a href="...
Simple HTML Tables – Example (2)<table cellspacing="0" cellpadding="5">  <tr>    <td><img src="ppt.gif"></td>    <td><a hr...
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 important attributes:  cellspacing            cellpadding      cell     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 Table cells have two important attributes:    colspan                                 rowspan  cols...
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)                                          34
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 - онлайн състезателна сист...
Homework6.   Create Web Pages like the following using     tables:7.   Create a Web Page     like the following     using ...
Homework (2)8.   Create a Web form     that looks like this     sample:                            See the image Sample-fo...
Free Trainings @ Telerik Academy Web Applicationswith    ASP.NET MVC Course       mvccourse.telerik.com   Telerik Softw...
Upcoming SlideShare
Loading in …5
×

9. HTML-Tables-Forms - ASP.NET MVC

4,130 views
3,909 views

Published on

Web Applications with ASP.NET MVC @ Telerik Academy
http://mvccourse.telerik.com
The website and all video materials language is Bulgarian

This lecture discusses the following topics:
HTML Tables
Nested Tables
Cells Width
Cell Spacing and Padding
Column and Row Span
HTML Forms
Form Fields and Fieldsets
Form Controls and Labels
Text field
Text area
Select
Radio button
Checkbox
Button
Image button

Published in: Education, Technology
1 Comment
0 Likes
Statistics
Notes
  • good...!
    visit: http://www.vervelogic.com for designing website...!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
4,130
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
51
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

9. HTML-Tables-Forms - ASP.NET MVC

  1. 1. HTML – Tables and FormsSvetlin NakovManager Technical Trainingwww.nakov.comTelerik Software Academyacademy.telerik.com
  2. 2. Contents1. HTML Tables  Nested Tables  Cells Width  Cell Spacing and Padding  Column and Row Span 2
  3. 3. Contents (2)2. HTML Forms  Form Fields and Fieldsets  Form Controls and Labels  Text field  Text area  Select  Radio button  Checkbox  Button  Image button 3
  4. 4. HTML Tables
  5. 5. 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 5
  6. 6. HTML Tables (2) Start and end of a table <table> ... </table> Start and end of a row <tr> ... </tr> Start and end of a cell in a row <td> ... </td> 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 – Example (2)<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> 8
  9. 9. Simple HTML Tables Live Demo
  10. 10. 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 (most often used to set column widths) 10
  11. 11. 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> 11
  12. 12. 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> 12
  13. 13. 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> 13
  14. 14. Nested Tables Live Demo
  15. 15. Cell Spacing and Padding Tables have two important attributes:  cellspacing  cellpadding cell cell cell cell cell cell cell cell  Defines the  Defines the empty empty space space around the cell between cells content 15
  16. 16. 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> 16
  17. 17. 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> 17
  18. 18. Table Cell Spacing and Cell Padding Live Demo
  19. 19. Column and Row Span Table cells have two important attributes:  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 19
  20. 20. 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> 20
  21. 21. 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] 21
  22. 22. HTML FormsEntering User Data from a Web Page
  23. 23. 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 23
  24. 24. 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" />  Often used by JavaScript code 24
  25. 25. 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. 25
  26. 26. 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" /> 26
  27. 27. 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" /> 27
  28. 28. 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" /> 28
  29. 29. 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> 29
  30. 30. 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> 30
  31. 31. 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. 31
  32. 32. 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" /> 32
  33. 33. 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> 33
  34. 34. HTML Forms – Example (3)form.html (continued) 34
  35. 35. 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" /> 35
  36. 36. HTML Frames<frameset>, <frame> and <iframe>
  37. 37. 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. 37
  38. 38. 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. 38
  39. 39. 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> 39
  40. 40. HTML – Tables and Forms курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.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# курс, програмиране, безплатно
  41. 41. Homework6. Create Web Pages like the following using tables:7. Create a Web Page like the following using forms: 41
  42. 42. Homework (2)8. Create a Web form that looks like this sample: See the image Sample-form.png 42
  43. 43. Free Trainings @ Telerik Academy Web Applicationswith ASP.NET MVC Course  mvccourse.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com

×