Svetlin Nakov Telerik Corporation
1. HTML Tables Nested Tables Nested Tables Cells Width Cells Width Cell Spacing and Padding Cell Spacing and Padding Column and Row Span Column and Row Span 2
2. HTML Forms Form Fields and Fieldsets Form Fields and Fieldsets Form Controls and Labels Form Controls and Labels Text field Text field Text area Text area Select Select Radio button Radio button Checkbox Checkbox Button Button Image button Image button 3
Tables represent tabular data Tables represent tabular data A table consists of one or several rows A table consists of one or several rows Each row has one or more columns Each row has one or more columns Tables comprised of several core tags: : begin / end the table : create a table row : create tabular data (cell) Tables comprised of several core tags: : begin / end the table : create a table row : create tabular data (cell) Tables should not be used for layout. Use CSS floats and positioning styles instead Tables should not be used for layout. Use CSS floats and positioning styles instead 5
Start and end of a table Start and end of a table Start and end of a row Start and end of a row Start and end of a cell in a row Start and end of a cell in a row
7 Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table>
Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table> 8
Live Demo
Table rows split into three semantic sections: header, body and footer Table rows split into three semantic sections: header, body and footer denotes table header and contains elements, instead of elements denotes table header and contains elements, instead of elements denotes collection of table rows that contain the very data denotes collection of table rows that contain the very data denotes table footer but comes BEFORE the tag denotes table footer but comes BEFORE the tag and define columns (most often used to set column widths) and define columns (most often used to set column widths) 10
11 <table><colgroup> </colgroup><thead> Column 1 Column 2 Column 1 Column 2 </thead><tfoot> Footer 1 Footer 2 Footer 1 Footer 2 </tfoot><tbody> Cell 1.1 Cell 1.2 Cell 1.1 Cell 1.2 Cell 2.1 Cell 2.2 Cell 2.1 Cell 2.2 </tbody></table> header footer Last comes the body (data) th columns
<table><colgroup> </colgroup><thead> Column 1 Column 2 Column 1 Column 2 </thead><tfoot> Footer 1 Footer 2 Footer 1 Footer 2 </tfoot><tbody> Cell 1.1 Cell 1.2 Cell 1.1 Cell 1.2 Cell 2.1 Cell 2.2 Cell 2.1 Cell 2.2 </tbody></table> 12 table-full.html Although the footer is before the data in the code, it is displayed last By default, header text is bold and centered.
Table data cells ( ) can contain nested tables (tables within tables): Table data cells ( ) can contain nested tables (tables within tables): 13 <table> Contact: Contact: First Name First Name Last Name Last Name </table> nested-tables.html
Live Demo
cellpadding cellpadding Defines the empty space around the cell content Defines the empty space around the cell content cellspacing cellspacing Defines the empty space between cells Defines the empty space between cells Tables have two important attributes: Tables have two important attributes: 15 cellcell cellcell cell cell cell cell
16 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
17 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
Live Demo
rowspan rowspan Defines how many rows the cell occupies Defines how many rows the cell occupies colspan colspan Defines how many columns the cell occupies Defines how many columns the cell occupies Table cells have two important attributes: Table cells have two important attributes: 19 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"
20 Cell[1,1] Cell[1,1] Cell[2,1] Cell[2,1] Cell[1,2] Cell[1,2] Cell[2,2] Cell[2,2] Cell[3,2] Cell[3,2] Cell[1,3] Cell[1,3] Cell[2,3] Cell[2,3] </table> table-colspan-rowspan.html
Cell[1,1] Cell[1,1] Cell[2,1] Cell[2,1] Cell[1,2] Cell[1,2] Cell[2,2] Cell[2,2] Cell[3,2] Cell[3,2] Cell[1,3] Cell[1,3] Cell[2,3] Cell[2,3] </table> 21 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]
Entering User Data from a Web Page
Forms are the primary method for gathering data from site visitors Forms are the primary method for gathering data from site visitors Create a form block with Create a form block with Example: Example: 23 <form></form>......</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
Single-line text input fields: Single-line text input fields: Multi-line textarea fields: Multi-line textarea fields: Hidden fields contain data not shown to the user: Hidden fields contain data not shown to the user: Often used by JavaScript code Often used by JavaScript code 24 This is a multi-line text field This is a multi-line text field
Fieldsets are used to enclose a group of related form fields: Fieldsets are used to enclose a group of related form fields: The is the fieldset's title. The is the fieldset's title. 25 Client Details Client Details Order Details Order Details </form>
Checkboxes: Checkboxes: Radio buttons: Radio buttons: Radio buttons can be grouped, allowing only one to be selected from a group: Radio buttons can be grouped, allowing only one to be selected from a group: 26
Dropdown menus: Dropdown menus: Submit button: Submit button: 27 <option value="Value 1" <option value="Value 1" selected="selected">Male selected="selected">Male Female Female Other Other </select>
Reset button – brings the form to its initial state Reset button – brings the form to its initial state Image button – acts like submit but image is displayed and click coordinates are sent Image button – acts like submit but image is displayed and click coordinates are sent Ordinary button – used for Javascript, no default action Ordinary button – used for Javascript, no default action 28
Password input – a text field which masks the entered text with * signs Password input – a text field which masks the entered text with * signs Multiple select field – displays the list of items in multiple lines, instead of one Multiple select field – displays the list of items in multiple lines, instead of one 29 <option value="Value 1" <option value="Value 1" selected="selected">keyboard selected="selected">keyboard mouse mouse speakers speakers </select>
File input – a field used for uploading files File input – a field used for uploading files When used, it requires the form element to have a specific attribute: When used, it requires the form element to have a specific attribute: </form>
Form labels are used to associate an explanatory text to a form field using the field's ID. Form 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) 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. Labels are both a usability and accessibility feature and are required in order to pass accessibility validation. 31 First Name First Name
32 Academic information Academic information Degree Degree Bachelor of Art Bachelor of Art Bachelor of Science Bachelor of Science Master of Master of Business Administration Business Administration Student ID Student ID Personal Details Personal Details First Name First Name Last Name Last Name form.html
33 Gender: Gender: Male Male Female Female <textarea name="terms" cols="30" rows="4" <textarea name="terms" cols="30" rows="4" readonly="readonly">TERMS AND CONDITIONS... readonly="readonly">TERMS AND CONDITIONS... </form> form.html (continued)
34
The tabindex HTML attribute controls the order in which form fields and hyperlinks are focused when repeatedly pressing the TAB key 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 tabindex="0" (zero) - "natural" order If X > Y, then elements with tabindex="X" are iterated before elements with tabindex="Y" 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 Elements with negative tabindex are skipped, however, this is not defined in the standard 35
, and, and
Frames provide a way to show multiple HTML documents in a single Web page 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 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 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.) Frames are not supported by all user agents (browsers, search engines, etc.) A element is used to provide content for non-compatible agents. A element is used to provide content for non-compatible agents. 37
38 <html> Frames Example Frames Example </html> frames.html Note the target attribute applied to the elements in the left frame. Note the target attribute applied to the elements in the left frame.
Inline frames provide a way to show one website inside another website: Inline frames provide a way to show one website inside another website: 39 iframe-demo.html
Questions?
41 6. Create Web Pages like the following using tables: 7. Create a Web Page like the following using forms:
8. Create a Web form that looks like this sample: 42 See the image Sample-form.png