HTML and CSS Reference
In-Depth Information
Getting the form elements into HTML
structure for table display layout
Ready Bake
HTML
Now that you know how to organize the form elements in a table display layout,
you need to put your HTML writing skills to the test. So get typing!
Just kidding. We wouldn't make you type all this…after all, this chapter is really
about forms, not table display layout. We already typed this in for you; it's in the
file “styledform.html” in the “chapter14/starbuzz” folder. Even though it looks
complicated, it's really not that bad. We've added a few annotations below to point
out the main parts.
Here
's the
<form
> ele
ment;
we're
going
to us
e this
elem
ent fo
r the
“tabl
e”
part
of t
he dis
play.
<form action="http://starbuzzcoffee.com/processorder.php" method="post">
<div class="tableRow">
<p>
Choose your beans:
</p>
<p>
<select name="beans">
<option value="House Blend">
House Blend
</option>
<option value="Bolivia">
Shade Grown Bolivia Supremo
</option>
<option value="Guatemala">
Organic Guatemala
</option>
<option value="Kenya">
Kenya
</option>
</select>
</p>
</div>
<div class="tableRow">
<p>
Type:
</p>
<p>
<input type="radio" name="beantype" value="whole">
Whole bean
<br>
<input type="radio" name="beantype" value="ground" checked>
Ground
</p>
</div>
<div class="tableRow">
<p>
Number of bags:
</p>
<p> <input type="number" name="bags" min="1" max="10"> </p>
</div>
<div class="tableRow label">
<p>
Must arrive by date:
</p>
<p> <input type="date" name="date"> </p>
</div>
<div class="tableRow">
<p>
Extras:
</p>
<p>
<input type="checkbox" name="extras[]" value="giftwrap">
Gift wrap
<br>
<input type="checkbox" name="extras[]" value="catalog" checked>
Include catalog with order
</p>
</div>
And the content for each cell is
nested inside a <p> element.
For the b
ean selectio
n menu, the
“beantype”
radio
buttons,
and the “ex
tras” checkb
oxes, we put
all
the form
elements fo
r each menu
in one data
cell.
Code continues on the next page.
