WEB基础02 表单2CSS 概述CSS 语法尺寸与框模型背景.docx
- 文档编号：24099473
- 上传时间：2023-05-24
- 格式：DOCX
- 页数：40
- 大小：645.75KB
WEB基础02 表单2CSS 概述CSS 语法尺寸与框模型背景.docx
《WEB基础02 表单2CSS 概述CSS 语法尺寸与框模型背景.docx》由会员分享，可在线阅读，更多相关《WEB基础02 表单2CSS 概述CSS 语法尺寸与框模型背景.docx（40页珍藏版）》请在冰豆网上搜索。
WEB基础02表单2CSS概述CSS语法尺寸与框模型背景
1.表单
1.1.其他控件
1.1.1.
为了更好的理解标签的作用，我们先查看一段代码：
上述代码会在浏览器中显示一个复选框，但是，仔细观察可以发现，只有复选框本身可以点击，而“报纸杂志”这几个文本是不能点击的。
这意味着，如果用户希望选择“报纸杂志”这个选择，必须精确点击该复选框才能实现选中或者弃选。
这实在是个糟糕的用户体验！
为了提高用户的体验度和满意度，我们应该能够做到：
用户点击“报纸杂志”这段文本就如同点击文本前面的复选框一样！
这时，我们需要
但是，它为鼠标用户改进了可用性。
如果在
而且
比如，查看如下代码：
上述代码在浏览器中的显示效果如图－1所示。
图－1
由图－1可以看出，使用
因此，在创建表单中的控件时，尤其是创建如单选按钮、复选框这类控件时，提供优秀的标签可以有效的提高用户的体验度和满意度。
标签的位置并没有严格的规定，可以在表单中的任何位置。
为了提高代码的可读性，对于文本框，标签一般放置在文本框的左边；而对于单选按钮和复选框，标签一般放置在它们的右边。
1.1.2.选项框
选项框用于用户从一组选项中选择一项，有下拉选项框和滚动列表选项框两种。
下拉选项框也常简称为下拉框，只显示第一行的选项数据，其他选项需要下拉显示；滚动列表选项框也常简称为列表框，即显示固定行数的数据，其他不能显示的数据需要使用滚动条来查看。
比如，查看如图－2所示界面（第一个选项框为下拉框，第二个选项框为列表框）：
图－2
1、
可以使用
比如，查看如下代码：
上述代码在浏览器中会显示一个下拉选项框，默认显示第一个选项，可以点击选项框最右侧的三角形展开所有的选项并进行选择，如图－2中的下拉框显示。
∙name属性：
为选项框命名。
。
∙disabled属性：
禁用控件，该属性的值为“disabled”。
∙size属性：
使用此属性可以创建滚动列表框。
默认情况下，
∙multiple属性：
允许用户同时选择多个选项。
如果没有设置该属性，则只能选择一个选项。
该属性的值为multiple。
size属性的值是用户一次能够看到的选项数量，如果不设置该属性，或者设置为1，则显示为下拉框，如果设置为大于1的整数，则显示为滚动列表框。
比如，查看如下代码：
上述代码在浏览器中会显示一个滚动列表选项框，显示4个选项，其他没有显示的选项可以使用右侧的滚动条滚动显示，如图－2中的列表框显示。
2、
起始标记之间的文本将显示为选项的文本内容。
∙value属性：
选项的值。
如果选项被选中，该属性的值会被发送给服务器。
∙disabled属性：
规定某个选项应该被禁用。
被禁用的选项既不可用，也不可点击。
∙selected属性：
指定在页面加载时预先选定该选项，被预选的选项会显示在下拉列表最前面的位置。
也可以在页面加载后通过JavaScript脚本代码设置selected属性。
该属性的值为“selected”。
1.1.3.之间的文本会显示在文本框中。
多行文本输入控件除了可以包含标准属性（id、style等）以外，还可以附带如下属性：
∙name属性：
设置控件的名称，用于提供“名/值”对，以发送给服务器。
∙cols属性：
cols属性用于定义文本区的宽度（以平均字符数计）。
∙rows属性：
rows属性用于规定文本区的高度（以行数计）。
∙disabled属性：
禁用控件，该属性的值为“disabled”。
被禁用的文本区域控件既不可用，也不可点击。
∙readonly属性：
readonly属性规定多行文本框为只读，该属性的值为“readonly”。
在只读的文本框中，无法对内容进行修改，但用户可以通过tab键切换到该控件，选取或复制其中的内容。
注意事项：
默认情况下，当用户输入的文本超过