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 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

PS-前端切图教程(切jpg图和切png图)

9065
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

1.1K6
来自专栏编程

用JavaScript 代码来做,图片切换效果!

用原生的JS写动画效果的确是个很令人纠结的事情,倒不如直接用jQuery来写,亦或找一些jQuery插件。能力达不到的时候,为了工作进度,只能采取心有不甘的手段...

3405
来自专栏娱乐心理测试

Ios常用第三方动画框架(三)

3413
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。 当更新项目的...

2653
来自专栏九彩拼盘的叨叨叨

学习纲要:HTML 基础概念

831
来自专栏ThoughtWorks

前端页面替换文本的方法和一些小技巧

在前端页面替换文本有几种做法,不假思索的答案通常是直接用JavaScript。但你有没有想过这完全可以用CSS实现呢? 背景 在前端页面上,有的时候我们需要...

3637
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

1803
来自专栏Jacklin攻城狮

翻译_iOS视图编程指南(View Programming Guide for iOS)之介绍

在iOS中,你可以使用窗口和视图将你应用的内容呈现在屏幕上。窗口本身是不具备呈现可视化内容的功能的,但它可以用作装有应用视图的容器。视图可以规定在窗口的某一部分...

1243
来自专栏非著名程序员

Android弹软键盘时之ListView的变化控制

前几天有个人问我,说在最底下有个输入框,弹出键盘时整个界面都一起跟着移动,上面的标题栏都移到上面看不到了,界面非常难看。其实这种问题一般存在于这样的界面布局中那...

1897

扫码关注云+社区

领取腾讯云代金券