HTML and CSS Reference
In-Depth Information
Adding the select element
<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>
Inside, we put ea
ch <option>
element, one per
choice of coffee.
<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>
<input type="submit" value="Order Now">
</p>
</form>
HTML Up Close
Let's take a closer look at the
<option>
element.
E
ach
opti
on ha
s a
value
.
<option value="Guatemala">
Organic Guatemala
</option>
When the browser packages up the names
and values of the form elements, it uses
the name of the <select> element along
with the value of the chosen option.
In th
is case, the
browser wo
uld send
the s
erver beans
= “Guatem
ala”.
