首页 > 代码库 > 使用fieldset标签结合CSS Lable实现表单的布局

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

2024-07-18 03:34:45   217人阅读

  • 使用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>

 


联系
我们