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

相关文章

来自专栏非著名程序员

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

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

1827
来自专栏二次元

CSS3随机背景图片切换特效

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

1043
来自专栏Jacklin攻城狮

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

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

1103
来自专栏拂晓风起

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame

1631
来自专栏前端说吧

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

6085
来自专栏无原型不设计

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

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

2573
来自专栏王磊的博客

react native android6+拍照闪退或重启的解决方案

前言 android 6+权限使用的时候需要动态申请,那么在使用rn的时候要怎么处理拍照权限问题呢?本文提供的是一揽子rn操作相册、拍照的解决方案,请看正文...

3319
来自专栏姬小光

姬小光前端小讲堂【第007期】- 切图大法之表格布局

前面几期中,我们已经了解到了前端开发的三板斧,即 HTML,CSS,Javascript。熟练掌握这三个基本技能,基本上就可以混口饭吃了。

1082
来自专栏ThoughtWorks

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

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

3387
来自专栏HTML5学堂

iconfont字体图标库

HTML5学堂小编的话:昨日发布的iconfont的内容有些不足,对于可能不太了解iconfont和特殊字体的学习者来说,可能会存在一定的理解问题,在此针对昨日...

9176

扫码关注云+社区