人机交互界面的设第七章 表格表单页面

1、人机交互界面设计第七章表格、表单页面目录01 表格的应用02 表单的应用social medialorem ipsum dolor sit amet, consectetur adipiscing.codelorem ipsum dolor sit amet, consectetur adipiscing.photographylorem ipsum dolor sit amet, consectetur adipiscing.copywritinglorem ipsum dolor sit amet, consectetur adipiscing.filmslorem ipsum dolor

2、 sit amet, consectetur adipiscing.目前网络中的网页通常采用div来进行布局，基本不再使用表格来布局网页。虽然表格不再用来布局网页，但是网页中某些特殊的应用，用表格比用div更方便、简洁。如网页中的数据统计表，使用表格可以更清晰地排列数据。在网页的实际制作过程中，表单网页如注册登录页面则更多的采用表格布局，因为表格对表单的位置控制更强大、灵活。能够熟练地使用表格，对于制作网页来说犹如如虎添翼。01 表格的应用 创建表格1、表格标签表格由三个基本元素组成：table元素、tr元素、td元素。2、表格的基本结构表格在网页中的结构表现与自然结构是相同的，具有行和列。3

3、、表格的属性（1）标签的宽width、高height和边框border属性（2）标签的边框颜色属性bordercolor（3）标签的间距cellspacing和边距cellpadding属性（4）标签的水平对齐方式align和垂直对齐方式valign属性（5）表格的背景属性单元格的合并及拆分1、单元格的合并 合并单元格是将表格中相邻的多个单元格合并成一个单元格，有横向上的合并和纵向上的合并。（1）横向合并单元格用属性colspan来进行设置（2）纵向合并单元格用属性rowspan来进行设置2、单元格的拆分 单元格的拆分，其实质是将其他相关的单元格进行的合并操作。如：我们将一行中的一个单元格拆分

4、成两行的两个单元格，而这一行中其他的所有单元格，都纵向上合并了两个单元格，分别增加了rowspan=”2”的属性，并且表格会增加一行即多了一对标签，标签中只有一对标签。表格的嵌套 表格可以用来布局网页，但是网页的栏目板块有时候是不规则展现的。因此，要用标准的表格去布局不规则的网页栏目时，会采用一定的表格嵌套来完成。 表格的嵌套就是在建立的表格中的某一个单元格当中，再创建一个表格出来。 表格的嵌套常用在网页的布局中。02 表单的应用 建立html表单 网页中的表单用标签进行创建。表单标签是双标签，用一对标签分别定义表单的开始位置和结束位置，在标签对之间创建表单控件。在表单的开始标签中，可以设置表

5、单的基本属性，包括表单的名称name属性，处理表单数据的目标程序action属性以及传送数据的方法method属性等。表单标签相当于是表单的容器，里面除了包含表单控件外，还可以包含其它的文本元素，如段落、列表等。表单标签中常用的属性： （1）name属性：用来设置表单的名称。（2）action属性：用于设定表单数据处理程序url的地址。例如：http:/localhost/test.asp。（3）method属性：用来定义数据传递到服务器的方式。有4种方式，即它的属性值有4种值创建表单控件 用户与表单交互是通过表单的控件进行的。表单控件通过name属性进行标识，通过value属性值获取输入数据

6、。表单的提交是通过表单的提交按钮完成的。 表单控件中，input元素可以定义表单中的大部分的控件，控件的类型由type属性值决定，不同的值对应不同类型的表单控件. type属性值 控件的类型说明 text（默认）表示单行输入文本框 password表示密码框，输入的数据用星号显示 radio表示单选框 checkbox表示复选框 file表示文件域，由一个单行文本框和一个“浏览”按钮组成 submit表示提交按钮，将表单数据发送到服务器 reset表示重置按钮，将重置表单中的数据，以便重新输入 button表示普通按钮，应用value的属性值定义按钮上的文字显示 image表示一个图像按钮 h

7、idden表示隐藏文本框html5新增表单控件在html5中新增了一些表单的控件，主要是input元素的type属性值的增加。 type属性值 控件的类型说明 color调色板控件，目前呈现为单行文本框 date日期控件 datetime日期和时间控件 datetime-local本地日期和时间控件 email一个单行文本框，呈现email month月份控件 number表现为一个单行文本框，或带步进按钮 range滑动刻度控件 search搜索文本框，一般在文本框中显示一个关闭符号tel单行文本框，用来输入电话号码的文本框 time时间控件 url单行文本框，用来输入一个完整url地址，包括传输协议 week星期控件html5表单新功能属性 html5为表单新增了一些属性设置，使表单控件的功能更全