HTML and CSS Reference
In-Depth Information
Adding the number and date input types
Go ahead and add the two new
<input>
elements to your “form.html” file, below the
bean type
<input>
s and above the Ship To fields, and give your new code a test drive.
<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>
We've added the new code
here. Remember that
browsers may display these
differently, depending on
which browser you're using.
Try more than one browser!
<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>
Turn the page to see the results of our test drive…
