Monday, January 25, 2010

Section 14.14. Back to getting those <input> elements into your XHTML










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: