用css制作表单并体验亲和力

【 tulaoshi.com - Web开发 】

对于表单，很常用。但是在web standard建站的时候，他的排版往往让人遗忘，到了真正用到的时候就发现让人头疼，当然我也遇到过。我现在要介绍一个用fieldset/label标签制作漂亮而且具体亲和力的表单的方法。

基本的xHTML:

h3已注册用户登录/h3
 form action="" method="post" name="apLogin" id="apLogin"
 fieldset
  legend用户登录/legend
  div
   label for="Name"用户名/label
   input type="text" name="Name" id="Name" size="18" maxlength="30" /br /
  /div
  div
   label for="password"密码/label
   input type="password" name="password" id="password" size="18" maxlength="15" /br /
  /div
  div class="cookiechk"
   labelinput type="checkbox" name="CookieYN" id="CookieYN" value="1" / a href="#" title="选择是否记录您的信息"记住我/a/label
   input name="login791" type="submit" class="buttom" value="登录" /
  /div
  div class="forgotpass"a href="#"您忘记密码？/a/div
 /fieldset
 /form

看了代码，发现标单描述文字都在label/label中，只要让label/label标签浮动左对齐，fieldset包含的div清除浮动，就可以实现我们常见的那类布局。

下面是基本的CSS：

!DOCTYPE a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程"HTML/a PUBLIC "-//W3C//DTD Xa href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程"HTML/a 1.0 Strict//EN" "http://www.w3.org/TR/xa href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程"HTML/a1/DTD/xa href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程"HTML/a1-strict.dtd"
a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程"HTML/a a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程"XML/ans="http://www.w3.org/1999/xa href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程"HTML/a"
head
meta http-equiv="Content-Type" content="text/a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程"HTML/a; charset=gb2312" /
titleForm demo/title
style type="text/a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程"CSS/a"
!--
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#666666;
 background:#fff;
 text-align:center;

}

* {
 margin:0;
 padding:0;
}

a {
 color:#1E7ACE;
 text-decoration:none;
}

a:hover {
 color:#000;
 text-decoration:underline;
}
h3 {
 font-size:14px;
 font-weight:bold;
}

pre,p {
 color:#1E7ACE;
 margin:4px;
}
input, select,textarea {
 padding:1px;
 margin:2px;
 font-size:11px;
}
.buttom{
 padding:1px 10px;
 font-size:12px;
 border:1px #1E7ACE solid;
 background:#D0F0FF;
}
#formwrapper {
 width:450px;
 margin:15px auto;
 padding:20px;
 text-align:left;
 border:1px #1E7ACE solid;
}

fieldset {
 padding:10px;
 margin-top:5px;
 border:1px solid #1E7ACE;
 background:#fff;
}

fieldset legend {
 color:#1E7ACE;
 font-weight:bold;
 padding:3px 20px 3px 20px;
 border:1px solid #1E7ACE;
 background:#fff;
}

fieldset label {
 float:left;
 width:120px;
 text-align:right;
 padding:4px;
 margin:1px;
}

fieldset div {
 clear:left;
 margin-bottom:2px;
}

.enter{ text-align:center;}
.clear {
 clear:both;
}

--
/style
/head

body
div id="formwrapper"

h3已注册用户登录/h3
 form action="" method="post" name="apLogin" id="apLogin"
 fieldset
  legend用户登录/legend
  div
   label for="Name"用户名/label
   input type="text" name="Name" id="Name" size="18" maxlength="30" /br /
  /div
  div
   label for="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a"密码/label
   input type="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" name="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" id="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" size="18" maxlength="15" /br /
  /div
  div class="cookiechk"
   labelinput type="checkbox" name="CookieYN" id="CookieYN" value="1" / a href="#" title="选择是否记录您的信息"记住我/a/label
   input name="login791" type="submit" class="buttom" value="登录" /
  /div
  div class="forgotpass"a href="#"您忘记密码？/a/div
 /fieldset
 /formbr /
 h3未注册创建帐户/h3
 form action="" method="post" name="apForm" id="apForm"
 fieldset
  legend用户注册/legend
  pstrong您的电子邮箱不会被公布出去,但是必须填写./strong 在您注册之前请先认真阅读服务条款./p
  div
  label for="Name"用户名/label
  input type="text" name="Name" id="Name" value="" size="20" maxlength="30" /
  *(最多30个字符)br /
 /div
  div
  label for="Email"电子邮箱/label
  input type="text" name="Email" id="Email" value="" size="20" maxlength="150" / *br /
 /div
  div
  label for="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a"密码/label
  input type="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" name="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" id="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" size="18" maxlength="15" /
  *(最多15个字符)br /
 /div
  div
  label for="confirm_passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a"重复密码/label
  input type="passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" name="confirm_passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" id="confirm_passa href="http://www.blue1000.com/bkhtml/c117/" title="Word教程"word/a" size="18" maxlength="15" /
  *br /

 /div
  div
  label for="AgreeToTerms"同意服务条款/label
      input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" /
      a href="#" title="您是否同意服务条款"先看看条款？/a * /div 
  div class="enter"
     input name="create791" type="submit" class="buttom" value="提交" /
     input name="Submit" type="reset" class="buttom" value="重置" /
 /div

  pstrong* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.br /
     * 这些条款可能在未经您同意的时候进行修改./strong/p
 /fieldset
 /form
/div
/body
/a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程"HTML/a
运行代码复制代码另存代码 ——您可以运行代码察看特效，您也可以复制或者另存源代码。本代码由天极网页陶吧提供。