ESHOP|IOS|IDC|E游通|E客通

网奇旗下产品

背景:
阅读新闻

用fieldset标签结合CSS Lable实现表单的布局

[日期:03-10] 来源:互联网  作者:xiaochen [字体: ]
  •   使用fieldset标签结合CSS的Lable标签实现表单的布局,以前听一些新手说,用CSS而布局表单真的有点难啊,其实是没找到方法,使用fieldset标签,再配合Lable可达到事半功倍的效果,而且布局出来的表单代码简洁、结构清淅,也便于修改,何不尝试一下呢?
      <!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>
      <title>CSS表单</title>
      <style>
      h1 {
      font: 1.2em Arial, Helvetica, sans-serif;
      }
      input.txt {
      color: #00008B;
      background-color: #E3F2F7;
      border: 1px inset #00008B;
      width: 200px;
      }
      input.btn {
      color: #00008B;
      background-color: #ADD8E6;
      border: 1px outset #00008B;
      }
      form p {
      clear: left;
      margin: 0;
      padding: 0;
      padding-top: 5px;
      }
      form p label {
      float: left;
      width: 30%;
      font: bold 0.9em Arial, Helvetica, sans-serif;
      }
      fieldset {
      border: 1px dotted #61B5CF;
      margin-top: 16px;
      padding: 10px;
      }
      legend {
      font: bold 0.8em Arial, Helvetica, sans-serif;
      color: #00008B;
      background-color: #FFFFFF;
      }
      .akey {
      text-decoration: underline;
      }
      </style>
      </head>
      <body>
      <h1>User Registration Form</h1>
      <form method="post" action="accesskeys.html">
      <fieldset>
      <legend><span class="akey">P</span>ersonal Information</legend>
      <p>
      <label for="fullname">Name:</label>
      <input type="text" name="fullname" id="fullname" class="txt" accesskey="p" />
      </p>
      <p>
      <label for="email">Email Address:</label>
      <input type="text" name="email" id="email" class="txt" />
      </p>
      <p>
      <label for="password1">Password:</label>
      <input type="password" name="password1" id="password1" class="txt" />
      </p>
      <p>
      <label for="password2">Confirm Password:</label>
      <input type="password" name="password2" id="password2" class="txt" />
      </p>
      </fieldset>
      <p>
      <input type="submit" name="btnSubmit" id="btnSubmit" value="Sign Up!" class="btn" />
      </p>
      </form>
      </body>
      </html>
  • 收藏 推荐 打印 | 录入: | 阅读:
    本文评论   查看全部评论 (0)
    表情: 表情 姓名: 字数
    点评:
           
    评论声明
    • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
    • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
    • 本站管理人员有权保留或删除其管辖留言中的任意内容
    • 本站有权在网站内转载或引用您的评论
    • 参与本评论即表明您已经阅读并接受上述条款
    热门评论