第8章：表單效果
8.1 深入radio(單選框)和checkbox(復選框)
- 開發頁面表單經常遇到的一個問題就是，單/復選框與文字垂直居中不對齊，這是因為單/復選框與文字默認以
vertical-align:baseline方式垂直對齊的。
- 解決方法也很簡單，根據元素的font-size，通過調整單/復選框的
vertical-align向下偏移即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input{
vertical-align: -2px;
}
</style>
</head>
<body>
<p style="font-size: 14px;">
<input type="radio">
<label>香蕉</label>
</input>
<input type="radio">
<label>蘋果</label>
</input>
</p>
</body>
</html>
8.2 深入textarea(多行文本框)
8.2.1 textarea固定大小并禁止拖動
<style type="text/css">
/*方式一：通過限制最大寬度和高度來限定拖動，右下角的圖標還在*/
textarea.settingMax{
max-width: 200px;
max-height: 100px;
}
/*方式二：通過resize:none徹底禁用拖動，右下角圖標不在*/
textarea.disableSize{
resize: none;
}
/*方法三：通過固定寬高限制多行文本框，右下角圖標還在*/
textarea.settingSize{
width: 200px;
height: 100px;
max-width: 200px;
max-height: 100px;
min-width: 200px;
min-height: 100px;
}
</style>
<textarea class="settingMax" cols="20" rows="3"></textarea>
<textarea class="disableSize" cols="20" rows="3"></textarea>
<textarea class="settingSize" cols="20" rows="3"></textarea>
8.2.2 textarea在不同瀏覽器內核保持外觀一致
- 不同的瀏覽器下多行文本框的外觀顯示不一致，主要有兩種情況：
-
textarea可以通過cols和rows屬性來控制多行文本框的列數和行數，但IE和Chrome/Firefox瀏覽器上，顯示的行數和列數是不一樣的；
- 另外，默認情況IE瀏覽器下顯示多行文本框有滾動條，而Chrome和Firefox下不顯示滾動條；
textarea{
/*第一步：通過寬高定義textarea的大小*/
width: 200px;
height: 100px;
/*第二步：通過設置overflow屬性定義textarea滾動條自適應*/
overflow: auto;
}
8.3 實現表單對齊
- 表單對齊是前端開發經常遇到的，很多大型網站包括百度、京東、騰訊已經有了成熟的解決方案：
- 把表單每一行分為左右兩欄的布局。保持左側欄的元素（通常只有
<label>標簽）長度一樣，并保持右側所有元素的總長度一樣。最后每一行的總長度一樣；
- 設置左側的元素
text-align:right文本居右；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陸</title>
<style type="text/css">
form{
width: 320px;
font-family: arial;
font-size: 14px;
font-weight: bold;
}
p{overflow: hidden;}
label{
float: left;
width: 60px;
height: 20px;
line-height: 20px;
text-align: right;
padding-right: 10px;
}
input{
float: left;
height: 15px;
padding: 5px;
border: 1px solid silver;
}
#phone,#password{
width: 228px;
}
#verifyCode{
width: 118px;
margin-right: 10px;
}
#verifyCodeBtn{
width: 100px;
height: 26px;
border: 1px solid gray;
background-color: #F1F1F1;
}
#submitBtn{
height: 26px;
width: 300px;
margin: 10px;
}
</style>
</head>
<body>
<form action="" method="post">
<p>
<!-- 60px + 10px + 228px = 【298px】 -->
<label for="phone">手機號</label>
<input type="text" id="phone" />
</p>
<p>
<!-- 60px + 10px + 228px = 【298px】 -->
<label for="password">密碼</label>
<input type="password" id="password" />
</p>
<p>
<!-- 60px + 10px + 118px + 10px + 100px = 【298px】 -->
<label for="verifyCode">驗證碼</label>
<input type="text" id="verifyCode" />
<input type="button" value="提交" id="verifyCodeBtn" />
</p>
<input type="submit" id="submitBtn" value="登陸"/>
</form>
</body>
</html>
