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

《web基础 表单_css 概述_css 语法_尺寸与框模型_背景》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1.表单1.1.其他控件1.1.1.元素为了更好的理解标签的作用，我们先查看一段代码：报纸杂志
上述代码会在浏览器中显示一个复选框，但是，仔细观察可以发现，只有复选框本身可以点击，而“报纸杂志”这几个文本是不能点击的。这意味着，如果用户希望选择“报纸杂志”这个选择，必须精确点击该复选框才能实现选中或者弃选。这实在是个糟糕的用户体验！为了提高用户的体验度和满意度，我们应该能够做到：用户点击“报纸杂志”这段文

2、本就如同点击文本前面的复选框一样！这时，我们需要元素来定义标签。元素的直观效果依然是显示开始标记和结束标记之间的文本，而且不会为文本呈现任何特殊效果。但是，它为鼠标用户改进了可用性。如果在元素内点击文本，就会触发此控件。而且元素可以附带一个for属性，只要将该属性的值设置为表单中任何一个控件的id属性的值，则当用户点击该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。比如，查看如下代码：

3、veData.aspx"method="post">
不要公开我的信息上述代码在浏览器中的显示效果如图－1所示。图－1由图－1可以看出，使用元素添加文本后，并没有改变文本的外观显示，但是，此时，“不要公开我的信息”这段文本可以点击，且点击时就象点击文本前的复选框一样。因此，在创建表单中的控件时，尤其是创建如单选按钮、复选框这类

4、控件时，提供优秀的标签可以有效的提高用户的体验度和满意度。标签的位置并没有严格的规定，可以在表单中的任何位置。为了提高代码的可读性，对于文本框，标签一般放置在文本框的左边；而对于单选按钮和复选框，标签一般放置在它们的右边。1.1.2.选项框选项框用于用户从一组选项中选择一项，有下拉选项框和滚动列表选项框两种。下拉选项框也常简称为下拉框，只显示第一行的选项数据，其他选项需要下拉显示；滚动列表选项框也常简称为列表框，即显示固定行数的数据，其他不能显示的数据需要使用滚动条来查看。比如，查看如图－2所示界面（第一个选项框为下拉框

5、，第二个选项框为列表框）：图－21、元素可以使用元素可创建选项框，并使用元素创建其中的每一个选项。比如，查看如下代码：JavaC++.NETPHP3G

6、上述代码在浏览器中会显示一个下拉选项框，默认显示第一个选项，可以点击选项框最右侧的三角形展开所有的选项并进行选择，如图－2中的下拉框显示。元素除了标准属性以外，还可以附带的属性有：·name属性：为选项框命名。。·disabled属性：禁用控件，该属性的值为“disabled”。·size属性：使用此属性可以创建滚动列表框。默认情况下，元素只显示第一个选项，其他选择折叠起来，需要下拉显示；而如果我们需要创建带滚动条的列表选项框，即显示多个选项，其余的选项可以通过滚动条来下

7、翻查看，则需要使用size属性。·multiple属性：允许用户同时选择多个选项。如果没有设置该属性，则只能选择一个选项。该属性的值为multiple。size属性的值是用户一次能够看到的选项数量，如果不设置该属性，或者设置为1，则显示为下拉框，如果设置为大于1的整数，则显示为滚动列表框。比如，查看如下代码：JavaC++

8、="net">.NETPHP3G上述代码在浏览器中会显示一个滚动列表选项框，显示4个选项，其他没有显示的选项可以使用右侧的滚动条滚动显示，如图－2中的列表框显示。2、