代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单增加CSS样式</title>
<!-- -->
<style type="text/css">
body {
margin: 20px;
}
form {
/* 使用form利用表格显示布局来表示表格 */
/* 在表单周围增加一个边框,另外在表单内容和边框之间增加一些内边距,还增加了一个背景颜色,使他与背景区分开 */
display: table;
padding: 10px;
border: thin dotted #7e7e7e;
background-color: #e1ceb8;
}
form textarea {
width: 500px;
height: 200px;
}
.tableRow {
display: table-row;
}
div .tableRow p {
display: table-cell;
}
div .tableRow p :first-first-child {
text-align: right;
}
p .heading {
font-weight: bold;
}
</style>
</head>
<body>
<h1>The Starbuzz Bean Machine</h1>
<h2>Fill out the form below and click "order now" to order</h2>
<form action="http://starbuzzcoffee.com/processorder.php" method="post">
<div class="tableRow">
<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>
</div>
<div class="tableRow">
<p>Type:</p>
<p>
<input type="radio" name="beantype" id="" value="whole" checked="" />Whole bean <br>
<input type="radio" name="beantype" id="" value="ground" />Ground
</p>
</div>
<div class="tableRow">
<p>
Extras:
</p>
<p>
<input name="extras[]" type="checkbox" value="Gift" checked>Gift wrap <br>
<input name="extras[]" type="checkbox" value="catalog">Include catalog with order
</p>
</div>
<div class="tableRow">
<p>
Number of bags :
</p>
<p>
<input type="number" name="bags" id="" value="" min="1" max="10" />
</p>
</div>
<div class="tableRow label">
<p>
Must arrive by date:
</p>
<p>
<input type="date" name="date" id="" value="" />
</p>
</div>
<div class="tableRow">
<p>Ship to:
</p>
<p>
</p>
</div>
<div class="tableRow">
<div class="tableRow">
<p>Name:</p>
<p><input type="text" name="name" id="" value="" /> </p>
</div>
<div class="tableRow">
<p>Address:</p>
<p><input type="text" name="address" id="" value="" /> </p>
</div>
<div class="tableRow">
<p>City:</p>
<p> <input type="text" name="city" id="" value="" /> </p>
</div>
<div class="tableRow">
<p>State:</p>
<p> <input type="text" name="state" id="" value="" /> </p>
</div>
<div class="tableRow">
<p>Zip: </p>
<p><input type="text" name="zip" id="" value="" /> </p>
</div>
<div class="tableRow">
<p>Phone: </p>
<p><input type="tel" name="phone" id="" value="" /></p>
</div>
</div>
<div class="tableRow">
<p>Customer Comments:</p>
<p>
<textarea name="comments" rows="10" cols="50">
</textarea>
</p>
</div>
<div class="tableRow">
<p></p>
<p>
<input type="submit" name="" id="" value="Order Now" />
</p>
</div>
</form>
</body>
</html>
7114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
