一周一章前端书·第19周：《HTML与CSS进阶教程》S02E0
2018-02-19 本文已影响63人
梁同学de自言自语
第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>
