网页设计网站制作用css制作表单并体验亲和力_网站制作 -网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

北京网站制作XHTML 和 DOCTYPE 切换
 北京网页设计解决风讯限制的最多允许建立50个样式问题。
北京网页设计精彩网页九“慎”
网站设计Dreamweaver查找替换的技巧
 网站制作关于RSS:共享内容简易方式
 北京网站设计Flash MX 2004 功能介绍（2）
企通互联制作简单实用的FLASH导航菜单（2）
网站设计《大话李白》创作全过程
 北京网页设计Flash项目文件管理方式
 北京网站制作DreamWeaver,经典50问(1)

品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!

友好连接

文章搜索

你的位置：首页 >> 网站制作 >> 网页设计网站制作用css制作表单并体验亲和力

网页设计网站制作用css制作表单并体验亲和力

作者：北京网站建设日期：2008-03-27 06:03:34 来源： http://www.qt-net.com

对于表单，很常用。但是在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"> 企通互联网站设计
   <label><input 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 X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.0 Strict//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1-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</a>ns="http://www.w3.org/1999/x<a 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" />
<title>Form 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>

<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="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>">密码</label>
   <input type="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>" name="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word <a href="http://www.qt-net.com" target="_blank">www.qt-net.com</a>教程">word</a>" id="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>" size="18" maxlength="15" /><br />
  </div>
  <div class="cookiechk">
   <label><input 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><br />
 <h3>未注册创建帐户</h3>
 <form action="" method="post" name="apForm" id="apForm">
 <fieldset>
  <legend>用户注册</legend>
  <p><strong>您的电子邮箱不会被公布出去,但是必须填写.</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="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>">密码</label>
  <input type="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word <a href="http://www.qt-net.com" target="_blank">网站建设</a>教程">word</a>" name="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>" id="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>" size="18" maxlength="15" /> 
  *(最多15个字符)<br />
 </div>
  <div>
  <label for="confirm_pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>">重复密码</label>
  <input type="pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>" name="confirm_pass<a href="http://www.blue1000.com/bkhtml/c117/" title="Word教程">word</a>" id="confirm_pass<a 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=" <a href="http://www.qt-net.com" target="_blank">网站设计</a>提交" />
     <input name="Submit" type="reset" class="buttom" value="重置 <a href="http://www.qt-net.com" target="_blank">北京网站设计</a>" />
 </div>

<p><strong>* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.<br /> 
     * 这些条款可能在未经您同意的时候进行修改.</strong></p> 
 </fieldset>
 </form>
</div>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>

北京网站建设
——您可以运行代码察看特效，您也可以复制或者另存源代码。本代码由天极网页陶吧提供。

北京网站建设

字体：【大】【中】【小】

上一篇：北京网页设计避免表格table被撑开变形的CSS

下一篇：北京网站制作相册的自动播放效果SlideShow

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!

网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

http://www.qt-net.com 网站建设咨询热线：010-65587978/77/76/75

相关文章

品牌理念

友好连接

文章搜索

网页设计网站制作用css制作表单并体验亲和力