Chapter 14 HTML表单——实现交互
2019-03-23 本文已影响0人
Smnag
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Starbuzz Bean Machine</title>
<link rel="stylesheet" href="starbuzz.css">
<link rel="stylesheet" href="styledform.css">
</head>
<body>
<h1>The Starbuzz Bean Machine</h1>
<h2>Fill out the form below and click "order now" to order</h2>
<form action="http://www.starbuzzcoffee.com/processorder.php" method="post">/*------action属性包含服务器脚本的url*/
<div class="tableRow">
<p>
Choose your beans:
</p>
<p>
<select name="beans">/*------select为下拉菜单*/
<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>/*------radio为单选输入*/
<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>/*------number为数字输入*/
</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>/*------checkbox为复选框*/
<input type="checkbox" name="extras[]" value="catalog" checked>/*------checked为布尔属性，默认选择*/
Include catalog with order
</p>
</div>
<div class="tableRow">
<p class="heading"> Ship to </p>
<p></p>
</div>
<div class="tableRow">
<p> Name: </p>
<p> <input type="text" name="name" value="" placeholder="Buckaroo Banzai" required> </p>
</div>
<div class="tableRow">
<p> Address: </p>
<p> <input type="text" name="address" value="" placeholder="Banzai Institute" required> </p>
</div>
<div class="tableRow">
<p> City: </p>
<p> <input type="text" name="city" value="" placeholder="Los Angeles" required> </p>
</div>
<div class="tableRow">
<p> State: </p>
<p> <input type="text" name="state" value="" placeholder="CA" required> </p>
</div>
<div class="tableRow">
<p> Zip: </p>
<p> <input type="text" name="zip" value="" placeholder="90050" required> </p>
</div>
<div class="tableRow">
<p> Phone: </p>
<p> <input type="tel" name="phone" value="" placeholder="310-555-1212" required> </p>/*------tel仅允许数字输入，required为必填项*/
</div>
<div class="tableRow">
<p> Customer Comments: </p>
<p>
<textarea name="comments"></textarea>/*------textarea为多行输入*/
</p>
</div>
<div class="tableRow">
<p></p>
<p> <input type="submit" value="Order Now"> </p>
</div>
</form>
</body>
</html>
