时间戳

首页 > 技术文章 > 表单技巧

表单技巧

masanhe 2018-01-18 11:40 原文

从三个方面深入表单开发技巧

（1）深入radio、checkbox

（2）深入textarea

（3）表单对齐

 

深入redio和checkbox

redio指的是单选框而checkbox指的是复选框

学习：单选框和复选框的文字垂直居中

在大部分浏览器中文字大小为12px或14px。在表单开发中，无论是12px还是14px文字与单选框或复选框都是不对齐的，用户体验非常差

默认情况是单选框复选框与文字是vertical-align:baseline这也是导致它们不对齐的情况发生，所以解铃还须系铃人，我们就可以用vertical-align来解决

语法
vertical-align:像素值；

说明：

我们分两种情况：

（1）当文字大小为12px时，我们给单选框或复选框定义"vertical-align:-3px"即可解决问题

（2）当文字大小为14px时，我们给单选框或复选框定义"vertical-align:-2px"即可解决问题

 

深入textarea

textarea指的是文本域，对文本域我们有两个方面值得我们深入学习

（1）固定大小，禁止拖动

（2）在Chrome和Firefox和IE实现相同效果

 

 

固定大小、禁止拖动

 

在Chrome和Firefox下，textarea的效果如下

IE下效果

 

下方的三角形可以拉大或缩小textarea，IE下是没有这个效果的，而用户如果过分拖拉textarea，是会影响页面的布局，所以我们通常要个它固定大小、禁止拖动

 

固定大小

在css中我们可以给它一个min-width和一个min-height来定义textarea的最小宽和最大高，定义max-width和max-height来定义最大宽和最大高通常使用max-height、ma-width

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        textarea{
            width: 80px;
            height: 100px;
            max-width: 100px;
            max-height: 160px;
        }
    </style>
</head>
<body>

        <textarea></textarea>

</body>
</html>

禁止拖动

语法
resize:none;

禁止拖动后，Chrome和Firefox的textarea下方的三角形也会消失

 

2、在Chrome和Firefox下实现相同的外观

textarea有两个自带属性cols和rows，其中cols控制列数（也就是每行文字的个数），rows控制行数，但如果用cols和rows来控制textarea的大小，我们会发现两个特点

（1）在(Chrome和Firefox)和IE每行的文字和列数是不同的

（2）默认情况下IE是有滚动条的，而Chrome和Firefox没有

 

所以为了Chrome和Firefox、IE具有相同外观

我们可以用css中width和height定义textarea的宽高在用overflow:auto来定义textarea的滚动条自适应

 

举例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        textarea{
            width: 160px;
            height: 100px;
            resize: none;
            overflow: auto;
        }
    </style>
</head>
<body>

        <textarea></textarea>

</body>
</html>

 

 

结果：

在Chrome和Firefox下

在IE下

推荐阅读