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

1 2 HTML标签 实例 毛宏燕华东师范大学软件学院 2 Steps HTML简介HTML标记表单 FORM HTML的简介 HTML是HyperTextMarkupLanguage的第一个大写字母的组合 中文意思为超文本标记语言 一个HTML文件是一个包含有HTML标记的文本文件HTML标记告诉Web浏览器如何显示网页一个HTML文件必须是一个htm或html扩展名的文件一个HTML文件可以用记事本 UltraEdit EditPlus Dreamweaver编辑 这是我的第一个网页这是我的第一个网页你好 HTML定义了一系列的标记 控制网页显示的文档 字符 段落 文本中嵌入图像 声音 动画 提供超文本链接 支持脚本语言 JAVA小程序 实现网页交互效果 HTML标记 HTML标记是用来组成HTML元素的HTML标记用两个尖括号 括起来HTML标记一般是双标记 如和前一个标记是起始标记 后一个标记为结束标记两个标记之间的文本是html元素的内容某些标记称为 单标记 因为它只需单独使用就能完整地表达意思 如 标记的属性 横看成岭侧成峰远近高低各不同不识庐山真面目只缘身在此山中苏轼 标记的属性 横看成岭侧成峰远近高低各不同不识庐山真面目只缘身在此山中苏轼 7 HTML文档基本结构 一个HTML文档的基本结构 标题正文 8 例如 如果要在浏览器中显示一段粗体文本 可以表示为 国庆节放假通知如果要对显示文本继续设置字体 可以表示为 国庆节放假通知 9 页面属性 语言字符集 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 基本语法 达人秀比赛 开一个新的 浏览器 窗口 TargetWindow blank浏览器会另开一个新窗口显示document html文档 self把文档调入当前页 13 页面属性 链入图象的基本语法 图象的URL 浏览器未完全读入图象时 在图象位置显示的文字 图象和文字的对齐 top middle bottomMyFace Itisalwayssmiling Hahaha MyFace Itisalwayssmiling Hahaha 14 页面属性 嵌入多媒体文本 EMBED 基本语法 URL标识主页中嵌入多媒体文本 如 电影 movie 声音 sound 虚拟现实语言 vrml 背景音乐 WAV文件的URL 循环数 HTML超链接 a html代码 老鼠爱大米齐秦北方的狼abc b html代码 我听见你的声音有种特别的感觉让我不断想不敢再忘记你我记得有一个人永远留在我心中返回 打开当前计算机系统中默认的电子邮件客户端软件 例如 OutLookExpress HTML图像标记 走马灯标记举例 例1活动字幕内容第一行活动字幕内容第二行活动字幕内容第三行例2欢迎光临 18 表格 Table 表格是由行 列构成的 每一行可以分成若干列 每一列成为一个单元格 相邻的单元格可以合并 应用页面布局相关标记表格标记 行标记 列标记 表格示例 代码 学生成绩等记表学语2008000001张三9590说明成绩 平时 20 期末 80 2006年1月 表格相关标记属性 22 HTML表单 HTML表单 支持用户在页面输入信息提供文本框 单选框 复选框 下拉菜单等控件由构成 表单的基本结构如下 用户密码method表单传输方法GET方法将表单信息在URL后传输POST方法将表单信息作为信息体传输action为表单处理方式 通常为一个URLenctype为编码方式 默认application x www form urlencoded UTF 8 23 表单的基本结构 表单中提供给用户的输入形式 text password checkbox radio image hidden submit reset Name您的姓名 您的主页的网址 密码 24 文本区域 cols rows 指定多行文本框的宽度和高度 wrap 指定多行文本框的折行方式 取值 off virtualoff default输入的文字超过栏宽时 不会自动换行virtual 文字在超过栏宽时会自动换行 25 提交按钮Single lineLableMulti lineLablelabelLabelwithfontchanges Labelwithimage 26 复选框 Checkbox 和单选框 RadioButton BananaAppleOrange 27 单选框 RadioButton BananaAppleOrange 28 列表框 SelectableMenu 属性multiple 多选项BananaAppleOrange String listValues request getParameterValues fruits if listValues null for inti 0 i listValues length i Stringvalue listValues i 29 文本上载控件控件创建了文件上载 生成一个文本框和一个浏览按钮Enterdatafilebelow 30 控件组 无属性 legend为fieldset定义一个标题GROUPONEField1A Field1B GROUPTWOField2A Field2B 31 控件组 32 表单中控件归总 33 各属性的设置说明 1 namename 指定控件的名称 2 value每个控件必须有且仅有一个value值 文本框和密码框通过value属性指定控件显示的初始值 单选框和复选框通过value属性设置表格递交时的实际传送值 按钮通过value属性设置按钮上的显示文本 3 sizesize 设置控件的尺寸 单位通常为像素 4 checked设定单选框或多选框初始选定 一组单选框只有一个控件使用该属性 34 练习 实现一个页面 包含前面所学标记 表格 控件