一个具体例子将、、、、、、、一并练习。</p> <pre><code><!-- HTML --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pratice</title> <link rel="stylesheet" href="copy.css"> </head> <body> <h1>The Starbuzz Bean Machine</h1> <h2>Fill out the form below and click "order now" to order</h2> <form action="" method="post"> <fieldset> <legend>Order details</legend> <div class="tableRow"> <label for="beans">Choose your beans:</label> <select id="beans" 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> </div> <div class="tableRow"> <label>Type:</label> <p> <input type="radio" id="whole_beantype" name="beantype" value="whole" > <label for="whole_beantype">Whole bean</label><br> <input type="radio" id="ground_beantype" name="beantype" value="ground"> <label for="ground_beantype">Ground</label> </p> </div> <div class="tableRow"> <label for="bags">Number of bags:</label> <input type="Number" name="bags" id="bags" min="1" max="10"> </div> <div class="tableRow"> <label for="date">Must arrive by date:</label> <input type="date" name="date"> </div> <div class="tableRow"> <label>Extras:</label> <p> <input type="checkbox" id="giftwrap_extras"> <label for="giftwrap_extras">Gift wrap</label> <input type="checkbox" id="catalog_extras"> <label for="catalog_extras">Include catalog with order</label> </p> </div> </fieldset> <fieldset> <legend>Ship to</legend> <div class="tableRow"> <label for="name">Name:</label> <input type="text" name="name" placeholder="liming" required> </div> <div class="tableRow"> <label for="address">Address:</label> <input type="text" id="address" placeholder="zhengzhou" required> </div> <div class="tableRow"> <label for="city">City:</label> <input type="text" id="city" placeholder="henan" required> </div> <div class="tableRow"> <label for="state">State:</label> <input type="text" id="state" placeholder="China" > </div> <div class="tableRow"> <label for="zip">Zip:</label> <input type="text" id="zip" placeholder="450000" required> </div> <div class="tableRow"> <label for="phone">Phone:</label> <input type="tel" id="phone" placeholder="12332112345" required> </div> <div class="tableRow"> <label for="comments">Customer Comments:</label> <textarea id="comments" name="comments">
