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 <form> </form> The form tag … … has 2 compulsory attributes <form method = “post” action = “mailto: </form>

5 Forms Let’s develop the XHTML for this form

6 Forms We start with the form tag Then we add the text box Enter Your Name

7 Forms Then we add the submit button And finally the reset button

8 Forms Enter Your Name

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

10 Forms First Name Second Name address The text boxes

11 Forms Scotland England N. Ireland Wales Other Where do you live? The Select Field

12 Forms What is your age category? Under Over 18 The Radio Buttons

13 Forms The Check Boxes Which of the following types of books do you read? (tick all that apply) Gardening Cooking Chick Lit Romantic Fiction Harry Potter and other similar types of book

14 Forms The File Field Attach a file containing your 10 favourite books

15 Forms The Text Area Your comments and suggestions are always useful Please type you comments or suggestions here

16 Forms The Submit/Reset Buttons

17 Tables Creating tables is easy

18 Tables The table tag … … has an optional attribute

19 Tables You can add a caption Address List

20 Tables The head of the table has one row Address List

21 Tables That row contains two headings Address List Name Address

22 Tables The rest of the table is in the body of the table Address List Name Address

23 Tables The body has three rows Address List Name Address

24 Tables Each row has two data items Address List Name Address Fred Bloggs Joe Soap Mickey Mouse

25 Tables Combine earlier XHTML with tables

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

27 Lecture Slides