表單對齊，送給新手~

原創 咸菜一根 2020-06-21 08:18



這是一個右端的輸入框對齊，文字向右對齊的登錄表單，在DIV+CSS中控制它們還費了一點時間來折騰，下面整理出來讓大家瞭解，其中CSS要注意的幾個地方就是文中紅字的地方。

body {font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
input.required{border:#999 1px solid; height:16px; width:120px;}
label{text-align:right; float:left; width:60px;}
.sub{margin-left:50px;}
.int{margin:5px auto;}


下面是具體的編碼：


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單對齊</title>
<style type="text/css">
body {font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
input.required{border:#999 1px solid; height:16px; width:120px;}
label{text-align:right; width:60px; float:left;}
.sub{margin-left:50px;}
.int{margin:5px auto;}
</style>
</head>

<body>

<form method="post" action="#">
<div class="int">
<label for="username">用戶名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">郵　箱：</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="pefsoninfo">個人資料：</label>
<input type="text" id="pefsoninfo" class="required" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send" />
<input type="reset"  value="重置" id="res" />
</div>
</form>

</body>
</html>



下面再把一個複雜點的加進來：




基本的xhtml：

  1. <h3>已註冊用戶登錄</h3><span id="more-25"></span>
  2.    <form action="" method="post" id="Login">
  3.    <fieldset>
  4.    <legend>用戶登錄</legend>
  5.    <div>
  6.    <label for="Name">用戶名</label>
  7.    <input type="text" name="Name" id="Name" size="18" maxlength="30" /><br />
  8.    </div>
  9.    <div>
  10.    <label for="password">密碼</label>
  11.    <input type="password" name="password" id="password" size="18" maxlength="15" /><br />
  12.    </div>
  13.    <div class="cookiechk">
  14.    <label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="選擇是否記錄您的信息">記住我</a></label>
  15.    <input name="login791" type="submit" class="buttom" value="登錄" />
  16.    </div>
  17.    <div class="forgotpass"><a href="#">您忘記密碼?</a></div>
  18.    </fieldset>
  19.    </form>

看了代碼，發現標單描述文字都在< label >< /label >中，只要讓< label >< /label >標籤浮動左對齊，fieldset包含的< div >清除浮動，就可以實現我們常見的那類佈局。

下面是基本的CSS：

  1. fieldset label {
  2.    float:left;
  3.    width:120px;
  4.    text-align:right;
  5.    padding:4px;
  6.    margin:1px;
  7. }
  8. fieldset div {
  9.    clear:left;
  10.    margin-bottom:2px;
  11. }


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Form demo</title>
<style type="text/css">
<!--
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 solid #A4CDF2;
}
fieldset {
padding:10px;
margin-top:5px;
border:1px solid #A4CDF2;
background:#fff;
}
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
border:1px solid #A4CDF2;
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" id="Login">
<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="login" type="submit" class="buttom" value="登錄" />
</div>
<div class="forgotpass"><a href="#">您忘記密碼?</a></div>
</fieldset>
</form><br />
<h3>未註冊創建帳戶</h3>
<form action="" method="post" id="apForm">
<fieldset>
<legend>用戶註冊</legend>
<p><strong>您的電子郵箱不會被公佈出去,但是必須填寫.</strong> 在您註冊之前請先認真閱讀服務條款.</p>
<div>
<label for="Name">用戶名</label>
<input type="text" name="cr_Name" id="cr_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="password">密碼</label>
<input type="password" name="cr_password" id="cr_password" size="18" maxlength="15" />
*(最多15個字符)<br />
</div>
<div>
<label for="confirm_password">重複密碼</label>
<input type="password" name="confirm_password" id="confirm_password" 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>
<p><strong>* 在提交您的註冊信息時, 我們認爲您已經同意了我們的服務條款.<br />
* 這些條款可能在未經您同意的時候進行修改.</strong></p>
</fieldset>
</form>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章