HTML5学堂-码匠 HTML5学堂

您当前位于:项目兼容问题 ——> form表单存在的常见兼容问题(上)

form表单存在的常见兼容问题(上)

2015/08/03 21:34:51 | 作者:HTML5学堂(码匠) | 分类:项目兼容问题 | 关键词:form,表单,兼容问题,嵌套,属性

Form 表单 问题多多(上)

HTML5学堂 - 刘国利:2013年8月时,曾在给学生讲解WEB前端开发的HTML和CSS基本知识,学生要面对“表单”的制作。我喜欢把“表单”称之为初入前端的人的“恶梦”。不得不说,表单这个东西在前端开发的时候,问题是相当之多的,从嵌套规则、书写习惯,到浏览器的兼容问题,有很多需要注意的地方。根据行业变化,针对本篇文章进行了内容的调整,并重新书写部分内容,调整时间2015年08月03日。

本篇博文当中主要内容

form标签必不可少

form标签的嵌套规则

关于fieldset以及legend标签

在form标签中的基本属性

form标签必不可少

<form>标签用于为用户输入创建 HTML 表单。表单能够包含 input元素,比如文本字段、复选框、单选框、提交按钮等等。表单的作用在于能够向服务器端传送所需要的数据。由于涉及数据的提交,form标签自然必不可少啦。

form的嵌套规则

在嵌套规则当中,推荐form元素不直接包含行元素。而input属于行元素,换句话说,不推荐form元素直接包含input。之所以这么要求的目的是这种结构不便于布局。因此通常使用div、table、ul、fieldset等元素辅助。关于具体选择哪种块元素辅助表单元素完成布局,需要根据具体情况来定。随着行业的发展,fieldset逐渐被弃用。对于div元素,由于其无语义性的特点,用于布局方面还是比较受人认可的。有些开发者采用ul、ol让表单元素看上去更有秩序也并非不可,而table在纵向上的垂直居中功能,让不少开发者也很是喜欢(但是table的语义性上来说,属于数据表,个人感觉还是慎用吧~)

关于fieldset以及legend标签

fieldset有何作用呢?

首先,编写WML页面的时候要考虑到设备的屏幕很小。如果试图想把一个大的form在一个屏幕里面显示,就要指定那些标签保持在一个屏幕中。那么fieldset标签将这些标签捆绑在一个屏幕上。

另外,fieldset标签将表单内容的一部分打包,生成一组相关表单的字段。也就是所谓的分组。例如,我们可以将注册信息分组成“基本信息(一般为必填)”和“详细信息(一般为可选)”两组,那我们如何更好的来实现呢?我们可考虑在表单form中加入fieldset(对表单进行分组,一个表单可以有多个fieldset)和legend(说明每组的内容描述)

这个位置需要注意的一点是:

fieldset默认是带边框的,而legend默认一般显示在左上角。但在某些页面中我们不希望让fieldset和legend的默认样式或默认布局影响设计方案中的美观。解决方法是在CSS中将fieldset的border设置为0,legend的display设置为none就可以了。通常情况下我们会使用CSS的“重置”。统一将不同浏览器的显示效果清零,或者将一些不希望出现的默认样式清除掉。

最后要说的是,当时JavaScript还不足够强大的时候,很多功能是需要依附于fieldset标签来实现的,而今的JavaScript如雄狮般崛起,fieldset的功能完全可以通过JavaScript来实现,因此很多大网站中是不存在fieldset标签的~

在form标签中的基本属性

<form>标签当中,必须出现action,最好也注明“method”

action规定当提交表单时,向何处发送表单数据。在我们做测试的时候可以使用星号*代替

method规定如何发送表单数据。有get和post两种发送方式。

为更有利于SEO,可以再书写上name属性

关于提交方法get和post的区别,很明显的区别在于,url地址当中?后面的内容,也就是一个是保密,一个是非保密传送数据。

form 实战演示

说了这么多,来做个例子感受一下,先来看我们希望达到的效果。

form最终效果图

先来做基本的布局处理,并放置三个基本块,分别是标题、姓名文本框、保存(提交)按钮:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>HTML5学堂</title>
  6.         <meta author='独行冰海 - 利利'/>
  7.         <style>
  8.             /*HTML5学堂 - CSS reset*/
  9.             html{color:#000;background:#FFF;font-family:Microsoft YaHei,sans-serif,Arial;}
  10.             body,div,form,fieldset,legend,input,button,textarea,p{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial;}
  11.             fieldset,img{border:0;}            
  12.             legend{color:#000;}
  13.             input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
  14.             input,button,textarea,select{*font-size:100%;}
  15.             /*HTML5学堂 - 表单样式处理*/
  16.             .main{margin: 0 auto;width: 900px;height: 760px;background: #f9fbea;}
  17.             form{width: 800px;height: 730px;padding: 0 50px 30px;}
  18.         </style>
  19.     </head>
  20.  
  21.     <body>
  22.         <div class='main'>
  23.             <form name='个人信息表' action='*' method='get'>
  24.                 <fieldset>
  25.                     <legend>个人信息填写</legend>
  26.                     <div>姓名:<input type="text" /></div>
  27.                     <div><button type='submit'>提交</button></div>    
  28.                 </fieldset>
  29.             </form>
  30.         </div>
  31.     </body>
  32. </html>

今天就先从结构上讲这么多吧,下一篇文章里再具体讲解如何处理样式。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端