HTML标记语言——表单
发布时间：2020-05-14 05:35:34 所属栏目：编程 来源：站长网
导读：点击这里返回剧本之家 HTML教程 栏目． 上文：标志说话引用 原文出处chapter 5 表单 互动性一向是互联网的重点,让行使者与网站可以或许互换信息,相相互同.表单使我们可以或许有组织的,行使统一方法的从行使者哪里网络资料,因此在计划网站时老是属于任何状况都能拿来
|
点击这里返回剧本之家 HTML教程 栏目．
上文：标志说话——引用 原文出处 chapter 5 表单 互动性一向是互联网的重点,让行使者与网站可以或许互换信息,相相互同.表单使我们可以或许有组织的,行使统一方法的从行使者哪里网络资料,因此在计划网站时老是属于"任何状况都能拿来用"的那一类,举例来说,我们发明或许有10000种标志表单的差异方法.好吧,或者没有那么多,可是我们仍能思索几种状况,让行使者易于行使表单布局,同时也便于让网站全部者举办打点. 标志表单的要领 要领A:行使表格 <form action="/path/to/script" method="post"> <table> <tr> <th>Name:</th> <td><input type="text" name="name" /></td> </tr> <tr> <th>Email:</th> <td><input type="text" name="email" /></td> </tr> <tr> <th> </th> <td><input type="submit" value="submit" /></td> </tr> </table> </form> 持久以来很多人都以表格来标志表单,因为行使频率很高的缘故,我们已经风俗于见到表单以这种方法举办排版:左列是向右对齐的笔墨声名,右列则是相左对齐的表单位素.行使纯真的两列表格,是完成易用表单排版的简朴要领之一. 有些人以为不必要表格,也有其他人以为应该把表单视为表状资料.我们不规划支持任何一种说法,可是在某些环境下,行使表格时告竣特定表单排版的最佳要领,出格是包括很多种差异元素的伟大表单(行使了单选框,下拉选框等等的表单).完全依靠CSS处理赏罚这种表单的排版也许会让人感想荆棘,并且常常必要加上特另外<span>与<div>,会比表格耗上更多的标签. 接着看图5-1,这是一样平常可视化赏识器表现要领A的结果: 图5-1:赏识器表现的要领A的结果 你会发明,行使表格可以把笔墨声名表单位素分列的异常整齐.然而,对这样简朴的表单来说,或者我会停止选择行使表格,而且换用其他不必要行使这么多标签的要领.除非表单的视觉计划异常必要这种排版,否者未必需要行使表格.同时我们也要思量几个易用性题目,在研究下面两个要领的时辰,我们就会打仗到这个部门. 要领B:不消表格,单挤在一路 <form action="/path/to/script" method="post"> <p> Name: <input type="text" name="name" /><br /> Email: <input type="text" name="email" /><br /> <input type="submit" value="submit" /> </p> </form> 行使单一段落和几个<br />标签离隔全部元素是个可行要领,但视觉上也许会被描画的有点挤.图5-2十一版赏识器的表现结果: 图5-2:赏识器表现要领B的结果 固然我们不消表格就能完成排版,可是它看起来有点挤,有点丑.同时我们也赶上表单位素无法美满对齐的题目. 我们可以或许以CSS为<input>元素加上一个外补丁,以便减轻拥挤的感受.像是这样: input{ margin:6px 0; } 前面这段为每个<input>元素的上下别离加上6像素的外补丁(包括了Name,Email的输入框,以及submit按钮),在元素之间加上特另外空间.就像图5-3一样: 图5-3.要领B在为input元素加上外补丁之后的结果 要领B自己没什么大题目,可是还能举办一些微调,以便把表单做得更好.要领C里头也运用了这些微调能力,以是一路来看看吧. 要领C:朴实,更轻易行使 <form action="/path/to/script" id="thisform" method="post"> <p><label for="name">Name:</label><br /> <input type="text" id="name" name="name" /></p> <p><label for="email">Email:</label><br /> <input type="text" id="email" name="email" /></p> <p><input type="submit" value="submit" /></p> </form> 我喜好要领C的几个处所.起首,对付相同本示例的纯真表单来说,我发明把每个声名与表单位素放在单独的段落较量利便,不加上样式表现时,段落之间的预设间隔应该足以让你轻松阅读内容.稍后我们还能以CSS为表单内包括的<p>标签设定隔断. 我们乃至更进一步,为表单设定了独一的id="thisform".因此,适才我提到的准确隔断大抵上可以写成这样: #thisform p{ margin:6px 0; } 这代表将这个表单内的<p>标签的上下外补丁设定为6个像素,包围赏识器为一样平常段落第用的预设值. 要领C与前两种要领的另一个差异之处在于:尽量每个群组(声名和输入框)都放在<p>里头,我们仍以<br />把他们放在独立的一行.行使<br />分隔每个元素,就能绕过笔墨黑白纷歧,造成输入项无法美满对齐的题目. 图5-4是一样平常赏识器表现要领C的结果,这边有行使先前为<p>标签设定的样式. 图5-4.赏识器表现要领C的结果,有对P标签行使CSS 除了要领C的视觉结果之外,最重要的利益:也就是晋升易用性的部门. <label>标签 行使<label>标签晋升表单的易用性必要两个步调,而要领C已经完成这两个步调了.起首是以<label>将笔墨声名与相干的表单位素毗连在一路,不管是笔墨输入框(text field),笔墨区块输入框(text area),单选框(radio),多选框(checkbox)等等都好.要领C在"Name:"与"Email:"问题上行使了<label>标签,把它们与输入资料的元素毗连在一路. 第二步则是为<label>标签加上for属性,填上对应输入框的id. 举例来说.在要领C内里,以<label>标签把"Name:"包了起来,而且在for属性里填入与厥后头的输入框id沟通的值. <form action="/path/to/script" id="thisform" method="post"> <p><label for="name">Name:</label> <br /> <input type="text" id="name" name="name" /></p> <p><label for="email">Email:</label><br /> <input type="text" id="email" name="email" /></p> <p><input type="submit" value="submit" /></p> </form> 为什么要用<lable>? 或者听过其他人说你应该在表单内加上<label>标签.而最重要的题目在于为什么应该要用<label>标签. 成立label / ID的关联能让屏幕阅读器为每个表单位素读出正确的标签,而不收版面分列要领的影响,这是件功德.同时,<label>标签正是为了标志表单栏标签而生,行使这个标签的时辰,我们就是在为每个元素声名意义,强化表单的布局. 在处理赏罚单选,多选框时行使<label>标签尚有个特另外甜头,那就是大大都赏识器在行使者点击<label>内笔墨时也会改变元素的值.这样能为输入元素造成更大的点击地区,让动作未便的行使者更轻易填写表单(Mark Pilgrim, "Dive Into Accessibility," ). 举例来说,假如为表单加上一个多选框,让行使者可以或许选择"记下这些信息",那么我们就能像这样的行使<label>标签了: <form action="/path/to/script" id="thisform" method="post"> <p><label for="name">Name:</label><br /> <input type="text" id="name" name="name" /></p> <p><label for="email">Email:</label><br /> <input type="text" id="email" name="email" /></p> <p><input type="checkbox" id="remember" name="remember" /> <label for="remember">Remember this info?</label></p> <p><input type="submit" value="submit" /></p> </form> 借着以这种方法标志多选框,可以得到两个甜头:屏幕阅读器能读出正确的声名笔墨(就像这个例子一样,笔墨呈此刻输入框之后也行),并且能切换多选框的范畴变大了,此刻切换范畴除了多选框自己之外,笔墨部门也包括在内(大大都赏识器都支持). 图5-5就是这个表单在赏识器中的表现结果.我们出格标示了加大之后的多选框切换范畴: 图5-5.把笔墨包括在切换范畴内的多选框 除了表单与段落之外,最后我还想展示另一个标志表单的方法,行使界说清单. 1 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
