Html Tables and Forms PDF

HTML Tables and Forms Chapter 3 Randy Connolly and Ricardo Hoar Fundamentals of Web Development Textbook to be published by Pearson ©...

HTML Tables and Forms Chapter 3 Randy Connolly and Ricardo Hoar Fundamentals of Web Development Textbook to be published by Pearson © Ed2015 in early Pearson 2014 Randy Connolly and Ricardo Hoar Fundamentals of Web http://www.funwebdev.com  Objectives 1 Introducing Tables 2 Styling Tables 3 Introducing Forms 4 Form Control Elements 5 6 Table and Form Microformats Accessibility 7 Randy Connolly and Ricardo Hoar Fundamentals of Web  Section 1 of 6 INTRODUCING TABLES Randy Connolly and Ricardo Hoar Fundamentals of Web  HTML Tables A grid of cells A table in HTML is created using the element Tables can be used to display: Many types of content Calendars, financial data, lists, etc… Any type of data Images Text Links Other tables Randy Connolly and Ricardo Hoar Fundamentals of Web  HTML Tables Example usages Randy Connolly and Ricardo Hoar Fundamentals of Web  Tables Basics Rows and cells an HTML contains any number of rows () each row contains any number of table data cells () Content goes inside of tags The Death of Marat content Randy Connolly and Ricardo Hoar Fundamentals of Web  A basic Example Randy Connolly and Ricardo Hoar Fundamentals of Web  With Table Headings th Randy Connolly and Ricardo Hoar Fundamentals of Web  Why Table Headings A table heading Browsers tend to make the content within a element bold element for accessibility (it helps those using screen readers) Provides some semantic info about the row being a row of headers Randy Connolly and Ricardo Hoar Fundamentals of Web  Spanning Rows and Columns Span Span Span a Row Each row must have the same number of or containers. If you want a given cell to cover several columns or rows, use the colspan or rowspan attributes Randy Connolly and Ricardo Hoar Fundamentals of Web  Using Tables for Layout It works in many situations Popular in 1990s Results in table bloat Not semantic Larger HTML pages Browser quirks Randy Connolly and Ricardo Hoar Fundamentals of Web  Example Table layouts Randy Connolly and Ricardo Hoar Fundamentals of Web  Additional table tags , Randy Connolly and Ricardo Hoar Fundamentals of Web  Section 2 of 6 STYLING TABLES Randy Connolly and Ricardo Hoar Fundamentals of Web  Styling Tables The old way’s deprecated In HTML5 it is left to CSS, However legacy support for deprecated HTML attributes still exist ▪ width, height—for setting the width and height of cells ▪ cellspacing—for adding space between every cell in the table ▪ cellpadding—for adding space between the content of the cell and its border ▪ bgcolor—for changing the background color of any table element ▪ background—for adding a background image to any table element ▪ align—for indicating the alignment of a table in relation to the surrounding container Randy Connolly and Ricardo Hoar Fundamentals of Web  Styling Tables Borders Randy Connolly and Ricardo Hoar Fundamentals of Web  Styling Tables Padding and spacing Randy Connolly and Ricardo Hoar Fundamentals of Web  Styling Tables Examples Randy Connolly and Ricardo Hoar Fundamentals of Web  Nth-Child Nifty Table styling tricks: hover effect and zebra-stripes Randy Connolly and Ricardo Hoar Fundamentals of Web  Section 3 of 6 INTRODUCING FORMS Randy Connolly and Ricardo Hoar Fundamentals of Web  HTML Forms Richer way to interact with server Forms provide the user with an alternative way to interact with a web server. Forms provide rich mechanisms like: Text input Password input Options Lists Radio and check boxes Randy Connolly and Ricardo Hoar Fundamentals of Web  Form Structure Randy Connolly and Ricardo Hoar Fundamentals of Web  How forms interact with servers Randy Connolly and Ricardo Hoar Fundamentals of Web  Query Strings At the end of the day, another string Randy Connolly and Ricardo Hoar Fundamentals of Web  URL encoding Special symbols Randy Connolly and Ricardo Hoar Fundamentals of Web  element Two essential features of any form, namely the action and the method attributes. The action attribute specifies the URL of the server-side resource that will process the form data The method attribute specifies how the query string data will be transmitted from the browser to the server. GET POST Randy Connolly and Ricardo Hoar Fundamentals of Web  GET vs POST Randy Connolly and Ricardo Hoar Fundamentals of Web  GET vs POST Advantages and Disadvantages GET ▪ Data can be clearly seen in the address bar. ▪ Data remains in browser history and cache. ▪ Data can be bookmarked ▪ Limit on the number of characters in the form data returned. POST ▪ Data can contain binary data. ▪ Data is hidden from user. ▪ Submitted data is not stored in cache, history, or bookmarks. Randy Connolly and Ricardo Hoar Fundamentals of Web  Section 4 of 6 FORMS CONTROL ELEMENTS Randy Connolly and Ricardo Hoar Fundamentals of Web  Form-Related HTML Elements Type Description Defines a clickable button. An HTML5 element form defines lists to be used with other form elements. Groups related elements in a form together. Defines the form container. Defines an input field. HTML5 defines over 20 different types of input. Defines a label for a form input element. Defines the label for a fieldset group. Defines an option in a multi-item list. Defines a group of related options in a multi-item list. Defines a multi-item list. Defines a multiline text entry box. Randy Connolly and Ricardo Hoar Fundamentals of Web  Text Input Controls Type Description text Creates a single line text entry box. textarea Creates a multiline text entry box. password Creates a single line text entry box for a password search Creates a single-line text entry box suitable for a search string. This is an HTML5 element. email Creates a single-line text entry box suitable for entering an email address. This is an HTML5 element. tel Creates a single-line text entry box suitable for entering a telephone. This is an HTML5 element. url Creates a single-line text entry box suitable for entering a URL. This is an HTML5 element. Randy Connolly and Ricardo Hoar Fundamentals of Web  Text Input Controls Classic Randy Connolly and Ricardo Hoar Fundamentals of Web  Text Input Controls HTML5 Randy Connolly and Ricardo Hoar Fundamentals of Web  HTML5 advanced controls Pattern attribute datalist Randy Connolly and Ricardo Hoar Fundamentals of Web  Select Lists Chose an option, any option. element is used to create a multiline box for selecting one or more items The options are defined using the element can be hidden in a dropdown or multiple rows of the list can be visible Option items can be grouped together via the element. Randy Connolly and Ricardo Hoar Fundamentals of Web  Select Lists Select List Examples Randy Connolly and Ricardo Hoar Fundamentals of Web  Which Value to send Select Lists Cont. The value attribute of the element is used to specify what value will be sent back to the server. The value attribute is optional; if it is not specified, then the text within the container is sent instead Randy Connolly and Ricardo Hoar Fundamentals of Web  Radio Buttons Radio buttons are useful when you want the user to select a single item from a small list of choices and you want all the choices to be visible Radio buttons are added via the element The buttons are mutually exclusive (i.e., only one can be chosen) by sharing the same name attribute The checked attribute is used to indicate the default choice the value attribute works in the same manner as with the element Randy Connolly and Ricardo Hoar Fundamentals of Web  Radio Buttons Randy Connolly and Ricardo Hoar Fundamentals of Web  Checkboxes Checkboxes are used for getting yes/no or on/off responses from the user. checkboxes are added via the