1 / 25

HTML5

HTML5. -Forms And Tables. Basic Table. Core Tags <table> </table> tr Element Defines individual table rows t h Element Defines a header cell td Element Contains table data elements The simplest table <table> < tr > <td> Col 1 </td> <td> Col 2 </td> </ tr >

meadow
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 -Forms And Tables

  2. Basic Table • Core Tags • <table> </table> • tr Element • Defines individual table rows • th Element • Defines a header cell • td Element • Contains table data elements • The simplest table <table> <tr> <td> Col 1 </td> <td> Col 2 </td> </tr> </table> Try it : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

  3. Organized Table • A table can be split into three distinct sections: • Head (thead element) • Table titles • Column headers • Body (tbody element) • Primary table data • Table Foot (tfoot element) • Calculation results • Footnotes • Above body section in the code, but displays at the bottom in the page

  4. Complex Table Using rowspan and colspan with Tables • You can merge data cells with the rowspan and colspan attributes • The values of these attributes specify the number of rows or columns occupied by the cell. • Can be placed inside any data cell or table header cell. • The br element is render as a line break in most browsers—any markup or text following a br element is rendered on the next line. • Like the img element, br is an example of a void element. <!-- merge two rows --> <throwspan = "2"> <imgsrc = "camel.png" width = "205" height = "167" alt = "Picture of a one-hump camel"> </th> <!-- merge four columns --> <thcolspan = "4"> <strong>Camelid comparison</strong><br> Approximate as of 6/2011 </th>

  5. Example

  6. Forms • Forms are used all over the Web to • Accept information • Provide interactivity • Types of forms: • Search form, Order form, Newsletter sign-up form, Survey form, Add to Cart form, and so on… • ***Not all major browsers supports the new form features ***

  7. HTML Using Forms • <form> tag • Contains the form elements on a web page • Container tag • <input> tag • Configures a variety of form elements including text boxes, radio buttons, check boxes, and buttons • Stand alone tag • <textarea> tag • Configures a scrolling text box • Container tag • <select> tag • Configures a select box (drop down list) • Container tag • <option> tag • Configures an option in the select box • Container tag

  8. Sample Form HTML <form> Email: <input type="text" name="CustEmail" ><br > <input type="submit"> </form>

  9. The Form Element<form> • Container Tag • The form element attributes: • action • Specifies the server-side program or script that will process your form data • method • get – default value, form data passed in URL • post – more secure, form data passed in HTTP Entity Body • name • Identifies the form --- for client side script • id • Identifies the form

  10. The Input Element Text Box<input> • Accepts text information<input type="text" name="name“> • Common Attributes: • type=“text” • name • size • maxlength • value • required (HTML5) • placeholder (HTML5) • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_type_text

  11. The Input Element Password Box<input> • Accepts text information that needs to be hidden as it is entered<input type="password" name=“ps“> • Common Attributes: • type=“password” • name • id • size • maxlength • value • required (HTML5) • placeholder (HTML5) • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_type_password

  12. The Input Element Check box<input> • Allows the user to select one or more of a group of predetermined items • <input type="checkbox" name=“Browser" value=“InternetExplorer"> IE <br> • Common Attributes: • type=“checkbox” • Name : Same name for one group • checked • value : for script • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_type_checkbox

  13. The Input Element Radio Button<input> • Allows the user to select exactly one from a group of predetermined items • Each radio button in a group is given the same name and a unique value • <input type="radio" name="browser" value="IE"> IE <br> • <input type="radio" name="browser" value="FireFox"> FireFox <br> • Comon Attributes: • type=“radio” • name • id • checked • value • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_type_radio

  14. The Input Element File Upload<input> • Allow user to browse and select a file <input type=“file” name=“Html” accept=“text/html”> • Common attribute • name • accept • id • Size • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_type_file

  15. The Input Element Submit Button<input> • Submits the form information • When clicked: • Triggers the action method on the <form> tag • Sends the form data (the name=value pair for each form element) to the web server. • Attributes: • type=“submit” • name • id • Value • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_type_text

  16. The Input Element Reset Button<input> • Resets the form fields to their initial values • Attributes: • type=“reset” • name • id • value • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_type_reset

  17. The Label Element<label> • Associates a text label with a form control • Two Different Formats:<label>Email: <input type="text" name="CustEmail” ></label> Or<label for="email">Email: </label><input type="text" name="CustEmail" id= "email" />

  18. The Textarea Element<textarea> • Configures a scrolling text box<textarea name="comment" rows="20“ cols="40“> Enter your comment</textarea> • Common Attributes: • name • id • cols • rows

  19. The Select Element<select> • Configures a select list (along with <option> tags) • Also known as: Select Box, Drop-Down List, Drop-Down Box, and Option Box. • Allows the user to select one or more items from a list of predetermined choices. • <select size="1" name="color" id="color"> • </select> • Common Attributes: • name • id • Size :number of visible options • Multiple : multiple options

  20. The Option Element<option> • Configures the options in a Select List<option> Select your color</option> • <option value="red" > red</option> • <option value="blue" > blue</option> • <option value="white" > white</option> • <option value="black"> black</option> • Attributes: • value – send to server • selected • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option

  21. The fieldset Element • <fieldset> </fieldset> • <legend> </legend> • Group related elements in a form: • <form>  <fieldset>    <legend>Personal:</legend><label> Name: <input type="text" /><br />    Email: <input type="text" /><br />    Date of birth: <input type="text" />  </fieldset></form>

  22. HTML 5 New Input Type • Input • Type=“color” • Type = “date” • type=“email” • type=“url” • type=“tel” • type=“search”

  23. HTML5: Slider Control<input> <label for="myChoice"> Choose a number between 1 and 100:</label><br> Low <input type="range" name="Choice" id="myChoice"> High

  24. HTML5: Spinner Control<input> <label for="myChoice">Choose a number between 1 and 10:</label><input type="number" name="myChoice" id="myChoice" min="1" max="10">

  25. HTML5: Calendar Control<input> <label for="myDate">Choose a Date</label><input type="date" name="myDate" id="myDate">

More Related