web page technologies
DESCRIPTION
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 …. . - PowerPoint PPT PresentationTRANSCRIPT
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>
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>
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" />
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>
27
Lecture Slides
www.dcs.napier.ac.uk/~owens/wpt/lectures/wptlecture3.ppt