web基础 表单_css 概述_css 语法_尺寸与框模型_背景.docxVIP

1. 表单1.1. 其他控件1.1.1. label 元素为了更好的理解标签的作用，我们先查看一段代码：input type=checkbox name=knownType value=2 /报纸杂志br /上述代码会在浏览器中显示一个复选框，但是，仔细观察可以发现，只有复选框本身可以点击，而“报纸杂志”这几个文本是不能点击的。这意味着，如果用户希望选择“报纸杂志”这个选择，必须精确点击该复选框才能实现选中或者弃选。这实在是个糟糕的用户体验！为了提高用户的体验度和满意度，我们应该能够做到：用户点击“报纸杂志”这段文本就如同点击文本前面的复选框一样！这时，我们需要 label 元素来定义标签。label 元素的直观效果依然是显示开始标记 label 和结束标记 /label 之间的文本，而且不会为文本呈现任何特殊效果。但是，它为鼠标用户改进了可用性。如果在 label元素内点击文本，就会触发此控件。而且 label 元素可以附带一个for属性，只要将该属性的值设置为表单中任何一个控件的id属性的值，则当用户点击该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。比如，查看如下代码：body form action=SaveData.aspx method=post br / input type=checkbox name=chkHid id=chkHid / label for=chkHid不要公开我的信息/label /form/body上述代码在浏览器中的显示效果如图－1所示。图－1由图－1可以看出，使用 label 元素添加文本后，并没有改变文本的外观显示，但是，此时，“不要公开我的信息”这段文本可以点击，且点击时就象点击文本前的复选框一样。因此，在创建表单中的控件时，尤其是创建如单选按钮、复选框这类控件时，提供优秀的标签可以有效的提高用户的体验度和满意度。标签的位置并没有严格的规定，可以在表单中的任何位置。为了提高代码的可读性，对于文本框，标签一般放置在文本框的左边；而对于单选按钮和复选框，标签一般放置在它们的右边。1.1.2. 选项框选项框用于用户从一组选项中选择一项，有下拉选项框和滚动列表选项框两种。下拉选项框也常简称为下拉框，只显示第一行的选项数据，其他选项需要下拉显示；滚动列表选项框也常简称为列表框，即显示固定行数的数据，其他不能显示的数据需要使用滚动条来查看。比如，查看如图－2所示界面（第一个选项框为下拉框，第二个选项框为列表框）：图－21、select 元素可以使用 select 元素可创建选项框，并使用 option 元素创建其中的每一个选项。比如，查看如下代码： select name=selSubjects option value=javaJava/option option value=cC++/option option value=net.NET/option option value=phpPHP/option option value=3g3G/option /select上述代码在浏览器中会显示一个下拉选项框，默认显示第一个选项，可以点击选项框最右侧的三角形展开所有的选项并进行选择，如图－2中的下拉框显示。select 元素除了标准属性以外，还可以附带的属性有：name属性：为选项框命名。。disabled属性：禁用控件，该属性的值为“disabled”。size属性：使用此属性可以创建滚动列表框。默认情况下，select 元素只显示第一个选项，其他选择折叠起来，需要下拉显示；而如果我们需要创建带滚动条的列表选项框，即显示多个选项，其余的选项可以通过滚动条来下翻查看，则需要使用size属性。multiple属性：允许用户同时选择多个选项。如果没有设置该属性，则只能选择一个选项。该属性的值为multiple。size属性的值是用户一次能够看到的选项数量，如果不设置该属性，或者设置为1，则显示为下拉框，如果设置为大于1的整数，则显示为滚动列表框。比如，查看如下代码： select name=selSubjects size=4 option value=javaJava/option option value=cC++/option option value=net.NET/option option value=phpPHP/option option value=3g3G/option /select上述代码在浏览器中会显示一个滚动列表选项框，显示4个选项，其他没有显示的选项可以使用右侧的滚动条滚动显示，如图－2中的列表框显示。2、option 元素select 元素至少需要包含一个 option 元素，代表选项。起始标记 option 和结束标记 /option 之间的文本将显示