给大家带来关于网页表单完成和网页结构怎样使用表单

只看该作者 · 发表于 2015-1-15 23:35:50

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
网页制造poluoluo文章简介：本文供应了关于表单位素和款式的更多具体内容，和在实在的web使用程序计划中表单是怎样使用的。
弁言

HTML表单一文中先容了关于表单的创立和款式化的基本内容。本文供应了关于表单位素和款式的更多具体内容，和在实在的web使用程序计划中表单是怎样使用的。
本文中引进的观点

这一部分供应了关于表单完成和界面结构的新信息。
划定规矩和标志超载

大批利用class和id标志是违背KISS（坚持简便）原则的（在CSS盒模子与基本结构一文中已注释过了）。但是，难度年夜的结构却常常会在级联上碰到良多抵触——这些抵触最复杂的办理办法就是在元素中增加标志，和编写包括多少选择符的款式表划定规矩。
难度最年夜的结构中各处都是边沿情形，对这些边沿情形最好的处置举措就是给元素赋一个id，来界说一个广义而独一的情况。
新表单域元素

一般一个实践的表单所必要的不单单是按钮和文本输出地区，由于我们经常会必要依照选项来构建用户呼应。HTML为有这类请求的计划职员供应了多少选项。
表单计划准绳

关于网站来讲，表单经常是用户交互和数据汇集的核心地点。因而，表单关于一个网站的乐成与否长短常关头的，这就请求我们对表单的计划赐与高度的存眷。
三分法例

最简单吸引网站用户的注重力的是扫瞄器画布（和穿过结构的线条）上的四个特定点。本文将向你先容这类征象，并供应一些倡议，告知你怎样经由过程CSS来最年夜水平天时用这类征象。
Grids栅格

后面的文章中我们先容了怎样确保排版的分歧性和最年夜化天时用空缺。本文中我们会更进一步地论述怎样使用em单元来完成必定水平的结构分歧性，这类分歧性只要经由过程CSS才干完成。
平台撑持品级

贸易项目中罕见的一种请求是，一个被承认的网站计划应该在一种或多种扫瞄器上衬着效果分歧。本文将会对这类请求的缘故原由，效果，和用于满意这类请求的处置办法举行扼要的切磋。
一张复杂的接洽表单

经由过程接洽表单，网站访客能够间接将e-mail发送到站内信箱中，接洽表单的利用长短常广泛的，这是由于：只需用户具有激活的e-mail地点，他就能够利用接洽表单，并且接洽表单能够很便利地分离到专门的邮件文件夹中。
在后面的表单一文中，所触及到的标志就是用来创立如许的表单的，我们还对这个表单举行了一些润色：
标志

<formid="contactForm"method="post"action="/cgi-bin/service_email_script.php"><ul><liid="nameField"class="required"><labelfor="realname">Name:</label><inputtype="text"name="name"value=""class="medium"id="realname"/><spanclass="note">required</span></li><liid="addressField"class="required"><labelfor="address">Email:</label><inputtype="text"name="email"value=""class="medium"id="address"/><spanclass="note">required</span></li><liid="subjectField"><labelfor="natureOfInquiry">Generalsubject:</label><selectname="subject"class="medium"id="natureOfInquiry"><optionvalue="support">Support</option><optionvalue="billing">Accounts&billing</option><optionvalue="press">Press</option><optionvalue="other_q">Otherquestions</option></select></li><liid="acctTypeField"><labelfor="acctNone">Accounttype:</label><fieldset><labelfor="acctGold">Gold</label><inputtype="radio"name="acct_type"id="goldAcct"class="rInput"/><labelfor="acctSilver">Silver</label><inputtype="radio"name="acct_type"id="acctSilver"class="rInput"/><labelfor="acctBronze">Bronze</label><inputtype="radio"name="acct_type"id="acctBronze"class="rInput"/><labelfor="acctNone">None</label><inputtype="radio"name="acct_type"id="acctNone"class="rInput"checked="checked"/></fieldset><spanclass="note">required</span></li><liid="availabilityField"><labelfor="availability">Myaccountisunavailable:</label><inputtype="checkbox"name="is_down"id="availability"class="rInput"/></li><liid="messageField"><labelfor="messageBody">Comments:</label><textareaname="comments"cols="32"rows="8"class="long"id="messageBody"></textarea></li><liclass="submitField"><inputtype="submit"value="Send"class="submitButton"/></li></ul></form>

复制代码

由之前的表单变更而来

除包括了几个新元素以外，这段标志当中还增加了很多class和ID，这些class和ID能够在款式表中加以援用。如许就能够对每一个表单，表单域/值组，和表单域分离加以援用，而不必管高低文。
别的，经由过程新的标记符，计划师就能够将必需填写的表单域和不是必填的表单域辨别开来。
最初，这段代码中另有一些新的类，用来提醒本身地点的表单位素应当显现的信息的数目和范例。经由过程这些类，就能够将结构细节同时使用到多个恣意元素上。

网页制造poluoluo文章简介：本文供应了关于表单位素和款式的更多具体内容，和在实在的web使用程序计划中表单是怎样使用的。

不言而喻的弱点

因为该示例表单只具有最基础的内容，我们用题目交换失落了之前文章的表单中的legend元素。
标签是最合适用在fieldset中的，而不是label（label更多地是与单个控件相干）。在本例中我们完整疏忽失落了legend元素，由于它很难款式化。
别的还必要注重的是，在源按次中，表单域的“required”标签最好是放在表单域本身之前，以满意屏幕浏览器用户的必要。但是，为了对这些项目举行公道布置，position属性（不属于本文的会商局限）是必须的。因而，“required”标签在源按次中是放在其相干控件以后的（即便是在统一个高低文中）。
新表单域？甚么器材？

文本框和提交控件在后面的文章中已先容过了。就如下面所说的，我们会碰到良多实践用例，在这些情形中要让用户可以选择两个或两个以上的选项。上面我们将扼要地谈一下触及这些操纵的元素。
选择范例：inputtype="checkbox"

…<labelfor="availability">Myaccountisunavailable:</label><inputtype="checkbox"name="is_down"id="availability"class="rInput"/>

复制代码

选择到场或选择加入这类成绩一般都是经由过程这些控件之一来完成的。别的，这类控件还能够用在必要从几多少选项中任选几种的时分，好比说，一张团体喜好清单。
在互斥选项当选择：inputtype="radio"

…<labelfor="acctNone">Accounttype:</label><fieldset><labelfor="acctGold">Gold</label><inputtype="radio"name="acct_type"id="goldAcct"class="rInput"/><labelfor="acctSilver">Silver</label><inputtype="radio"name="acct_type"id="acctSilver"class="rInput"/><labelfor="acctBronze">Bronze</label><inputtype="radio"name="acct_type"id="acctBronze"class="rInput"/><labelfor="acctNone">None</label><inputtype="radio"name="acct_type"id="acctNone"class="rInput"checked="checked"/></fieldset>

复制代码

经由过程一组单选框，你能够把多少选项分列在一同，在这些选项中只能选择一个。好比，在1-5或1-10的品级局限内指定一个数值，这个例子直不雅地论述了radio控件的利用。
跟别的表单控件分歧的是，radio控件不但是同意，更是请求各个互相联系关系的控件的name不异。
这些元素的得名是来自于罕见的机器式调音的汽车收音机界面。跟那些罕见于数字调音收音机的由程序把持的预设分歧，机器“预设”按钮只需一按下，就会从一系列波段中将收音机聚焦在要收听的谁人波段上。
checkbox和radio控件都有checked属性，只需设置了该属性，就会在初度衬着的时分默许激该死控件。
关因而用radio控件，仍是checkbox控件的成绩，最好是在思索完各类分歧要素后再作决意。假如你想让用户对一项客观性的选择（好比，到场邮件列表）举行确认，那末checkbox控件多是最好的选择。假如你想让用户在两个客不雅性的选项（好比说性别）中做出选择的话，就应当用radio控件。

网页制造poluoluo文章简介：本文供应了关于表单位素和款式的更多具体内容，和在实在的web使用程序计划中表单是怎样使用的。

在选项太多的时分：select/option

…<labelfor="natureOfInquiry">Generalsubject:</label><selectname="subject"class="medium"id="natureOfInquiry"><optionvalue="support">Support</option><optionvalue="billing">Accounts&billing</option><optionvalue="press">Press</option><optionvalue="other_q">Otherquestions</option></select>

复制代码

select和option元素跟一系列radio控件的效果差未几，但占的空间却要少很多。是不是用select元从来取代一堆radio控件，这一般是干系到怎样利用用户界面空间的成绩；关于电子商务网站里的一长串地舆地区的列表或部门列表如许的内容，一样平常都是用select元素对照好，而冗长的选项（好比，是/否，真/伪，岁数段，支出局限）则应当用radio控件来分列。
紧密的自测标明，操纵select列表所需的活动把持程度是很高的，但跟着其包括的option数目的增添，所需的把持程度的增加是很巨大的。实践了局就是，冗长的互斥选项列表最好是接纳带有得当label的radio控件的情势。
将控件系列分组：fieldset

fieldset元素最主要的目标就是为一组严密相干的控件分别一个独自的语境（好比将一组text控件回为德律风号码，将select元素回为日期，等等。）。
重新入手下手，一步步制造出终极表单效果

既然本文所触及到的新观点已概述完了，如今我们就该来看一看实践的使用——上面的十二个示例周全包括了Web表单开辟过程当中碰到的各类计划观点和款式化成绩。
激烈保举读者将示例质料保留到本人的硬盘上，并对个中的款式表划定规矩举行实验。
这些示例依照源代码按次渐渐深切，而不是依照款式表的制造按次。之以是如许做的缘故原由和寄义将在本文前面部分举行会商。
示例1

我们从html{margin:0;padding:0;}划定规矩入手下手，第一步是对包括该表单的页面的body举行设置。
链接：

几近未经款式处置过的页面
使用了body款式以后

新款式：

body{margin:0;padding:1.714em;background-image:url(images/bg_grid.gif);font-size:14px;font-family:Helvetica,Arial,sans-serif;line-height:1.714em;}

复制代码

示例1：背景思索要素

在XHTML与得当的Content-Type一同提交给可以对其举行准确撑持的用户代办署理的情形下，默许的页面margin和/或padding是在html元素中衬着的。
为了不上一项中所形貌的情形之外的别的情形，应当在该页面四周加上10px的清闲；Opera将这类清闲划定为padding值，而别的支流扫瞄器将它（有点违背直觉）划定为margin值。本示例中的款式表对最后的效果举行了校订。
固然很多可会见性专家否决14px的字号，对在款式表中别的中央指定的各类边框和字体属性来讲，这类字号倒是不成支解的一部分，这些属性尽年夜部分都接纳了1em的七分之几。本文开端附有一张分数到小数的转换表，假如你想要更深切地懂得本文顶用到的运算的话，能够自行参考。
之以是选择14px的值是由于，要使注释可以被几近一切改正目力的人浏览，14px是最小的字号。
因为本文的目标之一是论述怎样完成分歧性最好的栅格，本示例的页面接纳了网格宽度为24px的栅格背景。

示例2

如今页面庞器已做好了，接上去的几个步骤就是改动或删除用户代办署理款式。
链接：

款式化原始题目并删除不想要的清闲

新款式：

h3{margin:001.2em0;border-bottom:.05emsolidrgb(0,96,192);font-size:1.429em;line-height:1.15em;}form{width:35.929em;margin:0;}ul{margin:0;padding:0;list-style-type:none;}

复制代码

示例2：背景思索要素

题目的字号系列因平台而异；但是，默许值一直是与未经款式处置过的段落文本上利用的medium值成比例的，并经由过程级联而承继。此处设置的值是为了改动默许的比例。
关于页面上的第一个题目来讲，用h1是最好的；但此处疏忽了该划定规矩，由于在贸易情况下，网站的题目经常是页面上的h1，而页面题目在题目层级上就绝对要低一些。在很多情形下，这类表单的主要性是与统一文档中别的内容或表单的主要性不异的。
对h3举行款式化的方针是创立24像素高的内容框，上面要紧跟24像素的清闲，也就是：
[code](((14