View
218
Download
0
Category
Preview:
Citation preview
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: 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
<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> 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
Recommended