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 实战演示

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>HTML5学堂</title>
        <meta author='独行冰海 - 利利'/>
        <style>
            /*HTML5学堂 - CSS reset*/
            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;}
        </style>
    </head>
 
    <body>
        <div class='main'>
            <form name='个人信息表' action='*' method='get'>
                <fieldset>
                    <legend>个人信息填写</legend>
                    <div>姓名：<input type="text" /></div>
                    <div><button type='submit'>提交</button></div>    
                </fieldset>
            </form>
        </div>
    </body>
</html>

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

Form 表单 问题多多（上）

form标签必不可少

form的嵌套规则

关于fieldset以及legend标签

在form标签中的基本属性

form 实战演示

Form 表单问题多多（上）