挺不错的web表单:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Web表单</title>
<style type="text/css">
/**/
input {
background-color: #666699;
}
select {
background-color: #666699;
color: #ffffff;
}
textarea {
background-color: #666699;
color: #ffffff;
}
form {
border: 1px solid #666699;
padding: 5px;
}
.texta {
font-size: 12px;
background-color: #CCCCCC;
border: 1px solid #666666;
}
form#login {
background-color: #CCCCCC;
color: #000000;
border: 1px solid #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: right;
}
#login .text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 100px;
margin-right: 6px;
}
#login .buttons {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #333333;
color: #FFFFFF;
margin-right: 6px;
}
#signup table {
background-color: #F9FBFD;
color: #000000;
width: 440px;
border: 1px solid #D7E5F2;
border-collapse: collapse;
}
#signup td {
border: 1px solid #D7E5F2;
padding-left: 4px;
}
.labelcell {
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #3670A7;
background-color: transparent;
width: 220px;
}
.fieldcell {
background-color: #F2F7FB;
color: #000000;
text-align: right;
margin-right: 0px;
padding-right: 0px;
}
.smalllabelcell {
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: transparent;
color: #3670A7;
width: 100px;
}
.smallfieldcell {
background-color: #F2F7FB;
color: #000000;
text-align: right;
}
.fieldcell input {
width: 200px;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #D7E5F2;
color: #102132;
border: 1px solid #284279;
margin-right: 0px;
}
.smallfieldcell input {
width: 100px;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #D7E5F2;
color: #102132;
border: 1px solid #284279;
}
.smallfieldcell select {
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #D7E5F2;
color: #102132;
border: 1px solid #284279;
}
.button {
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #D7E5F2;
color: #102132;
margin-left: 12px;
margin-top: 3px;
margin-bottom: 2px;
}
</style>
</head>
<body>
<input name="" type="text" />
<input name="" type="radio" value="" />
<input name="" type="radio" value="" />
<input name="" type="button" />
<hr/>
<select name="">
<option>高达立马</option>
<option>新加坡</option>
<option>吐鲁番</option>
</select>
<hr/>
<textarea name="" cols="80" rows="5"></textarea>
<hr/>
<form action="" method="get">
<input name="" type="text" /><br/>
<input name="" type="button" value="提交"/>
</form>
<hr/>
<input name="textfield" type="text" class="texta" />
<hr/>
<form name="login" id="login" method="post" action="#">
<label>Username:
<input type="text" name="user" tabindex="1" class="text"/> <br/>
</label>
<label>Password:
<input type="password" name="password" tabindex="2" class="text"/> <br/>
<input type="submit" name="Submit" value="Submit" tabindex="3" class="buttons"/>
</label>
</form>
<hr/>
<form name="signup" id="signup" method="post" action="#">
<table>
<tr>
<td colspan="2" class="labelcell"><label for="name">Name</label></td>
<td colspan="2" class="fieldcell"> <input type="text" name="name" id="name" tabindex="1" /></td>
</tr>
<tr>
<td colspan="2" class="labelcell"><label for="address1">Address Line 1</label></td>
<td colspan="2" class="fieldcell"> <input type="text" name="address1" id="address2" tabindex="2" /></td>
</tr>
<tr>
<td colspan="2" class="labelcell"><label for="address2">Address Line 2</label></td>
<td colspan="2" class="fieldcell"> <input type="text" name="address2" id="address2" tabindex="3" /></td>
</tr>
<tr>
<td colspan="2" class="labelcell"><label for="city">City</label></td>
<td colspan="2" class="fieldcell"> <input type="text" name="city" id="city" tabindex="4" /></td>
</tr>
<tr>
<td class="smalllabelcell"><label for="state">State</label></td>
<td class="smallfieldcell"><select name="state" id="state" tabindex="5">
<option value="">-- Select ---</option>
<option value="AL" >Alabama</option>
<option value="AK" >Alaska</option>
</select></td>
<td class="smalllabelcell"><label for="zip">Zip</label></td>
<td class="smallfieldcell"> <input type="text" name="zip" id="zip" tabindex="6" /></td>
</tr>
<tr>
<td colspan="2" class="labelcell"><label for="email">Email Address</label></td>
<td colspan="2" class="fieldcell"><input type="text" name="email" id="email" tabindex="7" /></td>
</tr>
<tr>
<td colspan="4"><input type="submit" name="Submit" value="Submit" tabindex="8" class="button"/></td>
</tr>
</table>
</form>
</body>
</html>
效果图见附件
- 大小: 65 KB
分享到:
相关推荐
Web表单设计:点石成金的艺术.pdf
WEB表单设计++点石成金的艺术,搜集的好的东西拿出来大家一起分享
Web表单设计 创建高可用性的网页表单
Web表单高级技巧
Forms that work(Web表单设计 创建高可用性的网页表单)英文版.pdf )
WEB表单设计学习总结.docx
简单创建易用的web表单
超漂亮的WEB表单,niceforms2.0.有例子。
WEB表单验证控件for vs2008,包括全部源代码。
WEB表单验证控件一体化验证及实例,Validator目录中的是控件Validator.dll的源码,TestWeb为测试控件进行简单的表单验证实例
Leipi Form Design 是百度编辑器Ueditor第三方扩展,本文会详细讲述如何利用Ueditor开发Form ... 当然你也可以使用Umeditor或其它编辑器 表单设计器通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用!
两位作者通过丰富的实例,明确阐述了如何从表单的关系、对话和外观三层模型出发,设计出具有高可用性的优质网页表单,并通过可用性测试及早发现表单的潜在问题。通过阅读本书,读者能够了解到如何定义需求,如何提出...
表单,英文单词是Form,学习过VB的朋友一定不会陌生。...Form在这里译作“WEB表单”似乎有些不妥。“表单”这个词,在WEB程序员看来,总是和HTML里面的“Form”相混淆。“WEB表单”似乎翻译成“WEB页面”更加妥当一些。
介绍ASP.NET中的有效性验证控件和各种验证用户输入有效性的方法
很好的WEB表单设计ppt,结合多个网站实例,分析不同表单方式的优缺点,让你明白自己最需要的表单设计是什么样子的。
表单设计器通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用! php示例 http://formdesign.leipi.org/demo.html
非常强大而又完整的web表单验证程序,相信大家下载后不会吃亏的!
网页设计用户体验设计的分享与研究,网页设计用户体验设计的分享与研究,网页设计用户体验设计的分享与研究,网页设计用户体验设计的分享与研究,网页设计用户体验设计的分享与研究,网页设计用户体验设计的分享与...