HTML and CSS Reference
Back to getting those input elements into your HTML
Now we've got to get those <input> elements inside the form.
Check out the additions below, and then make the changes in
your “form.html” file.
W e're goin g to
st art by putt ing
e very thing ins ide
a <p> elem ent .
<form action="http://starbuzzcoffee.com/processorder.php" method="POST">
<p> Ship to: <br>
Name: <input type="text" name="name"> <br>
Address: <input type="text" name="address"> <br>
City: <input type="text" name="city"> <br>
State: <input type="text" name="state"> <br>
Zip: <input type="text" name="zip"> <br>
Phone: <input type="tel" name="phone"> <br>
<input type="submit" value="Order Now">
Here are all the
<input> e lements:
one for e ach
input in t he
“Ship to” section
of the f orm.
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.
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 valida te your H TML.
Form element s need va lidation t oo!