1 / 27

Web Page Technologies

Web Page Technologies. I n This Lecture You Will Learn About …. Forms Fancy Forms Tables Fancy Tables. Forms. Modern web pages allow you to submit data via forms Anywhere you enter text or select an option or press a button is a form. Forms. The form tag …. <form> </form>.

shelby-hensley
Download Presentation

Web Page Technologies

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. Web Page Technologies

  2. In This Lecture You Will Learn About … • Forms • Fancy Forms • Tables • Fancy Tables

  3. Forms • Modern web pages allow you to submit data via forms • Anywhere you enter text or select an option or press a button is a form

  4. Forms • The form tag … <form> </form> • … has 2 compulsory attributes <form method = “post” action = “mailto: j.owens@napier.a.uk> </form>

  5. Forms • Let’s develop the XHTML for this form

  6. Forms • We start with the form tag <form method = “post” action = “mailto: j.owens@napier.a.uk> </form> • Then we add the text box <input type = “text” name = “usersName” size = 20 maxlength = 30 /> Enter Your Name </br>

  7. Forms • Then we add the submit button <input type = “submit” value = “Press Here to Submit Your Name” /> • And finally the reset button <input type = “reset” value = “Reset” />

  8. Forms <form method = "post" action = "mailto: a.person@abc.co.uk"> <input type = "text" name = "UsersName" size = "20" maxlength = "30" /> Enter Your Name <br /> <input type = "submit" value = "Press Here to Submit Name" /> <input type = "reset" value = "Reset" /> </form>

  9. Forms • You can create more complex forms • eg those in on-line tutorial

  10. Forms • The text boxes <input type = "text" name = "firstName" size = "20" maxlength = "30" /> First Name <br /> <input type = "text" name = "secondName" size = "20" maxlength = "30" /> Second Name <br /> <input type = "text" name = "emailaddress" size = "20" maxlength = "30" /> e-mail address <br />

  11. Forms • The Select Field <select name = "residesIn"> <option> Scotland </option> <option> England </option> <option> N. Ireland </option> <option> Wales </option> <option> Other </option> </select> Where do you live? <br /> <br />

  12. Forms • The Radio Buttons What is your age category? <br /> <input type = "radio" name = "ageCategory" value = "underFive" /> Under 5 <br /> <input type = "radio" name = "ageCategory" value = "sixToTen" /> 6 - 10 <br /> <input type = "radio" name = "ageCategory" value = "elevenToEighteen" /> 11 - 18 <br /> <input type = "radio" name = "ageCategory" value = "overEighteen" /> Over 18 <br /> <br />

  13. Forms • The Check Boxes Which of the following types of books do you read? (tick all that apply) <br /> <input type = "checkbox" name = "gardening" value = "gardening" /> Gardening <br /> <input type = "checkbox" name = "cooking" value = "cooking" /> Cooking <br /> <input type = "checkbox" name = "sport" value = "sport" /> Chick Lit <br /> <input type = "checkbox" name = "romance" value = "romance" /> Romantic Fiction <br /> <input type = "checkbox" name = "potter" value = "potter" /> Harry Potter and other similar types of book <br /><br />

  14. Forms • The File Field Attach a file containing your 10 favourite books <input type = "file" name = "favbooksfile" /> <br /> <br />

  15. Forms • The Text Area Your comments and suggestions are always useful <br /> <textarea name = "comments" cols = "50" rows = "6"> Please type you comments or suggestions here </textarea> <br /> <br />

  16. Forms • The Submit/Reset Buttons <input type = "submit" value = "Press Here to Submit Name" /> <input type = "reset" value = "Reset" />

  17. Tables • Creating tables is easy

  18. Tables • The table tag … <table> </table> • … has an optional attribute <table border = “1”> </table>

  19. Tables • You can add a caption <table border = “1”> <caption> e-mail Address List </caption> </table>

  20. Tables • The head of the table <thead> has one row <tr> <table border = “1”> <caption> e-mail Address List </caption> <thead> <tr> </tr> </thead> </table>

  21. Tables • That row contains two headings <th> <table border = “1”> <caption> e-mail Address List </caption> <thead> <tr> <th> Name </th> <th> e-mail Address </th> </tr> </thead> </table>

  22. Tables • The rest of the table is in the body of the table <tbody> <table border = “1”> <caption> e-mail Address List </caption> <thead> <tr> <th> Name </th> <th> e-mail Address </th> </tr> </thead> <tbody> </tbody> </table>

  23. Tables • The body has three rows <table border = “1”> <caption> e-mail Address List </caption> <thead> <tr> <th> Name </th> <th> e-mail Address </th> </tr> </thead> <tbody> <tr> </tr> <tr> </tr> <tr> </tr> </tbody> </table>

  24. Tables • Each row has two data items <td> <table border = “1”> <caption> e-mail Address List </caption> <thead> <tr> <th> Name </th> <th> e-mail Address </th> </tr> </thead> <tbody> <tr> <td> Fred Bloggs </td> <td> f.bloggs@abc.co.uk </td> </tr> <tr> <td> Joe Soap </td> <td> j.soap@abc.co.uk </td> </tr> <tr> <td> Mickey Mouse </td> <td> m.mouse@abc.co.uk </td> </tr> </tbody> </table>

  25. Tables • Combine earlier XHTML with tables

  26. Hot Spots • Use tutorial to study hot spots • They will be assessed !

  27. Lecture Slides • www.dcs.napier.ac.uk/~owens/wpt/lectures/wptlecture3.ppt

More Related