HTML and CSS Reference
In-Depth Information
Adding the checkboxes and text area
You know the drill: look over the new HTML and add it to your “form.html”.
<form action="http://starbuzzcoffee.com/processorder.php" method="post">
<p>
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>
</select>
</p>
<p>
Type:
<br>
<input type="radio" name="beantype" value="whole">
Whole bean
<br>
<input type="radio" name="beantype" value="ground" checked>
Ground
</p>
<p>
Number of bags:
<input type="number" name="bags" min="1" max="10"></p>
<p>
Must arrive by date:
<input type="date" name="date"></p>
Here we've added a che
ckbox for each option.
Notice
that these share the sa
me name, “extras[]”…
<p>
Extras:
<br>
<input type="checkbox" name="extras[]" value="giftwrap">
Gift wrap
<br>
<input type="checkbox" name="extras[]" value="catalog" checked>
Include catalog
with order
</p>
As with
the
radio b
uttons,
we've p
ut
these la
bels to
the rig
ht of
the che
ckboxes
.
We're using the
checked attribute
to specify that
the catalog option
should be checked
by default. You
can add a checked
attribute to more
than one checkbox
.
<p>
Ship to:
<br>
Name:
<input type="text" name="name" value=""><br>
Address:
<input type="text" name="address" value=""><br>
City:
<input type="text" name="city" value=""><br>
State:
<input type="text" name="state" value=""><br>
Zip:
<input type="text" name="zip" value=""><br>
Phone:
<input type="tel" name="phone" value=""><br>
</p>
<p>
Customer Comments:
<br>
<textarea name="comments"></textarea>
</p>
<p>
<input type="submit" value="Order Now">
</p>
</form>
