Scribd
Upload
75 views

Frames Tables Forms

The document provides information on various HTML form elements that can be used to collect user input data. It describes the input element and its type attributes including: text, checkbox, radio button, button, submit, reset, password, file and hidden. It also covers the name and value attributes used to identify the form controls and collect data from them. The form element's method and action attributes are explained which specify how the data is submitted to a server-side processing program.

Uploaded by

perlishell74
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
75 views

Frames Tables Forms

The document provides information on various HTML form elements that can be used to collect user input data. It describes the input element and its type attributes including: text, checkbox, radio button, button, submit, reset, password, file and hidden. It also covers the name and value attributes used to identify the form controls and collect data from them. The form element's method and action attributes are explained which specify how the data is submitted to a server-side processing program.

Uploaded by

perlishell74
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 27

Tables

Tables provide a means of organising the


layout of data

A table is divided into rows and columns: these


specify the cells of the table tables...

Cells can contain text, images, links, other Tables can also be used for organising the
layout of the web page itself.
B c C!"#$$ %nternet Computing

Tables
<table> main element <tr> <th> <td>
table row table header table data

<table border="1"> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <tr> <td>D P Jones</td> <td>Sailing</td> <td>8</td> </tr> <tr> </table>
2

B c C!"#$$ %nternet Computing

Tables
<table> main element <tr> <th> <td>
table row table header table data

<table border="1"> <tr> <th>Name</th> <td>A B Morgan</td> <td>D P Jones</td> </tr> <tr> <th>Course</th> <td>Fishing</td> <td>Sailing</td> </tr> <tr> <th>Year</th> <td>8</td> <td>5</td> </tr> <tr> </table>
3

B c C!"#$$ %nternet Computing

&ows and Columns


Cells can span multiple
columns and multiple rows with the colspan and rowspan attributes

B c C!"#$$ %nternet Computing

<table border="1"> <tr> <th colspan="2">Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B</td> <td>Morgan</td> <td rowspan="2">Fishing</td> <td>5</td> </tr> <tr> <td>D J</td> <td>Jones</td> <td>Sailing</td> <td>8</td> </tr> <tr> </table> 4

The align and width attributes


The align
attribute determines the position of the text within a cell
<table border="1" align="center"> <tr> <th colspan="2" width="60%">Name</th> <th rowspan="2">Course</th> <th rowspan="2"> ear</th> </tr> <tr> <th>!ast</th> <th>"nit#</th> </tr> <tr> <td>$organ</td> <td>%&</td> <td>'ishing</td> <td align="center">(</td> </tr> <)* etc ++>
5

The width
attribute determines the width of the row relative to the table
B c C!"#$$ %nternet Computing

Table attributes Table attributes align alignment relative to the page width in pixels or percentage of page width border ' width of border (pixels) cellspacing separation between cells (pixels) cellpadding ' space around data inside cell (pixels) bgcolor ' background colour (inside cells)
Furthermore The <caption> element puts a title above the table
B c C!"#$$ %nternet Computing

<table border="," align="center" cellspacing="6" cellpadding="6" bgcolor="c-an"> <caption> <h2>Course .ata</h2> </caption> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <)* etc ++>
B c C!"#$$ %nternet Computing

Table attributes

*age formatting
Tables can be used to organise the layout o the !eb page itsel

B c C!"#$$ %nternet Computing

</bod-> <table border="0" cellspacing="10"> <tr> <td> <img src="cat#gi/" alt="cat"> <ul> <li>cats</li> <li>dogs</li> <li>butter lies</li> </ul> </td> <td! "his #iece o te$t illustrates the idea o #lacing t%o columns o in ormation in a %eb #age&&& Note also that there is no border in this table& </td> </tr> </table> </bod-> 8

+rames and +ramesets


A frameset partitions a web browser window so that
multiple web documents can be displayed simultaneously.

,xample application: To maintain a permanently visible otherwise the directory of links must appear on
every page, and this scrolls up with the page

directory of links within your site, while also displaying one or more selected documents from the site.

-ote: framesets can cause problems for bookmarking


and for .screen readers. (for visually'impaired users)
B c C!"#$$ %nternet Computing

"

+ramesets
<html> <head><title>'rames 1</title></head> </rameset cols="10012"> </rame name="na3'" src="na3igation#html"> </rame name="main'" src="intro#html"> <//rameset> </html>

The /rameset element replaces the


bod- element

/rameset has attributes cols or


rows, defined in terms of pixels, percentage(/) or unspecified (0)

this splits the window into two or


B c C!"#$$ %nternet Computing

more columns or rows

1#

+rame attributes
</rameset cols="10012"> </rame name="na3'" src="na3igation#html"> </rame name="main'" src="intro#html"> <//rameset>

The name attribute uni1uely identifies the frame. %t may be


used as the target in an anchor (<a>) element

4he src attribute specifies the web page to be placed in the


frame initially (it may subse1uently be overwritten)

4he scrolling attribute ("auto", "-es", "no")


specifies whether the frame is to have scroll bars

4he /rameborder attribute ("0", "1") specifies whether


the B frame is to have a border c C!"#$$ %nternet Computing
11

navigation.html
The anchor tag has a target attribute
takes the name of the frame used to display the information

All anchors below are targeted to the "main'" frame


<html><head><title>Na3igation &ar</title></head> <bod-><center> <a hre/="course#html" target="main'">54$! Course</a><br><br> <a hre/="paragraph#html" target="main'">6aragraphs</a><br> <a hre/="headings#html" target="main'">5eadings</a><br> <a hre/="ulists#html" target="main'">7nordered lists</a><br> <a hre/="olists#html" target="main'">8rdered lists</a><br> <a hre/="nlists#html" target="main'">Nested lists</a><br> <a hre/="intro#html" target="main'">5ome</a><br> </center></bod-> </html>
B c C!"#$$ %nternet Computing

12

intro.html
A simple document which is initially placed in the "main'"
frame

This is replaced when a user clicks on a link in the "na3'"


frame
<html> <head><title>"nternet Computing</title></head> <bod-> <h2>9elcome to the 54$! Course</h2> <p> <h0>6lease select the sub:ect o/###</h0> </p> </bod-> </html> B c C!"#$$ %nternet Computing 13

<html> <head><title>'rames 2</title></head> </rameset cols="10012"> </rame name="na3'" src="na3igation#html"> </rameset rows=",0%1;0%"> </rame name="upper'" src="intro#html"> </rame name="lower'" src="course#html"> <//rameset> <//rameset> </html>

-ested framesets

B c C!"#$$ %nternet Computing

14

$ome bro!sers cannot process rames% &lternative content should be provided using the no/rames element
<html> <head><title>'rames 1</title></head> </rameset cols="10012"> </rame name="na3'" src="na3igation#html"> </rame name="main'" src="intro#html"> <//rameset> <no/rames> <bod-> <omething here /or browsers not supporting /rames </bod-> </no/rames> </html>
B c C!"#$$ %nternet Computing

-oframes

15

+orms
+orms are user interfaces for data input !ain application: to provide user input for programs and databases located on a web server local (client'side) scripts associated with the form erver'based programs may return data to the client as a web
page

Client'side scripts can read input data To validate the data, prior to sending to server To use in local processing which may output web page
content that is displayed on the client
B c C!"#$$ %nternet Computing

16

,xample applications
2uestionnaires to provide feedback on a web site e'commerce, to enter name, address, details of purchase
and credit'card number re1uest brochures from a company make a booking for holiday, cinema etc. buy a book, cd, etc obtain a map giving directions to a shop &un a database 1uery and receive results (an important part of e'commerce)
B c C!"#$$ %nternet Computing

17

te=t chec>bo= radio 'buttons( select 'options( te=tarea password button submit reset hidden /ile image
B c C!"#$$ %nternet Computing

%nput types

18

The method attribute speci ies the !ay that orm data is sent to the server program ' ?@4 appends the data to the )*+ ' 68<4 sends the data separately The action attribute speci ies a server program 'e%g% a perl program %pl e,tension( that processes the orm data -an also send an email. action/0mailto.1%2%-os3er4%%5
<bod-> </orm method="68<4" action="comments#pl"> <h2>4ell us what -ou thin></h2> <)++ etc ++> <//orm> </bod->
B c C!"#$$ %nternet Computing

The method and action attributes

1"

The t-pe attribute speci ies the type o user input The name attribute gives an identi ier to the input data The siAe attribute speci ies the length o the input ield The 3alue attribute speci ies an initial value or the te,t 'optional(

The input element: t-pe="te=t"

</orm method="68<4" action="comments#pl"> <h2>4ell us what -ou thin></h2> Name <input name="name" t-pe="te=t" siAe="20"><br> %ddress <input name="address" t-pe="te=t" siAe=",0"> <//orm> B c C!"#$$ %nternet Computing 2#

The name attribute is used to de ine a set o chec3bo,es

The input element:t-pe="chec>bo="

The 3alue attribute identi ies the individual chec3bo, 6 the chec>ed attribute is set the bo, is initially chec3ed
5ow did -ou hear about this web siteB<br> % /riend <input t-pe="chec>bo=" name="howdid" 3alue="/riend"><br> <earch engine <input t-pe="chec>bo=" name="howdid" 3alue="engine"><br> <)* etc ++>
B c C!"#$$ %nternet Computing

21

The input element: t-pe="radio"


*adio buttons are similar to chec3bo,es7 but only one can be selected To select a button by de ault7 use the chec>ed attribute ' or one button only(
5ow did -ou hear about this web siteB<br> % /riend <input t-pe="radio" name="howdid" 3alue="/riend"><br> <earch engine <input t-pe="radio" name="howdid" 3alue="engine"><br> <)* etc ++>
B c C!"#$$ %nternet Computing

22

The input element: t-pe="button"


The name attribute uni8uely identi ies a button The 3alue attribute gives a label to the button &ctions can be associated !ith buttons9 more later

.o -ou want to recei3e an- /urther in/ormationC<br> <input t-pe="button" name="-es" 3alue=" es "> <input t-pe="button" name="no" 3alue=" No "><br>
B c C!"#$$ %nternet Computing

23

The input element: t-pe="submit/reset"


t-pe="submit" : clic3ing this button sends the orm data to the program ')*+( speci ied in the action attribute o the orm t-pe="reset" : clic3ing this button clears all data entered so ar
4han> -ou<br> <input t-pe="submit" name="send" 3alue="<end"> <input t-pe="reset" name="clear" 3alue="Clear"><br> B c C!"#$$ %nternet Computing 24

The input element: t-pe="password//ile/hidden"


t-pe="password" : similar to t-pe="te=t" e,cept that the input is echoed !ith asteris3s 'so not visible( t-pe="/ile" : provides a ile dialogue bo, to speci y a ile that is sent to the server t-pe="hidden" : similar to te,t input7 but the 3alue attribute is used to speci y data that is to be sent to the server% ;othing appears on the screen% : The data might be set by a server program to 3eep trac3 o the details o a particular transaction% 25 B c C!"#$$ %nternet Computing

The te=tarea element


)sed or multi9line te,t input The si<e o the input area is speci ied !ith the cols and rows attributes &ny te,t placed inside the element appears in the input area 'this can be deleted(%
6lease write -our commentsC<br> <te=tarea name="comments" rows="(" cols="20"> put te=t here </te=tarea> B c C!"#$$ %nternet Computing

26

The select element


The select element provides a menu o options &n option can be selected by de ault using the selected attribute 'other!ise the irst in the list is initially selected(
5ow do -ou rate this siteB<br> <select name="rating"> <option>?ood <option selected>&ad <option>7gl</select> B c C!"#$$ %nternet Computing

27

You might also like