form表单存在的常见兼容问题（下）

2015/08/05 09:40:29 | 作者：HTML5学堂（码匠） | 分类：项目兼容问题 | 关键词：form,表单,兼容问题,input,resize

Form表单问题多多（中）

HTML5学堂 - 刘国利：在上一篇的博文当中，主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中，我主要就具体的样式实现进行一下讲解，并提一下表单相关的浏览器兼容问题。今天主要提到的标签有；label、文本框和密码框input、文本域。本文最早的版本也是在2013年8月时书写的，随着行业的变化，针对本篇文章也进行了内容的调整，调整时间2015年08月05日。

本篇博文当中主要内容

1、label的作用

2、如何处理input文本框|密码框的样式

3、多行文本域textarea样式的处理

label的作用

label的存在意义有二，其一在于用户体验的考虑，其二则是在处理表单元素的样式时，label能够成为前端开发工程师很好的工具。先来说第一点：有时，用户会点击表单元素（如：文本框）对应的文字，例如，点击“用户名”三个字，此时，出于对用户体验的考虑，可以使“用户名”所对应的表单元素直接获得焦点，让这个表单元素处于聚焦状态。还有一种情况，对于单选按钮，本身可选择的区域很小，用户点击到需要相对比较精确，那么此时，我们就可以利用label提升用户体验。需要注意的是，在书写label时，如果想实现点击label区域，对应表单元素聚焦，需要为label设置for，而label中的for会配合input中的id（即label中的for的属性值和input中的id值应当相同）。处理样式方面，由于默认的表单元素样式在各个浏览器下渲染的效果不同，而当前美工也可能会设计出完全不同于默认效果的样式，此时作为前端开发的我们，就需要考虑定位等各种布局进行表单元素的制作，而此时label成为我们一个不错的工具，具体用法的话，之后有时间再书写一篇实际特效跟大家分享吧~

如何处理input文本框|密码框的样式

不同浏览器下的的文本框默认样式

input在不同浏览器下的默认显示效果

为了处理不同浏览器的不同样式（不同浏览器的input框，边框不同，背景也不相同），需要将文本框的背景去除掉，并去除它的边框，将背景设置为图片。（border与background的设置）

在文本框获得焦点的时候，文本框外部会有不同样式（根据浏览器而定），因此需要清除样式，设置outline:none;即可。

还有一点需要注意的是，假设文本框的高度是32像素，为文字设置32像素的行高，在初始状态下，IE6的光标位置并没有在文本框中垂直居中，因此，通常我们会为父级添加padding，而高度只给文字大小（假设文字大小14像素，那么height以及line-height均设置为14像素，上下各9像素内边距撑开）。

文本框样式处理实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5学堂</title>
<meta author='独行冰海 - 利利'/>
<style>
/*CSS reset - HTML5学堂*/
html{color:#000;background:#FFF;font-family:Microsoft YaHei,sans-serif,Arial;}
body,div,form,fieldset,legend,input,button,textarea,p{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial;}
fieldset,img{border:0;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
/*表单样式处理 - HTML5学堂*/
.main{margin: 0 auto;width: 900px;height: 760px;background: #f9fbea;}
form{width: 800px;height: 730px;padding: 0 50px 30px;}
legend{height: 60px;line-height: 60px;font-size: 44px;text-align: center;}
.name{height:32px;}
.name label{
float: left;
height: 32px;
line-height: 32px;
}
.name input{
overflow: hidden;
float: left;
width: 176px;
height: 14px;
margin-left: 27px;
padding: 9px 14px;
border: none;
background: url('name_bac.jpg') 0 0 no-repeat;
line-height: 14px;
outline: none;
}
</style>
</head>
<body>
<div class='main'>
<form name='个人信息表' action='*' method='get' target='_blank'>
<fieldset>
<legend>个人信息表</legend>
<div class="name">
<label for="name">姓名:</label><input id="name" type="text" />
</div>
</fieldset>
</form>
</div>
</body>
</html>

显示效果

input的demo 显示效果

多行文本域textarea样式的处理

代码实例

样式代码：
textarea{width: 400px;height: 100px;line-height: 25px;}
结构代码：
<form name='个人信息表' action='*' method='get' target='_blank'>
<fieldset>
<legend>个人信息填写</legend>
<textarea name="文本域" id="" cols="30" rows="10">HTML5学堂 - 独行冰海 - 刘国利：在上一篇的博文当中，主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中，我主要就具体的样式实现进行一下讲解，并提一下表单相关的浏览器兼容问题。今天主要提到的标签有；label、文本框和密码框input、文本域textarea。</textarea>
</fieldset>
</form>

textarea的右下角的拖拽小按钮，的确是可以让用户进行拖拽，但是一旦拖拽，网页的样式就会发生改变，整体还算不错的页面样式就变得杂乱不堪。因此很多网站都会将这个可拖拽的小东西去掉。

处理方法很简单，textarea{resize: none;}即可使得右下角拖动小三角消失掉。

注意，此处如果想取消掉聚焦后的外部框，同样可以使用outline:none;的代码进行处理。

今天样式主要提及了label标签的意义和作用、input文本框|密码框的样式处理以及textarea的拖拽功能，下一篇文章里将继续讲解如何处理select、checkbox类型的表单元素样式。

欢迎沟通交流~HTML5学堂