美化表单
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>Form demo</title>6
<style type="text/css">
7
<!--8
body {}{9
font-family: Arial, Helvetica, sans-serif;10
font-size:12px;11
color:#666666;12
background:#fff;13
text-align:center;14
}15
* {}{16
margin:0;17
padding:0;18
}19
20
a {}{21
color:#1E7ACE;22
text-decoration:none; 23
}24
a:hover {}{25
color:#000;26
text-decoration:underline;27
}28
h3 {}{29
font-size:14px;30
font-weight:bold;31
}32
33
pre,p {}{34
color:#1E7ACE;35
margin:4px;36
}37
input, select,textarea {}{38
padding:1px;39
margin:2px;40
font-size:11px;41
}42
.buttom{}{43
padding:1px 10px;44
font-size:12px;45
border:1px #1E7ACE solid;46
background:#D0F0FF;47
}48
#formwrapper {}{49
width:450px;50
margin:15px auto;51
padding:20px;52
text-align:left;53
border:1px solid #A4CDF2;54
}55
fieldset {}{56
padding:10px;57
margin-top:5px;58
border:1px solid #A4CDF2;59
background:#fff;60
}61
fieldset legend {}{62
color:#1E7ACE;63
font-weight:bold;64
padding:3px 20px 3px 20px;65
border:1px solid #A4CDF2; 66
background:#fff;67
}68
fieldset label {}{69
float:left;70
width:120px;71
text-align:right;72
padding:4px;73
margin:1px;74
}75
fieldset div {}{76
clear:left;77
margin-bottom:2px;78
}79
.enter{}{ text-align:center;}80
.clear {}{81
clear:both;82
}83
-->84
</style>85
</head>86
<body>87
<div id="formwrapper">88
<h3>已注册用户登录</h3>89
<form action="" method="post" name="apLogin" id="apLogin">90
<fieldset>91
<legend>用户登录</legend>92
<div>93
<label for="Name">用户名</label>94
<input type="text" name="Name" id="Name" size="18" maxlength="30" />95
<br/>96
</div>97
<div>98
<label for="password">密码</label>99
<input type="password" name="password" id="password" size="18" maxlength="30" />100
<br/>101
</div>102
<div class="cookiechk">103
<label>104
<input type="checkbox" name="CookieYN" id="CookieYN" value="1" />105
<a href="#" title="选择是否记录您的信息">记住我</a></label>106
<input name="login791" type="submit" class="buttom" value="登录" />107
</div>108
<div class="forgotpass"><a href="#">您忘记密码?</a></div>109
</fieldset>110
</form>111
<br/>112
<h3>未注册创建帐户</h3>113
<form action="" method="post" name="apForm" id="apForm">114
<fieldset>115
<legend>用户注册</legend>116
<p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong> 在您注册之前请先认真阅读服务条款.</p>117
<div>118
<label for="Name">用户名</label>119
<input type="text" name="Name" id="Name" value="" size="20" maxlength="30" />120
*(最多30个字符)<br/>121
</div>122
<div>123
<label for="Email">电子邮箱</label>124
<input type="text" name="Email" id="Email" value="" size="20" maxlength="150" />125
*<br/>126
</div>127
<div>128
<label for="password">密码</label>129
<input type="password" name="password" id="password" size="18" maxlength="15" />130
*(最多15个字符)<br/>131
</div>132
<div>133
<label for="confirm_password">重复密码</label>134
<input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />135
*<br/>136
</div>137
<div>138
<label for="AgreeToTerms">同意服务条款</label>139
<input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />140
<a href="#" title="您是否同意服务条款">先看看条款？</a> * </div>141
<div class="enter">142
<input name="create791" type="submit" class="buttom" value="提交" />143
<input name="Submit" type="reset" class="buttom" value="重置" />144
</div>145
<p><strong>* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.<br/>146
* 这些条款可能在未经您同意的时候进行修改.</strong></p>147
</fieldset>148
</form>149
</div>150
<p>151
<fieldset>152
<legend>sdf</legend>153
</fieldset>154
</p>155
</body>156
</html>157
