美化表单

Code
  1<!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<!--
  8body {}{
  9font-family: Arial, Helvetica, sans-serif;
 10font-size:12px;
 11color:#666666;
 12background:#fff;
 13text-align:center;
 14}

 15{}{
 16margin:0;
 17padding:0;
 18}

 19
 20{}{
 21color:#1E7ACE;
 22text-decoration:none; 
 23}

 24a:hover {}{
 25color:#000;
 26text-decoration:underline;
 27}

 28h3 {}{
 29font-size:14px;
 30font-weight:bold;
 31}

 32
 33pre,p {}{
 34color:#1E7ACE;
 35margin:4px;
 36}

 37input, select,textarea {}{
 38padding:1px;
 39margin:2px;
 40font-size:11px;
 41}

 42.buttom{}{
 43padding:1px 10px;
 44font-size:12px;
 45border:1px #1E7ACE solid;
 46background:#D0F0FF;
 47}

 48#formwrapper {}{
 49width:450px;
 50margin:15px auto;
 51padding:20px;
 52text-align:left;
 53border:1px solid #A4CDF2;
 54}

 55fieldset {}{
 56padding:10px;
 57margin-top:5px;
 58border:1px solid #A4CDF2;
 59background:#fff;
 60}

 61fieldset legend {}{
 62color:#1E7ACE;
 63font-weight:bold;
 64padding:3px 20px 3px 20px;
 65border:1px solid #A4CDF2; 
 66background:#fff;
 67}

 68fieldset label {}{
 69float:left;
 70width:120px;
 71text-align:right;
 72padding:4px;
 73margin:1px;
 74}

 75fieldset div {}{
 76clear:left;
 77margin-bottom:2px;
 78}

 79.enter{}{ text-align:center;}
 80.clear {}{
 81clear: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      <href="#" title="选择是否记录您的信息">记住我</a></label>
106      <input name="login791" type="submit" class="buttom" value="登录" />
107    </div>
108    <div class="forgotpass"><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      <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

转载于:https://www.cnblogs.com/qqnnhhbb/archive/2008/07/03/1234862.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值