基于css的表单模板
时间：2010-09-07 来源：龙轩
代码
/* General styles */
代码
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; border: #EEE 1px solid; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }
div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; }
div.errors p { margin: 0; }
div.errors p em { color: #C00; font-style: normal; font-weight: bold; }
div.form-container form p { margin: 0; }
div.form-container form p.note { margin-left: 170px; font-size: 90%; color: #aaa; }
div.form-container form fieldset { margin: 10px 0; padding: 10px; border: #DDD 1px solid; }
div.form-container form legend { font-weight: bold; color: #666; }
div.form-container form fieldset div { padding: 0.25em 0; }
div.form-container label,
div.form-container span.label { margin-right: 10px; padding-right: 10px; width: 150px; display: block; float: left; text-align: right; position: relative; }
div.form-container label.error,
div.form-container span.error { color: #C00; }
div.form-container label em,
div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
div.form-container input{ border: #999 1px solid; }
div.form-container input.error { border-color: #C00; background-color: #FEF;border-width:1px; }
div.form-container input:focus,
div.form-container input.error:focus,
div.form-container textarea:focus { background-color: #FFC; border-color: #FC6; }
div.form-container div.controlset label,
div.form-container div.controlset input { display: inline; float: none; }
div.form-container div.controlset div { margin-left: 170px; }
div.form-container div.buttonrow { margin-left: 180px; }
代码
<div id="wrapper"> <h2>基于css的表单模板</h2>
<div class="form-container">
<div class="errors">
<p><em>错误提示信息:</em></p>
<ul>
<li>用户名不能为空！</li>
<li>国家不能为空！</li>
</ul>
<p>表单 <strong>没有</strong> 保存成功.</p>
</div>
<form action="#" method="post">
<p class="legend"><strong>注意:</strong>带*号的为必填字段.(<em>*</em>)</p>
<fieldset>
<legend>用户基本信息</legend>
<div><label for="uname" class="error">用户名 <em>*</em></label> <input id="uname" type="text" name="uname" value="" class="error" /></div>
<div><label for="email">邮箱地址</label> <input id="email" type="text" name="email" value="" />
<p class="note">我们不会将你的邮箱告诉任何人. </p>
</div>
<div><label for="fname">称呼 <em>*</em></label> <input id="fname" type="text" name="fname" value="" size="50" /></div>
</fieldset>
<fieldset>
<legend>联系信息</legend>
<div><label for="address1">地址 1 <em>*</em></label> <input id="address1" type="text" size="50" /></div>
<div><label for="address2">地址 2</label> <input id="address2" type="text" size="50" /></div>
<div><label for="country" class="error">国家 <em>*</em></label> <input id="country" type="text" name="country" value="" class="error" size="12" />
<p class="note">请选择正确的国家信息.</p>
</div>
<div><label for="telephone">电话</label> <input id="telephone" type="text" size="3" /> - <input type="text" size="3" /> - <input type="text" size="4" />
<p class="note">(###) - ### - ####</p>
</div>
</fieldset>
<fieldset>
<legend>属性</legend>
<div>
<label for="type">类型 <em>*</em></label>
<select id="type">
<optgroup label="Type of Whatever">
<option>Corporate</option>
<option>Individual</option>
</optgroup>
</select>
</div>
<div class="controlset">
<span class="label">状态 <em>*</em></span>
<input name="approved" id="approved" value="1" type="checkbox" /> <label for="approved">Approved</label>
<input name="pending" id="pending" value="1" type="checkbox" /> <label for="pending">Pending Applications</label>
<input name="actives" id="actives" value="1" type="checkbox" /> <label for="actives">Active Service</label>
</div>
<div class="controlset">
<span class="label">本地设置</span>
<input name="radio1" id="radio1" value="1" type="radio" /> <label for="radio1">Option 1</label>
<input name="radio1" id="radio2" value="1" type="radio" /> <label for="radio2">Option 2</label>
<input name="radio1" id="radio3" value="1" type="radio" /> <label for="radio3">Option 3</label>
</div>
<div class="controlset">
<span class="label">其它 <em>*</em></span>
<div>
<input name="approved" id="check1" value="1" type="checkbox" /> <label for="check1">Some Option 1</label> <br />
<input name="pending" id="check2" value="1" type="checkbox" /> <label for="check2">Some Option 2</label> <br />
<input name="actives" id="check3" value="1" type="checkbox" /> <label for="check3">Some Option 3</label> <br />
</div>
</div>
</fieldset>
<fieldset>
<legend>首选项</legend>
<div>
<label for="desc">描述 <em>*</em></label>
<textarea id="desc" name="desc" cols="30" rows="4"></textarea>
</div>
<div>
<label for="info">地址信息</label>
<textarea id="info" name="info" cols="40" rows="5"></textarea>
</div>
</fieldset>
<div class="buttonrow">
<input type="submit" value="提交" class="button" />
</div>
</form>
</div><!-- /form-container -->
<p id="copyright">
这是一个基本的表单模板，更多请看：<a href="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/" title="Nidahas: Forms markup and CSS - Revisited">this blog article</a>.</p>
<br/>
</div><!-- /wrapper -->
转载：http://cssrain.cn/demo/cssSkill/表单模板/demo.html
相关阅读 更多 +
