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>

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-31

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏工科狗和生物喵

【计算机本科补全计划】C++ Primer:指针和const限定符

正文之前 今天下午看了一下午的计算机组成与设计,结果好死不死的看到了设计部分--处理器的设计。天哪,我现在还只是一个准备给人装一台电脑做实验田的家伙,连用都不咋...

2664
来自专栏前端知识分享

Web前端面试宝典(最新)

html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;

653
来自专栏菜鸟前端工程师

JavaScript学习笔记001-变量0获取和操作标签

782
来自专栏哈雷彗星撞地球

Runtime系列(一)-- 基础知识

众所周知,Objective-C 是一种运行时语言。运行时怎么来体现的呢?比如一个对象的类型确定,或者对象的方法实现的绑定都是推迟到软件的运行时才能确定的。而运...

682
来自专栏IMWeb前端团队

谁说你只是"会用"jQuery?

前言 套用上篇文章向zepto.js学习如何手动触发DOM事件 的开头??? 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,...

2116
来自专栏前端知识分享

第2天:HTML常用标签

一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打...

631
来自专栏北京马哥教育

学会这二十个正则表达式,能让你少些1000行代码!

正则表达式,是一个强大且高效的文本处理工具。通常情况下,通过一段表达准确的表达式,能够非常简短、快速的实现复杂业务逻辑。 因此,正则表达式通常是一个成熟开发人员...

3417
来自专栏Google Dart

AngularDart4.0 指南- 表单 顶

表单是商业应用程序的主流。您可以使用表单登录,提交帮助请求,下订单,预订航班,安排会议,并执行无数其他数据录入任务。

732
来自专栏FreeBuf

Hongcms 3.0.0后台SQL注入漏洞分析

* 本文作者:BlackWater,本文属FreeBuf原创奖励计划,未经许可禁止转载。

846
来自专栏前端黑板报

(转)ES6新特性概览

ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本...

1805

扫描关注云+社区