第8章-网页设计表单重点.ppt

8.2.6 图像域 为了界面美观，可以用一张图片作为提交或者其他类型的按钮，当type=”image”时，浏览器就会在相应的位置产生一个图像按钮。 基本语法： form input name=… type=image src=url /form 语法说明：默认的图像域按钮只有提交表单的功能，如果要改变其用途，则需要将某种行为附加到表单元素中。image类型中的src属性是必需的，它用于设置图像文件的路径。 8.2.6 图像域 8.2.7 文件域 文件选择输入框允许用户在自己的硬盘中浏览文件，并把文件名及其路径作为表单数据上传，主要用在上传程序中。 基本语法： form input name=… type=file /form 语法说明： （1）在表单中插入文件选择输入框，只要将input标记中type属性值设为file就可以插入文件选择输入框。 （2）enctype属性确保文件采用正确的格式上传。 （3）对于允许文件上传的表单，不能使用get方法。 8.2.7 文件域 8.2.8 隐藏域 如果不想显示某些选项，这些信息与用户选择无关，但服务器应用程序运行时又是需要的，此时就可以把这些选项中type属性的值设为”hidden”。 基本语法： form input name=… type=hidden value=… /form 语法说明： （1）type=hidden时，表示输入项将不在浏览器中显示。 （2）隐藏域可以通过JavaScript代码动态对隐藏域中的信息进行存储访问。 用textarea标记可以定义高度超过一行的文本输入框，textarea标记是成对标记，首标记textarea和尾标记/textarea之间的内容就是显示在文本输入框中的初始信息。 基本语法： form textarea name=… cols=… rows=…/textarea /form 语法说明： （1）name：用于指定文本输入框的名字。 8.3 多行文本输入框 8.3 多行文本输入框 （2）rows：设置多行文本输入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。 （3）cols：设置多行文本输入框的列数。 8.4 选择（列表/菜单） 在表单中，通过select和option标记可以在浏览器中设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。 基本语法： form select name=… size=… options value=… … /select /form 8.4 选择（列表/菜单） 语法说明： （1）select标记是成对标记，首标记select和尾标记/select之间的内容就是一个下拉式菜单的内容。select标记必须与option标记配套使用。option标记用于定义列表中的各个选项，select标记有name、multiple、size和disabled属性。 ① name：设定下拉列表名字。 ② size：可选项，用于改变下拉框的大小。size属性的值是数字，表示显示在列表中选项的数目，当size属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，size默认值为1。 ③ multiple：如果加上该属性，表示允许用户从列表中选择多项。使用multiple时size属性的值不能太小，否则浏览器中的显示会不正常。 8.4 选择（列表/菜单） （2）option标记用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个value值（当选项被选择时传送给处理程序的信息）。option标记是单标记，它必须嵌套在select标记中使用。一个列表中有多少个选项，就要有多少个option标记与之相对应，选项的具体内容写在每个option之后。option标记有两个属性：value和selected，它们都是可选项。 ① value: 用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。如果是默认状态，浏览器将传送选项的内容。 ② selected :用来指定选项的初始状态，表示该选项在初始时被选中。 8.4 选择（列表/菜单） 思考：将示例中的size值改为1，在IE9、Chrome和Firefox中的显示有何不同？ 8.5 字段集与选项组 fieldset元素可将表单内的相关元素分组。fieldset标签将表单