<!DOCTYPE html> <html> <head> <title>表单控件样式</title> <meta charset="utf-8"> <style type="text/css"> fieldset{ margin:1em 0; padding: 1em; border:1px solid #ccc; background-color: #d6d8d8; cursor: pointer; } fieldset legend{ font-weight: bold; font-size: 16px; } fieldset div label{ font-size: 14px; } .contact label,.comments label{ display: block; margin: 0.5em 0; } .information label{ float: left; width: 10em; } #lage,#lmonth,#lyear{ width:0; text-indent: -1000em; } #age{ width: 2em; } #year{ width: 4em; } .information{ position: relative; min-height: 180px; } .information div h2{ margin:2em 0; padding: 0; font-size: 14px; font-weight: normal; float: left; } .information .lcol{ position: absolute; top: 70px; left: 150px; } .information .col{ width: 8em; float: left; } .information:after{ clear: both; } .information .col label{ margin: 0.3em 0; } .information .col label input{ margin:0 0.5em; } .remember div label{ margin-right: 0.5em; } .remember div label input{ margin-right: 0.3em; } button{ width: 100px; height: 30px; border:1px solid #989898; border-radius: 6px; background-color: #c5e063; box-shadow: 2px 2px 2px #ccc; color: #fff; font-size: 14px; font-weight: bold; text-shadow: 1px 1px 1px #666; } </style> </head> <body> <form> <fieldset class="contact"> <legend>Your Contact Details</legend> <div> <label for="author">Name:<em class="required">(Required)</em></label> <input type="text" name="author" id="author"> </div> <div> <label for="email">Email Address:</label> <input type="text" name="email" id="email"> </div> <div> <label for="url">Web Address:</label> <input type="text" name="url" id="url"> </div> </fieldset> <fieldset class="comments"> <legend>Comments</legend> <div> <label for="message">Message:<em class="required">(Required)</em></label> <textarea name="message" id="message"></textarea> </div> </fieldset> <fieldset class="information"> <legend>Personal information</legend> <div> <label for="place">Place of Birth:</label> <select id="place"> <option value="1">USA</option> <option value="2">China</option> <option value="3">English</option> </select> </div> <div> <label for="date">Date of Birth:</label> <label for="age" id="lage">Age:</label> <input type="text" name="age" id="age"> <label for="month" id="lmonth">month of birth:</label> <select id="month"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> </select> <label for="year" id="lyear">year of birth:</label> <input type="text" name="year" id="year"> </div> <div class="color"> <h2>Favorite Color:</h2> <div class="lcol"> <div class="col"> <label><input type="checkbox" name="red" id="red">red</label> <label><input type="checkbox" name="yellow" id="yellow">yellow</label> <label><input type="checkbox" name="pink" id="pink">pink</label> <label><input type="checkbox" name="green" id="green">green</label> </div> <div class="col"> <label><input type="checkbox" name="orange" id="orange">orange</label> <label><input type="checkbox" name="purple" id="purple">purple</label> <label><input type="checkbox" name="blue" id="blue">blue</label> <label><input type="checkbox" name="other" id="other">other</label> </div> </div> </div> </fieldset> <fieldset class="remember"> <legend>Remember Me</legend> <div> <label for="yes"> <input type="radio" name="choice" id="yes">Yes</label> <label for="no"> <input type="radio" name="choice" id="no">No</label> </div> </fieldset> <!-- <input type="submit" value="submit"> --> <button type="submit">Book Now</button> </form> </body> </html>
