专栏首页HTML5学堂Form表单 问题多多(中)

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框,边框不同,背景也不相同),需要将文本框的背景去除掉,并去除它的边框,将背景设置为图片。(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>

显示效果

多行文本域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学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 传统企业站开发 - 模块开发

    这几周我们接连讲解了如何实现一个页面的搭建,从最初的各种分析,标签选择,一直到可以实现页面的整体布局。这一系列的知识点讲解中,我们熟知了对一个网页PSD图的处理...

    HTML5学堂
  • 2016.07 第一周 群问题分享

    HTML+CSS 如何用CSS实现一个元素footer一直贴在浏览器底部 2016.06.27~2016.07.01 核心概念 margin-bottom负值、...

    HTML5学堂
  • 传统企业站开发 - 模块开发(二)

    上周我们讲解了页面模块的制作,详情可见:传统企业站开发 - 模块开发,我们到底如何更好的实现模块的制作,小编这边继续给大家举一个例子来进行讲解。那今天我们为大家...

    HTML5学堂
  • 【学习】用R语言进行数据可视化的综合指南

    让我们快速浏览一下这张图表: ? 这张可视化数据图(最初用Tableau软件创建 )是如何利用数据可视化来帮助决策者的一个很好的例子。想象一下,如果这些信息通...

    小莹莹
  • 2014年十一黄金周去哪玩?大数据告诉你——信息图

    夏秋之交,又盼又怕十一黄金周就要来了。如果梦想中的圣地人山人海,是否会为你出游的心情蒙上一层阴影?十一出行该如何避开出游高峰?缔元信.网络数据基于网民浏览行为,...

    小莹莹
  • Tableau官方推荐:12本关于数据可视化的好书

    你想了解更多关于数据可视化的理论知识和历史背景吗?你想受到令人惊叹的可视化示例的启发吗?你希望能够创建更有效的可视化效果吗?或者你是否有兴趣从权威部门获取有关数...

    Python猫
  • 你的 Mac 用对了吗?推荐一些 Mac 上比较好用的软件

    最近有一个朋友刚入手了 Mac,准备专门搞开发用,让我给他推荐几款软件,然后我就把我的 Launchpad 截图发给了他,他看到这密密麻麻的软件完全不知所措,如...

    崔庆才
  • R语言数据可视化综合指南

    让我们快速浏览一下这张图表: ? 这张可视化数据图(最初用Tableau软件创建 )是如何利用数据可视化来帮助决策者的一个很好的例子。想象一下,如果这些信息通过...

    CDA数据分析师
  • Objective-C 数组对象排序

    NSSortDescriptor可以根据数组中对象的属性来排序 为排序数组的每个属性创建NSSortDescriptor对象,将所有这些对象放入一个数组中,该...

    赵哥窟
  • 数据同步的一些思考与改进

    闲的没事,自己写了个小网站,搭建在自己国外的VPS上,VPS内存极小(512M),而且还要跑点别的(你懂的),内存更紧张巴巴. 改造之前小网站用到了时髦的Red...

    码农阿宇

扫码关注云+社区

领取腾讯云代金券