Web Page Technologies

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: [email protected]>

</form>

5

Forms Let’s develop the XHTML for this form

6

Forms We start with the form tag

<form method = “post” action = “mailto: [email protected]>

</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: [email protected]">

<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

<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 />

The text boxes

11

Forms

<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 />

The Select Field

12

Forms

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 />

The Radio Buttons

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 AreaYour 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> [email protected] </td> </tr>

<tr> <td> Joe Soap </td> <td> [email protected] </td> </tr>

<tr> <td> Mickey Mouse </td> <td> [email protected] </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