XHTML Forms: Collecting Information and User Interaction
"Learn about XHTML forms, visual and nonvisual components, form processing, input elements, and more. Explore the structure of a form in XHTML and understand how data is sent to a web server through actions and methods."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Introduction to XHTML Cont:
FORMS XHTML provides forms for collecting information from users Forms contain visual components, such as buttons, that users interact with Forms may also contain nonvisual components, called hidden inputs, which are used to store any data that needs to be sent to the server, but is not entered by the user
FORMS CONT. A form begins with the form element Attribute method specifies how the form s data is sent to the web server The action attribute of the form element specifies the script to which the form data will be sent
FORMS CONT. The input element provides data to the script that processes the form The text input inserts a text box into the form, which allows the user to input data The label element provides users with information about the input element s purpose The size attribute specifies the number of characters visible in the input element Optional attribute maxlength limits the number of characters input into a text box The submit input submits the data entered in the form to the web server for processing Most web browsers create a button that submits the form data when clicked The reset input allows a user to reset all form elements to their default values
1 <?xml version = <?xml version = "1.0" 2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC " "- -//W3C//DTD XHTML 1.0 Strict//EN" //W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- -strict.dtd" 4 5 <! <!-- -- Fig. Fig. 4.12: form.html 4.12: form.html -- --> > 6 <! <!-- -- Form with hidden fields and a text box. Form with hidden fields and a text box. - -- -> > 7 <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml" "http://www.w3.org/1999/xhtml"> > 8 <head> <head> 9 <title> <title>Forms Forms</title> </title> 10 </head> </head> 11 12 <body> <body> 13 <h1> <h1>Feedback Form Feedback Form</h1> </h1> 14 15 <p> <p>Please fill out this form to help Please fill out this form to help 16 us improve our sit us improve our site. e.</p> 17 18 <! <!-- -- this tag starts the form, gives the this tag starts the form, gives the -- 19 <! <!-- -- method of sending information and the method of sending information and the -- 20 <! <!-- -- location of form script location of form script -- 21 <form method = <form method = "post" "post"action = 22 <p> <p> 23 <! <!-- -- hidden inputs contain non hidden inputs contain non- -visual 24 <! <!-- -- information information -- 25 <input type = <input type = "hidden" "hidden" name = 26 value = value = "deitel@deitel.com" "deitel@deitel.com" /> 27 <input type = <input type = "hidden" "hidden" name = 28 value = value ="Feedback Form" "Feedback Form" /> 29 <input type = <input type ="hidden" "hidden"name = 30 value = value = "main.html" "main.html" /> 31 </p> </p> "1.0" encoding = encoding = "utf "utf- -8" 8"?> ?> strict.dtd"> > Appends form data to the browser request </p> --> > --> > --> > action ="" ""> > No URL is used to process this form s data visual -- --> > --> > name = "recipient" "recipient" /> name ="subject" "subject" /> Creates hidden inputs not visible to the user name ="redirect" "redirect" />
32 33 34 35 36 37 </label></p> 38 39 <p> <p> 40 <! 41 <! 42 <! 43 <input type = 44 <input type = 45 </p> </p> 46 </form> </form> 47 </body> </body> 48 </html> </html> <! <!-- -- <input type = "text"> inserts a text box <input type = "text"> inserts a text box -- --> > Creates a label for the text field Name: <input name = <input name = "name" "name" type = <p><label> <p><label>Name: type ="text" "30"/> /> "text"size = size = "25" "25" maxlength = maxlength ="30" </label></p> Inserts a text box called name with 25 characters visible and a 30 character limit <!-- -- input types "submit" and "reset" insert input types "submit" and "reset" insert -- --> > <!-- -- buttons for submitting and clearing the buttons for submitting and clearing the -- --> > Inserts a submit button with Submit written on it <!-- -- form's contents form's contents -- --> > <input type ="submit" <input type ="reset" "submit"value = "reset" value = value ="Submit" "Submit" /> value ="Clear" "Clear" /> /> /> Inserts a reset button with Clear written on it Ends the XHTML form
FORMS CONT. The textarea element inserts a multiline text box, called a text area, into a form The number of rows in the text area is specified with the rows attribute The number of columns (i.e., characters per line) is specified with the cols attribute The password input inserts a password box into a form Allows users to enter sensitive information, such as credit card numbers and passwords, by masking the information input with another character, usually asterisks The actual value input is sent to the web server, not the asterisks that mask the input
FORMS CONT. The checkbox input allows the user to make a selection When the checkbox is selected, a check mark appears in the checkbox. Otherwise, the checkbox is empty Checkboxes can be used individually and in groups. Checkboxes that are part of the same group have the same name A radio button is similar in function and use to a checkbox, except that only one radio button in a group can be selected at any time All radio buttons in a group have the same name attribute but different value attributes. The select input provides a drop-down list of items The name attribute identifies the drop-down list The option element adds items to the drop-down list
FORMS CONT. The br element causes most browsers to render a line break Any markup or text following a br element is rendered on the next line
1 <?xml version = <?xml version = "1.0" 2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC " "- -//W3C//DTD XHTML 1.0 Strict//EN" //W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- -strict.dtd" 4 5 <! <!-- -- Fig. Fig. 4.13: form2.html 4.13: form2.html -- --> > 6 <! <!-- -- Form using a variety of components. Form using a variety of components. -- 7 <html xmlns = <html xmlns = "http://www.w3.or "http://www.w3.org/1999/xhtml" 8 <head> <head> 9 <title> <title>More Forms More Forms</title> </title> 10 </head> </head> 11 12 <body> <body> 13 <h1> <h1>Feedback Form Feedback Form</h1> </h1> 14 <p> <p>Please fill out this form to help Please fill out this form to help 15 us improve our site. us improve our site.</p> 16 17 <form method = <form method = "post" "post" action = 18 <p> <p> 19 <input type = <input type = "hidden" "hidden" name = 20 value = value = "deitel@deitel.com" "deitel@deitel.com" /> 21 <input type = <input type = "hidden" "hidden" name = 22 value = value = "Feedback Form" "Feedback Form" /> 23 <input type = <input type = "hidden" "hidden" name = 24 value = value = "main.html" "main.html" /> 25 </p> </p> 26 27 <p><label> <p><label>Name: Name: 28 <input name = <input name = "name" 29 </label></p> </label></p> 30 "1.0" encoding = encoding = "utf "utf- -8" 8"?> ?> strict.dtd"> > --> > g/1999/xhtml"> > Hidden text field </p> action = "" ""> > name = "recipient" "recipient" /> name = "subject" "subject" /> name = "redirect" "redirect" /> "name" type = type = "text" "text" size = size = "25" "25" /> />
31 <! 32 33 34 35 </label></p> </label></p> 36 37 <! <!-- 38 <! <!-- 39 <! <!-- 40 <p><label> <p><label>E E- -mail Address: 41 <input <input name = 42 </label></p> </label></p> 43 44 <p> <p> 45 <strong> <strong>Things you liked: 46 47 <label> <label>Site design 48 <input <input name = 49 value = 50 <label> <label>Links 51 <input name = <input name ="thingsliked" 52 value = value = "Links" 53 <label> <label>Ease of use Ease of use 54 <input name = <input name ="thingsliked" "thingsliked"type = 55 value = value ="Ease" "Ease" /></label> 56 <label> <label>Images Images 57 <input name = <input name = "thingsliked" "thingsliked"type = 58 value = value ="Images" "Images" /></label> 59 <label> <label>Source code Source code 60 <input name = <input name ="thingsliked" "thingsliked"type = 61 value = value ="Code" "Code" /></label> 62 </p> </p> <!-- -- <textarea> creates a multiline textbox <textarea> creates a multiline textbox -- --> > <p><label> <p><label>Comments: Comments:<br /> <br /> <textarea name = <textarea name ="comments" rows = rows ="4" "4"cols = "comments" cols ="36" "36"> >Enter comments here. Enter comments here.</textarea> </textarea> Inserts a text area with 4 rows and 36 columns, whose initial text is Enter comments here. -- <input type = "password"> inserts a <input type = "password"> inserts a -- --> > -- textbox whose display is masked with textbox whose display is masked with -- --> > -- asterisk characters asterisk characters -- --> > mail Address: "email"type = type = "password" "password"size = name = "email" size = "25" "25" /> /> Inserts an input field that displays entered text as asterisks (or another character) Things you liked:</strong><br /> </strong><br /> Site design name = "thingsliked" "thingsliked"type = value ="Design" "Design" /></label> /></label> Links "thingsliked"type = "Links" /></label> /></label> type ="checkbox" "checkbox" type ="checkbox" "checkbox" Inserts several checkboxes with different labels type ="checkbox" "checkbox" /></label> type ="checkbox" "checkbox" /></label> type ="checkbox" "checkbox" /></label>
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 </p> 87 88 <p> 89 90 <! <!-- -- <input type = "radio" /> creates a radio <input type = "radio" /> creates a radio -- --> > <! <!-- -- button. The difference between radio buttons button. The difference between radio buttons -- --> > <! <!-- -- and checkboxes is that only one radio button and checkboxes is that only one radio button -- --> > <! <!-- -- in a group can be selected. in a group can be selected. -- --> > <p> <p> <strong> <strong>How did you get to our site?: How did you get to our site?:</strong><br /> </strong><br /> Initially sets this radio button as selected <label> <label>Search engine Search engine <input name = <input name ="howtosite" value = value ="search engine" <label> <label>Links from another site Links from another site "howtosite"type = "search engine"checked = type ="radio" "radio" checked = "checked" "checked" /></label> /></label> <input name = <input name = "howtosite" "howtosite" type = type = "radio" "radio" value value = = "link" "link" /></label> /></label> <label> <label>Deitel.com Website Deitel.com Website <input name = <input name = "howtosite" "howtosite" type = type = "radio" "radio" value = value = "deitel.com" "deitel.com" /></la /></label> bel> Inserts a group of radio buttons, only one of which can be selected <label> <label>Reference in a book Reference in a book <input name = <input name = "howtosite" "howtosite" type = type = "radio" "radio" value = value = "book" "book" /></label> /></label> <label> <label>Other Other <input name = <input name = "howtosite" "howtosite" type = type = "radio" "radio" value = value = "other" "other" /></label> /></label> </p> <p> <label> <label>Rate our site: Rate our site:
91 <! 92 <! 93 <! 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 </p> 110 111 <p> 112 113 114 </p> 115 </form> </form> 116 </body> </body> 117 </html> </html> <!-- -- the <select> tag presents a drop the <select> tag presents a drop- -down down -- --> > <!-- -- list with choices indicated by the list with choices indicated by the -- --> > Create a drop-down list named rating <!-- -- <option> tags <option> tags -- --> > <select name = <select name = "rating" "rating"> > <option selected = <option selected = "selected" "selected"> >Amazing Amazing</option> </option> <option> <option>10 10</option> </option> <option> <option>9 9</option> </option> <option> <option>8 8</option> </option> Sets Amazing as the initially selected option <option> <option>7 7</option> </option> <option> <option>6 6</option> </option> <option> <option>5 5</option> </option> <optio <option> n>4 4</option> </option> <option> <option>3 3</option> </option> <option> <option>2 2</option> </option> <option> <option>1 1</option> </option> <option> <option>Awful Awful</option> </option> </select> </select> </label> </label> </p> <p> <input type = <input type = "submit" "submit" va value = lue = "Submit" "Submit" /> /> <input type = <input type = "reset" "reset" value = value = "Clear" "Clear" /> /> </p>
INTERNAL LINKING The a tag can be used to link to another section of the same document by specifying the element s id as the link s href. To link internally to an element with its id attribute set, use the syntax #id.
1 <?xml version = <?xml version = "1.0" 2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC " "- -//W3C//DTD XHTML 1.0 Strict//EN" //W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- -strict.dtd" 4 5 <! <!-- -- Fig. Fig. 4.14: internal.html 4.14: internal.html -- 6 <! <!-- -- Internal hyperlinks to make pages mor Internal hyperlinks to make pages more navigable. 7 <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml" "http://www.w3.org/1999/xhtml"> > 8 <head> <head> 9 <title> <title>Internal Links Internal Links</title> </title> 10 </head> </head> 11 12 <body> <body> 13 <! <!-- -- id attribute creates an internal hyperlink destination id attribute creates an internal hyperlink destination -- 14 < <h1 id = h1 id = "fe "features" atures"> >The Best Features of the Internet The Best Features of the Internet</h1> 15 16 <! <!-- -- an internal link's address is "#id" an internal link's address is "#id" -- 17 <p><a href = <p><a href = "#bugs" "#bugs"> >Go to Go to<em> 18 19 <ul> <ul> 20 <li> <li>You can meet people from countries You can meet people from countries 21 around the world. around the world.</li> </li> 22 <li> <li>You have access to new media as it becomes public: You have access to new media as it becomes public: 23 <ul> <ul> 24 <li> <li>New games New games</li> </li> 25 <li> <li>New applications New applications 26 <ul> <ul> 27 <li> <li>For Business For Business</li> 28 <li> <li>For Pleasure For Pleasure</li> 29 </ul> </ul> 30 </li> </li> 31 "1.0" encoding = encoding = "utf "utf- -8" 8"?> ?> strict.dtd"> > --> > e navigable. -- --> > Sets the id attribute for the h1 element --> > </h1> --> > <em>Favorite Bugs Favorite Bugs</em></a></p> </em></a></p> Creates a link to the element in this document with id = bugs </li> </li>
32 <li> 33 <li> 34 <li> 35 <li> 36 <ul> 37 <li> 38 39 <li> 40 <li> 41 <li> 42 </ul> 43 </li> 44 </ul> 45 </l </li> 46 47 <li> <li>Links 48 <li> <li>Keeping in touch with old friends Keeping in touch with old friends</li> 49 <li> <li>It is the technology of the future! It is the technology of the future!</li> 50 </ul> </ul> 51 52 <! <!-- -- id attribute creates an internal hyperlink destination id attribute creates an internal hyperlink destination -- 53 <h1 id = <h1 id = "bugs" "bugs"> >My 3 Favorite Bugs My 3 Favorite Bugs</h1> 54 <p> <p> 55 <! <!-- -- internal hyperlink to features internal hyperlink to features -- 56 <a href = <a href = "#features" "#features"> >Go Goto 57 </p> </p> 58 <ol> <ol> 59 <li> <li>Fire Fly Fire Fly</li> </li> 60 <li> <li>Gal Ant Gal Ant</li> </li> 61 <li> <li>Roman Tic Roman Tic</li> </li> 62 </ol> </ol> 63 </body> </body> 64 </html> </html> <li>Around the clock news Around the clock news</li> </li> <li>Search Engines Search Engines</li> </li> <li>Shopping Shopping</li> </li> <li>Programming Programming <ul> <li>XHTML XHTML</li> </li> <li> <li>Java Java</li> </li> <li>Dynamic HTML Dynamic HTML</li> </li> <li>Scripts Scripts</li> </li> <li>New languages New languages</li> </li> </ul> </li> Sets the id attribute for this h1 element </ul> i> Links</li> </li> </li> </li> --> > </h1> --> > to<em> <em>Favorite Features Favorite Features</em></a> </em></a> Creates a link to the element in this document with id = features
META ELEMENTS One way that search engines catalog pages, is by reading the meta element s contents. The name attribute identifies the type of meta element The content attribute keywords meta element: provides search engines with a list of words that describe a page, which are compared with words in search requests description meta element: provides a three- to four-line description of a site in sentence form, used by search engines to catalog your site. This text is sometimes displayed as part of the search result
1 <?xml version = <?xml version = "1.0" 2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC " "- -//W3C//DTD XHTML 1.0 Strict//EN" //W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1- -strict.dtd" 4 5 <! <!-- -- Fig. Fig. 4.15: meta.html 4.15: meta.html -- --> > 6 <! <!-- -- meta elements provide keywords and a desc meta elements provide keywords and a description of a page. 7 <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml" "http://www.w3.org/1999/xhtml"> > 8 <head> <head> 9 <title> <title>Welcome Welcome</title> </title> 10 11 <! <!-- -- <meta> tags provide search engines with <meta> tags provide search engines with -- 12 <! <!-- -- information used to catalog a site information used to catalog a site -- 13 <met <meta name = a name = "keywords" "keywords" content = content = "web page, design, 14 XHTML, tutorial, personal, help, index, form, XHTML, tutorial, personal, help, index, form, 15 contact, feedback, list, links, deitel" contact, feedback, list, links, deitel" /> 16 <meta name = <meta name = "description" "description"content = 17 help you learn the basics of XHTML and web page design help you learn the basics of XHTML and web page design 18 through the use of interactive examples and through the use of interactive examples and 19 instruction." instruction." /> /> 20 </head> </head> 21 <body> <body> 22 <h1 <h1> >Welcome to Our Website! Welcome to Our Website!</h1> 23 24 <p> <p>We have designed this site to teach about the wonders We have designed this site to teach about the wonders 25 of of <strong><em> <strong><em>XHTML XHTML</em></strong> </em></strong>. 26 better equipped than better equipped than <em> <em>HTML HTML</em> 27 data data on the Internet. on the Internet. <em> <em>XHTML 28 XML s strict syntax to ensure well XML s strict syntax to ensure well- -formedness. Soon you 29 will know about many of the great features of will know about many of the great features of 30 <em> <em>XHTML. XHTML.</em></p> </em></p> 31 32 <p> <p>Have Fun With the Site! Have Fun With the Site!</p 33 </body> </body> 34 </html> </html> "1.0" encoding = encoding = "utf "utf- -8" 8"?> ?> strict.dtd"> > ription of a page. -- --> > Provides keywords describing the page for a search engine --> > --> > "web page, design, /> content = "This website wi "This website will ll Provides the site s description in sentence form for a search engine </h1> . <em> <em>XHTML XHTML</em> </em> is is </em> to represent complex to represent complex XHTML</em> </em> takes advantage of takes advantage of formedness. Soon you </p> >
SOFTWARE ENGINEERING OBSERVATION meta elements are not visible to users and must be placed inside the head section of your XHTML document. If meta elements are not placed in this section, they will not be read by search engines.
