HTML and CSS Reference
In-Depth Information
Getting the form elements into HTML
structure for table display layout
Ready Bake
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="" method="post">
<div class="tableRow">
Choose your beans:
<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>
<div class="tableRow">
<p> Type: </p>
<input type="radio" name="beantype" value="whole"> Whole bean <br>
<input type="radio" name="beantype" value="ground" checked> Ground
<div class="tableRow">
<p> Number of bags: </p>
<p> <input type="number" name="bags" min="1" max="10"> </p>
<div class="tableRow label">
<p> Must arrive by date: </p>
<p> <input type="date" name="date"> </p>
<div class="tableRow">
<p> Extras: </p>
<input type="checkbox" name="extras[]" value="giftwrap"> Gift wrap <br>
<input type="checkbox" name="extras[]" value="catalog" checked>
Include catalog with order
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.
Search WWH ::

Custom Search