<html>
<head>
<title>form.html</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:15px;
}
#loginForm fieldset{
padding:0 10px 10px;
border:1px #D0D0BF solid;
}
<head>
<title>form.html</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:15px;
}
#loginForm fieldset{
padding:0 10px 10px;
border:1px #D0D0BF solid;
}
#loginForm fieldset div{
padding:2px;
}
#loginForm .dataArea input{
width:150px;
padding:2px;/*增加文本框的高度*/
border:1px #7F9DB9 solid;
}
#loginForm .first{
padding:12px 2px 2px;
}
#loginForm .otherArea{
padding-left:48px;
font-size:75%;
}
#loginForm .subArea{
padding-left:48px;
font-size:12px;
}
#loginForm .subArea input{
border:1px #003C74 solid;/*這裏是按鈕邊框明顯的深藍色邊框*/
outline:1px #F1EFEB solid;/*在深藍色邊框外面注意看時會發現還有條很淡的邊，這裏用
outline來完成效果，不過outline只能四個邊同時出現，並且只能是同一種樣式的，勉強先頂着用。*/
padding:1px 4px;/*這裏使用padding方式來增加空白*/
}
</style>
</head>
<body>
<form id ="loginForm">
<fieldset>
<legend>用戶登陸</legend>
<div class="dataArea first">
<label for="username">用戶：</label>
<input type="text" id="username" name="username" />
</div>
<div class="dataArea">
<label for="password">密碼：</label>
<input type="password" name="password" id="password" />
</div>
<div class="otherArea">
<input type="checkbox" id="persistent" />
<label for="persistent">在此計算機上保存我的信息</label>
</div>
<div class="subArea">
<input type="submit" value="登錄" /> <input type="reset" value="重置" />
</div>
</fieldset>
</form> <br><br><br>
<p><a href="register.html">註冊頁面</a></p>
</body>
</html>
padding:2px;
}
#loginForm .dataArea input{
width:150px;
padding:2px;/*增加文本框的高度*/
border:1px #7F9DB9 solid;
}
#loginForm .first{
padding:12px 2px 2px;
}
#loginForm .otherArea{
padding-left:48px;
font-size:75%;
}
#loginForm .subArea{
padding-left:48px;
font-size:12px;
}
#loginForm .subArea input{
border:1px #003C74 solid;/*這裏是按鈕邊框明顯的深藍色邊框*/
outline:1px #F1EFEB solid;/*在深藍色邊框外面注意看時會發現還有條很淡的邊，這裏用
outline來完成效果，不過outline只能四個邊同時出現，並且只能是同一種樣式的，勉強先頂着用。*/
padding:1px 4px;/*這裏使用padding方式來增加空白*/
}
</style>
</head>
<body>
<form id ="loginForm">
<fieldset>
<legend>用戶登陸</legend>
<div class="dataArea first">
<label for="username">用戶：</label>
<input type="text" id="username" name="username" />
</div>
<div class="dataArea">
<label for="password">密碼：</label>
<input type="password" name="password" id="password" />
</div>
<div class="otherArea">
<input type="checkbox" id="persistent" />
<label for="persistent">在此計算機上保存我的信息</label>
</div>
<div class="subArea">
<input type="submit" value="登錄" /> <input type="reset" value="重置" />
</div>
</fieldset>
</form> <br><br><br>
<p><a href="register.html">註冊頁面</a></p>
</body>
</html>