IT350 Web and Internet Programming XHTML Tables and Forms edition
advertisement
IT350 Web and Internet Programming XHTML Tables and Forms (from Chapter 4 of the text 4th edition Chapter 2 of the text 5th edition) Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4.10 Tables Adapted from 2008 Prentice Hall, Inc. All rights reserved. 1 Table Basics • table element – border, summary, caption – Sections: • <thead> • <tfoot> • <tbody> – <tr> – Actual contents: • <th> • <td> Adapted from 2008 Prentice Hall, Inc. All rights reserved. Table Example #1 table1.html (1 of 2) < ? x m l v e r s i o n = " 1 . 0 " e nc o d i ng = " u t f - 8 " ? > < ! D O C T Y P E h t m l P U B L I C " -/ / W 3 C/ / D T D X H T M L 1 .0 S t r i c t / /E N " " h t t p : / / w w w. w 3 . o r g / T R/ x h t ml 1 / D T D / x h t m l 1 -s t r i c t . d t d" > < ! - - F i g . 4 . 1 0: t a b l e 1 . ht m l -- > < ! - - C r e a t i n g a b a s i c t ab l e . - - > < h t m l x m l n s = " h t t p : / / w ww . w 3 .o r g / 1 9 9 9 / x h t m l" > <head> < t i t l e > A s i m p l e X HT M L ta b l e < / t i t l e > </head> <body> < ! - - t h e < t a b l e > ta g o pe n s a t a b l e - -> < t a b l e bo r d e r = " 1" w i dt h = " 4 0 % " s u m m ar y = " T h i s t a b le p r o v i d e s i n fo r m a t i o n ab o u t t he p r i c e o f f r u it " > < ! - - t h e < c a p t io n > ta g s u m m a r i z e s t h e t a b l e 's - - > < ! - - c o n t e n t s (t h i s h e l p s t h e v i s ua l l y i m p a ir e d ) - - > < c a p ti o n > < s t r o ng > P r ic e o f F r u i t < / st r o n g > < / c ap t i o n> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 2 <! -- th e <th ead> secti on appear s fi rst i n the tabl e - -> <! -- it form ats t he ta bl e heade r ar ea - - > <t head> <tr> <! -- <tr> inse rt s a tab le r ow - - > < th>Fr uit</ th> < ! - - inser t a headi ng ce ll - - > < th>Pr ice</ th> </tr > </ thead > table1.html (2 of 2) <! -- th e <tf oot> secti on appear s la st in the table - -> <! -- it form ats t he ta bl e foote r -- > <t foot> <tr> < th>To tal</ th> < th>$3 .75</ th> </tr > </ tfoot > <! -- al l tab le co ntent i s enclo sed - - > <! -- wi thin the < tbody > --> <t body> <tr> < td>Ap ple</ td> < ! - - inser t a data cell - - > < td>$0 .25</ td> </tr > <tr> < td>Or ange< /td> < td>$0 .50</ td> </tr > ... < /tbod y> < /tab le> </body> </h tml> Adapted from 2008 Prentice Hall, Inc. All rights reserved. Table Example #2 (modified) Adapted from 2008 Prentice Hall, Inc. All rights reserved. 3 < tabl e bor der = "1"> <c aptio n>Her e is a mor e complex sam ple t able. </cap tion> <t head> <! -- rows pans and c ol spans m erge the speci fied - -> <! -- numb er of cell s vertica lly or ho rizon tally - -> <tr> < ! -- m erge two r ow s --> < th ro wspan = "2 "> table2.html (2 of 4) <im g src = "c am el.gif" wid th = "205" heigh t = " 16 7" alt = "P ictur e of a cam el" / > < /th> < ! -- m erge four co lumns - -> < th co lspan = "4 " valign= "bot tom"> <h1 >Came lid c om parison </h1 > <p> Appro ximat e as of 6 /200 7</p> < /th> </tr > <tr> < th># of Hu mps</ th > < th>In digen ous r eg ion</th > < th>Sp its?< /th> < th>Pr oduce s Woo l? </th> </tr > </ thead > Adapted from 2008 Prentice Hall, Inc. All rights reserved. table2.html (3 of 4) < tbody > <tr> < th al ign=" left" >C amels ( bact rian) </th> < td>2< /td> < td>Af rica/ Asia< /t d> < td>Ye s</td > < td>Ye s</td > </tr > <tr> < th al ign=" left" >L lamas</ th> < td>1< /td> < td>An des M ounta in s</td> < td>Ye s</td > < td>Ye s</td > </tr > </ tbody > < /tab le> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4 Exercise #1: Write XHTML to generate this table: Adapted from 2008 Prentice Hall, Inc. All rights reserved. Exercise #2: Write XHTML to generate this table: Adapted from 2008 Prentice Hall, Inc. All rights reserved. 5 Exercise #3: Write XHTML to generate this table: Adapted from 2008 Prentice Hall, Inc. All rights reserved. 4.11 Forms Adapted from 2008 Prentice Hall, Inc. All rights reserved. 6 < form meth od = "post " act io n = "cg i -bi n/sen dmail .pl"> <p > <! -- hidd en in puts co ntain n on -v isual - - > <! -- info rmati on -- > <inp ut ty pe = "hidd en " name = "r ecipi ent" v alue = "de itel@ de itel.co m" / > <inp ut ty pe = "hidd en " name = "s ubjec t" v alue = "Fe edbac k Form" / > <inp ut ty pe = "hidd en " name = "r edire ct" v alue = "ma in.ht ml " /> </ p> form.html (2 of 3) <! -- <i nput type = "te xt "> inse rts a tex t box - -> <p ><lab el>Na me: < input name = "n am e" type = " text" size = "2 5" max lengt h = " 30 " /> </la bel>< /p> <p > <! -- inpu t typ es "s ub mit" an d "r eset" inse rt - - > <! -- butt ons f or su bm itting and clear ing t he - - > <! -- form 's co ntent s --> <inp ut ty pe = "subm it " value = " Submi t" /> <inp ut ty pe = "rese t" value = "C lear" /> </ p> < /for m> Adapted from 2008 Prentice Hall, Inc. All rights reserved. 5.5 More Complex XHTML Forms Adapted from 2008 Prentice Hall, Inc. All rights reserved. 7 Key issue: How is data sent to the server? • method = “get” Appends form data directly to the end of the URL http:// ... submit.cgi?name=smith&vote=3 http://www.google.com/search?q=monkeys • method = “post” Appends form data to the browser request Adapted from 2008 Prentice Hall, Inc. All rights reserved. Key issue: What provides security? • Using <input type=“password”> • Using <input type=“hidden”> • Using https:// • Using http:// Adapted from 2008 Prentice Hall, Inc. All rights reserved. 8 Exercise #1: Write XHTML to generate this form: Adapted from 2008 Prentice Hall, Inc. All rights reserved. Exercise #2: Write XHTML to generate this form: Adapted from 2008 Prentice Hall, Inc. All rights reserved. 9
