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

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