CSS制作一个符合w3c标准的表单 - 容我织梦

上一篇：最优的CSS代码书写顺序下一篇：用CSS实现一个星级评定的效果

CSS制作一个符合w3c标准的表单

2009/06/17 | 19:22分类：Css | 标签：Css、form、w3c、表单 | 210 views

<style type="text/css"> form { margin: 0; padding: 0; } fieldset { margin: 1em 0; border: none; border-top: 1px solid #ccc; } legend { margin: 1em 0; padding: 0 .5em; color: #036; background: transparent; font-size: 1.3em; font-weight: bold; } label { float: left; width: 100px; padding: 0 1em; text-align: right; } fieldset div { margin-bottom: .5em; padding: 0; display: block; } fieldset div input, fieldset div textarea { width: 150px; border-top: 1px solid #555; border-left: 1px solid #555; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 1px; color: #333; } fieldset div select { padding: 1px; } div.fm-multi div { margin: 5px 0; } div.fm-multi input { width: 1em; } div.fm-multi label { display: block; width: 200px; padding-left: 5em; text-align: left; } #fm-submit { clear: both; padding-top: 1em; text-align: center; } #fm-submit input { border: 1px solid #333; padding: 2px 1em; background: #555; color: #fff; font-size: 100%; } input:focus, textarea:focus { background: #efefef; color: #000; } /* required fields - does not work in IE */ fieldset div.fm-req { font-weight: bold; } fieldset div.fm-req label:before { content: "* "; /* does not work in IE */ } /* Basic page styling, not part of the form example */ body { padding: 0; margin: 20px; color: #333; background: #fff; font: 12px arial,verdana,sans-serif; text-align: center; } #container { margin: 0 auto; padding: 1em; width: 350px; text-align: left; } p#fm-intro { margin: 0; } </style> <body> <h3>Standard Form Layout</h3> <div id="container">  <p id="fm-intro">Fields in <strong>bold</strong> are required.</p> <form id="fm-form" method="post" action="http://www.stylephreak.com/index.php/archives/2004/08/standard-forms/" > <fieldset> <legend>Personal information</legend> <div class="fm-req"> <label for="fm-firstname">First name:</label> <input name="fm-firstname" id="fm-firstname" type="text" /> </div> <div class="fm-opt"> <label for="fm-middlename">Middle name:</label> <input id="fm-middlename" name="fm-middlename" type="text" /> </div> <div class="fm-req"> <label for="fm-lastname">Last name:</label> <input name="fm-lastname" id="fm-lastname" type="text" /> </div> </fieldset> <fieldset> <legend>Address </legend> <div class="fm-opt"> <label for="fm-addr">Address:</label> <input id="fm-addr" name="fm-addr" type="text" /> </div> <div class="fm-opt"> <label for="fm-city">City or Town:</label> <input id="fm-city" name="fm-city" type="text" /> </div> <div class="fm-opt"> <label for="fm-state">State:</label> <select id="fm-state" name="fm-state"> <option value="" selected="selected">Choose a State</option> <option value="UNK">Outside US / Canada</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AB">Alberta</option> <option value="AS">American Samoa</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="AA">Armed Forces Americas</option> <option value="AE">Armed Forces Europe</option> <option value="AP">Armed Forces Pacific</option> <option value="BC">British Columbia</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="GU">Guam</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MB">Manitoba</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NB">New Brunswick</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NF">Newfoundland</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="MP">Northern Mariana Is</option> <option value="NT">Northwest Territories</option> <option value="NS">Nova Scotia</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="ON">Ontario</option> <option value="OR">Oregon</option> <option value="PW">Palau</option> <option value="PA">Pennsylvania</option> <option value="PE">Prince Edward Island</option> <option value="PQ">Province du Quebec</option> <option value="PR">Puerto Rico</option> <option value="RI">Rhode Island</option> <option value="SK">Saskatchewan</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VI">Virgin Islands</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> <option value="YT">Yukon Territory</option> </select> </div> <div class="fm-req"> <label for="fm-zipcode">Zip code:</label> <input id="fm-zipcode" name="fm-zipcode" type="text" /> </div> </fieldset> <fieldset> <legend>Contact information</legend> <div class="fm-req"> <label for="fm-telephone">Telephone:</label> <input id="fm-telephone" name="fm-telephone" type="text" title="Enter Phone Number in xxx-xxx-xxxx format" /> </div> <div class="fm-opt"> <label for="fm-fax">Fax:</label> <input id="fm-fax" name="fm-fax" type="text" title="Enter Fax Number in xxx-xxx-xxxx format" /> </div> <div class="fm-opt"> <label for="fm-mobile">Mobile:</label> <input id="fm-mobile" name="fm-mobile" type="text" /> </div> <div class="fm-req"> <label for="fm-email">Email:</label> <input id="fm-email" name="fm-email" type="text" tabindex="" /> </div> <div class="fm-opt"> <label for="fm-url">Web site address:</label> <input id="fm-url" name="fm-url" type="text" /> </div> <div class="fm-opt"> <label for="fm-comments">Comments:</label> <textarea name="fm-comments" cols="10" rows="5" id="fm-comments"></textarea> </div> <div class="fm-multi"> <div class="fm-opt"> <p>Would you like to be notified of future updates?</p> <label for="fm-newsopt-yes"> <input name="fm-newsopt" type="radio" id="fm-newsopt-yes" value="yes" checked="checked" /> Yes</label> <label for="fm-newsopt-no"> <input id="fm-newsopt-no" name="fm-newsopt" type="radio" value="no" /> No</label> </div> </div> </fieldset> <div id="fm-submit" class="fm-req"> <input name="Submit" value="Submit" type="submit" /> </div> <br /> <div style="text-align: center;" class="fm-req"><a href="#">Back to {style:phreak;}</a></div> </form> </div> </body>

提示：你可以先修改部分代码再运行。

喜欢本文，那就收藏到：

Del.icio.us

Google书签

Digg

Live Bookmark

Technorati

Furl

Yahoo书签

百度搜藏

新浪ViVi

365Key网摘

天极网摘

和讯网摘

博拉网

POCO网摘

添加到饭否

QQ书签

Digbuzz我挖网

相关日志

随机日志

发表您的评论