当前位置:文档之家› 人机交互界面设计第七章 表格、表单页面

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


HTML5新增表单控件
在HTML5中新增了一些表单的控Байду номын сангаас,主要是input元素的type属性值的增加。
type属性值 color date datetime datetime-local email month number range search tel time url week
控件的类型说明 调色板控件,目前呈现为单行文本框 日期控件 日期和时间控件 本地日期和时间控件 一个单行文本框,呈现email 月份控件 表现为一个单行文本框,或带步进按钮 滑动刻度控件 搜索文本框,一般在文本框中显示一个关闭符号 单行文本框,用来输入电话号码的文本框 时间控件 单行文本框,用来输入一个完整URL地址,包括传输协议 星期控件
单元格的合并及拆分
1、单元格的合并
合并单元格是将表格中相邻的多个单元格合并成一个单元格,有横向上的 合并和纵向上的合并。 (1)横向合并单元格 用属性colspan来进行设置 (2)纵向合并单元格 用属性rowspan来进行设置 2、单元格的拆分
单元格的拆分,其实质是将其他相关的单元格进行的合并操作。如:我们 将一行中的一个单元格拆分成两行的两个单元格,而这一行中其他的所有单元 格,都纵向上合并了两个单元格,分别增加了rowspan=”2”的属性,并且表格 会增加一行即多了一对<tr>标签,<tr>标签中只有一对<td>标签。
表格的嵌套
表格可以用来布局网页,但是网页的栏目板块有时候是不规则展现的。因 此,要用标准的表格去布局不规则的网页栏目时,会采用一定的表格嵌套来完 成。
表格的嵌套就是在建立的表格中的某一个单元格当中,再创建一个表格 出来。
表格的嵌套常用在网页的布局中。
02 表单的应用
建立HTML表单
网页中的表单用<form></form>标签进行创建。表单标签是双标签,用一 对标签分别定义表单的开始位置和结束位置,在标签对之间创建表单控件。在 表单的开始标签<form>中,可以设置表单的基本属性,包括表单的名称name 属性,处理表单数据的目标程序action属性以及传送数据的方法method属性等 。表单<form>标签相当于是表单的容器,里面除了包含表单控件外,还可以包 含其它的文本元素,如段落、列表等。
表单控件中,input元素可以定义表单中的大部分的控件,控件的类型由 type属性值决定,不同的值对应不同类型的表单控件.
type属性值 text(默认) password radio checkbox file submit reset button image hidden
控件的类型说明 表示单行输入文本框 表示密码框,输入的数据用星号显示 表示单选框 表示复选框 表示文件域,由一个单行文本框和一个“浏览”按钮组成 表示提交按钮,将表单数据发送到服务器 表示重置按钮,将重置表单中的数据,以便重新输入 表示普通按钮,应用value的属性值定义按钮上的文字显示 表示一个图像按钮 表示隐藏文本框
HTML5表单新功能属性
HTML5为表单新增了一些属性设置,使表单控件的功能更全面。 (1)autofocus属性 (2)width和height属性 (3)list属性 (4)min、max和step属性 (5)pattern属性 (6)placeholder属性 (7)required属性
END THANK YOU
表单标签中常用的属性:
(1)name属性:用来设置表单的名称。
(2)action属性:用于设定表单数据处理程序URL的地址。
例如:http://localhost/test.asp。
(3)method属性:用来定义数据传递到服务器的方式。有4种方式,即它的 属性值有4种值
创建表单控件
用户与表单交互是通过表单的控件进行的。表单控件通过name属性进行标 识,通过value属性值获取输入数据。表单的提交是通过表单的提交按钮完成的 。
人机交互界面设计
第七章
表格、表单页面
01 表格的应用
创建表格
1、表格标签 表格由三个基本元素组成:table元素、tr元素、td元素。 2、表格的基本结构 表格在网页中的结构表现与自然结构是相同的,具有行和列。 3、表格的属性 (1)<table>标签的宽width、高height和边框border属性 (2)<table>标签的边框颜色属性bordercolor (3)<table>标签的间距cellspacing和边距cellpadding属性 (4)<td>标签的水平对齐方式align和垂直对齐方式valign属性 (5)表格的背景属性
相关主题