14.14. Back to getting those <input> elements into your XHTML
Now we've got to get those <input> elements inside the form. Check out the additions below, and then make the changes in
<form action="http://www.starbuzzcoffee.com/processorder.php" method="POST">Here's JUST the form snippet from "form.html". Hey, we've got to save a few trees here! <p>Ship to: <br />We're going to start by putting everything inside a <p> element.You can only nest block elements directly inside a form. Name: <input type="text" name="name" /> <br /> Address: <input type="text" name="address" /> <br /> City: <input type="text" name="city" /> <br />Here are all the <input> elements: one for each text input in the "Ship to" section of the form. State: <input type="text" name="state" /> <br /> Zip: <input type="text" name="zip" /> <br />We've added a label for each input so the user knows what goes in the text input.And you should also know that <input> is an inline element, so if you want some linebreaks between the <input> elements, you have to add <br />s. That's also why you need to nest them all inside a paragraph. </p> <p> <input type="submit" value="Order Now" /> </p> </form> Finally, don't forget that users need a submit button to submit the form. So add a submit button by inserting an <input> at the bottom with a type of "submit". Also add a value of "Order Now", which will change the text of the button from "Submit" to "Order Now".
After you've made all these changes, save your "form.html" file and let's give this a whirl.
Don't forget to validate your XHTML. Forms elements need validation too!
|
No comments:
Post a Comment