Smashing HTML5

Page 303

CHAPTER 14: ADDING FORMS h3 { font-family:”Arial Black”, Gadget, sans-serif; color:#97CCA6; } body { font-family:Verdana, Geneva, sans-serif; color:#EFF09E; background-color:#AB1F33; } </style> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Remote Form Inputs</title> </head> <body > <article> <header> <h3>IDs to Connect</h3> </header> <section> What is your very favorite Web site?<br> <label>Favorite Site: <input type=url form=formID name=favURL> </label> </section> <section> <blockquote> This section represents a break between the first input (requesting a URL) and the rest of the form to which the URL form belongs. This gives designers

289

far more leeway in putting together an interactive site. </blockquote> </section> <section> <form name=formName id=formID> <label>What’s your name? <input type=text name=person> </label> <br> Output:<br> <textarea name=output cols=50 rows=5></textarea> <br> <input type=submit name=submit value=”Gather in the Chickens” onClick=”FormMaster.resolveForm()”> </form> </section> </article> </body> </html>

Notice that inside the <form> container with the name=formName and id=formID is a single input element, a <textarea> tag and a Submit button. More important, though, notice that the input element with the name=favURL is outside of the form container. However, it assigns itself the id of the form on the page — formID. In HTML5, it’s treated as though it were inside the <form> container. Figure 14-2 shows that the data entered in the

21_977279-ch14.indd 289

10/28/10 10:14 PM


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.