《HTML表单实例》PPT课件.ppt

1,2. HTML标签&实例,毛宏燕 华东师范大学软件学院,2,Steps,HTML简介 HTML标记 表单（FORM）,HTML的简介,HTML 是 Hyper Text Markup Language 的第一个大写字母的组合，中文意思为超文本标记语言. 一个HTML文件是一个包含有HTML标记的文本文件 HTML标记告诉Web浏览器如何显示网页 一个HTML文件必须是一个htm或html扩展名的文件 一个HTML文件可以用记事本/UltraEdit/EditPlus/Dreamweaver编辑, 这是我的第一个网页 这是我的第一个网页 你好！ ,HTML定义了一系列的标记，控制网页显示的文档、字符、段落，文本中嵌入图像、声音、动画，提供超文本链接，支持脚本语言、JAVA小程序,实现网页交互效果。,HTML 标记,HTML标记是用来组成HTML元素的 HTML标记用两个尖括号”括起来 HTML标记一般是双标记，如和 前一个标记是起始标记, 后一个标记为结束标记 两个标记之间的文本是html元素的内容 某些标记称为“单标记”,因为它只需单独使用就能完整地表达意思,如,标记的属性, 横看成岭侧成峰 远近高低各不同 不识庐山真面目 只缘身在此山中 苏轼 ,标记的属性, 横看成岭侧成峰 远近高低各不同 不识庐山真面目 只缘身在此山中 苏轼 ,7,HTML文档基本结构,一个HTML文档的基本结构： 标题 正文 ,8,例如：如果要在浏览器中显示一段粗体文本，可以表示为： 国庆节放假通知 如果要对显示文本继续设置字体，可以表示为： 国庆节放假通知,页面属性,语言字符集(Charsets)的信息 - #= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5 背景色彩和文字色彩 bgcolor - 背景色彩 text - 非可链接文字的色彩 link - 可链接文字的色彩 alink - 正被点击的可链接文字的色彩 vlink - 已经点击(访问)过的可链接文字的色彩 #=rrggbb 色彩是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,HTML 基本标记,文件格式标记,横看成岭侧成峰 远近高低各不同 不识庐山真面目 只缘身在此山中 苏轼 一首著名的唐诗 ,12,页面属性,链接(Link) 基本语法 . 达人秀比赛. 开一个新的(浏览器)窗口 (Target Window) . #=_blank 浏览器会另开一个新窗口显示document.html文档 _self 把文档调入当前页,13,页面属性,链入图象的基本语法 #=图象的 URL #=浏览器未完全读入图象时，在图象位置显示的文字。 图象和文字的对齐 #=top, middle, bottom My Face! It is always smiling. Hahaha My Face! It is always smiling. Hahaha,14,页面属性,嵌入多媒体文本(EMBED) 基本语法 #=URL 标识主页中嵌入多媒体文本，如：电影(movie), 声音(sound), 虚拟现实语言(vrml). . 背景音乐 #=WAV 文件的 URL #=循环数 ,HTML 超链接,a.html代码： 老鼠爱大米 齐秦 北方的狼 ,b.html代码： 我听见你的声音 有种特别的感觉 让我不断想不敢再忘记你 我记得有一个人永远留在我心中 返回 ,打开当前计算机系统中默认的电子邮件客户端软件， 例如:OutLook Express,HTML 图像标记,走马灯标记举例,例1 活动字幕内容第一行 活动字幕内容第二行 活动字幕内容第三行 例2 欢迎光临,18,表格（Table）,表格是由行、列构成的。每一行可以分成若干列，每一列成为一个单元格，相邻的单元格可以合并。 应用 页面布局 相关标记 表格标记 行标记 列标记 ,表格示例（代码）, 学生成绩等记表 学 语 2008000001 张三 95 90 说 明 成绩=平时*20%+期末*80% 2006年1月 ,表格相关标记属性,22,HTML表单,HTML表单:支持用户在页面输入信息 提供文本框、单选框、复选框、下拉菜单等控件 由构成，表单的基本结构如下： 用户 密码 method表单传输方法 GET方法将表单信息在URL后传输 POST方法将表单信息作为信息体传输 action为表单处理方式，通常为一个URL enctype为编码方式,默认application/x-www-form-urlencoded, UTF-8,23,表单的基本结构,表单中提供给用户的输入形式 *=text, password, checkbox, radio, image, hidden, submit, reset *= Name 您的姓名: 您的主页的网址: 密码: ,24,文本区域 cols,rows: 指定多行文本框的宽度和高度， wrap:指定多行文本框的折行方式，取值:off/virtual off：default 输入的文字超过栏宽时，不会自动换行 virtual：文字在超过栏宽时会自动换行 ,25,提交按钮 Single-line Lable Multi-line Lablelabel Labelwithfontchanges. Label with image ,26,复选框(Checkbox) 和 单选框(RadioButton) Banana Apple Orange ,27,单选框(RadioButton) Banana Apple Orange ,28,列表框(Selectable Menu) . 属性multiple，多选项 Banana Apple Orange ,String listValues = request.getParameterValues(“fruits”); if(listValues != null) for (int i=0; ilistValues.length; i+) String value = listValuesi; ,29,文本上载控件 控件创建了文件上载，生成一个文本框和一个浏览按钮 Enter data file below: ,30,控件组 无属性 legend 为 fieldset 定义一个标题 GROUP ONE Field 1A: Field 1B: GROUP TWO Field 2A: Field 2B: ,31,控件组,32,表单中控件归总,33,各属性的设置说明： (1) name name:指定控件的名称 (2) value 每个控件必须有且仅有一个value值； 文本框和密码框通过value属性指定控件显示的初始值；