ᠰᠦᠯᠵᠢᠶᠡ ᠬᠢᠬᠦ ᠮᠡᠷᠭᠡᠵᠢᠯ ᠤᠨ ᠦᠨᠳᠦᠰᠦᠨ ᠮᠡᠳᠡᠯᠭᠡ html教程-第二章-4.pptx
第一章 网页设计与网站建设的基础知识 第二章 HTML超文本标记语言 第三章 网页设计工具Dreamweaver 第四章 CSS层叠样式表 第五章 JavaScript脚本编程,HTML超文本标记语言,第二章,主要内容,,,,,,,,,,HTML文档机构,,头部及主体标记,,文字、段落、列表及图片标记,,,,,超链接、多媒体及表格标记,,,框架及表单标记,,上机练习,表单标记,表单作用：表单是实现动态网页的一种主要的外在形式，其主要功能是收集网页访问者的信息。 表单特性： 表单中包含多种不同的元素，如文本框、文本域、下拉式菜单等元素 访问者输入的信息需要由服务器端处理程序处理 访问者输入的信息可以使用GET和POST这两种方式提交到服务器端,表单标记,组成部分：根据实现的功能的不同，可将表单分成以下两个部分： 描述表单元素的HTML源代码 客户端的脚本以及服务器端用于处理访问者所输入信息的程序,表单元素示例,,表单标记,表单是网页上的一个特定区域，构成这个区域的标记有六种,表单标记,标记作用： 限定表单的范围，即定义一个区域，表单各元素都要设置在这个区域内，单击提交按钮时，提交的也是这个区域内的数据 携带表单的相关信息，如处理表单的脚本程序的位置、提交表单的方法等,表单标记,基本语法 ᠁ ᠁ ,表单标记,常用属性,,数据发送形式,数据从浏览器向服务器发送时，它以两部分发送，即HTTP头和HTTP正文体。其中头包含关于用户代理、服务器信息、内容类型等信息，这些信息通常以纯文本发送，因而不安全；而HTTP正文体包含正文实体，这些信息是编码后再发送的，所以比HTTP头发送的信息更安全,POST和GET提交方法的比较,GET方法是将表单数据以HTTP头的形式附加到URL地址后面，因而不安全；而POST方法则是以HTTP正文体形式发送，因而相对比较安全。 GET方法对传送数据的长度有限制，不能超过8K个字符；而POST方法无此限制。 GET方法只能传送ASCII码的字符；而POST方法没有字符码的限制，它可以传送包含在ISO10646中的所有字符。 表单默认的提交方法是GET，当数据涉及到保密问题或所传送的数据是用于执行插入或更新数据库操作时，必须使用POST方法；否则可以使用GET方法,输入标记,基本语法 语法解释 type属性用于设置不同类型的输入域；name属性指定域的名称。,Type属性值,,文字域text,作用 设置单行输入文本框，用于访问者在其中输入文本信息，输入的信息将以明文显示 基本语法 ,文字域示例,姓名：,密码域password,作用 设置单行密码输入框，用于访问者在其中输入密码信息，默认以“*”回显所输入的密码 基本语法 ,密码域示例,密码：,文件域file,作用 用于上传本地文件到服务器中。 基本语法 此时需要修改表单的默认编码 ,文件域示例,请上传你的照片：,单选按钮radio,作用 用于在一组选项中进行单项选择 基本语法 ,单选按钮radio,语法解释 “value”属性值表示选中项目后传到服务器端的值，checked 表示此项被默认选中，注意，同一组的单选框中只能有一个单选项被设置checked ，属于同一组的单选框的name属性必须设置为相同的值,单选按钮示例,性别： 女 男,复选框checkbox,作用 用于在一组选项中进行多项选择 基本语法 ,复选框checkbox,语法解释 “value”属性值表示选中项目后传到服务器端的值，checked 表示此项被默认选中，在同一组中可对多个选项框设置为checked，各复选框的name属性可以设置为相同或不同的值,复选框示例,摇滚乐 爵士乐 流行乐,按钮button,作用 激发提交表单动作，配合javascript脚本对表单执行处理操作 基本语法 ,onclick属性用于指定程序对表单的处理,普通按钮示例,,重置按钮reset,作用 单击重置按钮后，清除表单中所输入的内容，将表单内容恢复成默认的状态 基本语法 ,重置按钮示例,,提交按钮submit,作用 单击提交按钮后，将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理 基本语法 ,value属性值表示显示在按钮上面的文字,在表单中添加提交按钮的步骤,在中设置action=处理表单程序名 或设置onsubmit=处理表单脚本函数名 在之间字段要出现的地方添加一个 标记 设置type=“submit”，指定输入域为提交按钮 ︵必设︶ 设置name属性来标记内容 ︵可选︶ 设置value属性以在按钮上显示文字 ︵可选︶ ,提交按钮示例,,图像域image,作用 按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用 基本语法 ,提交图像域示例,,菜单和列表标记,、、作用 选择列表允许访问者从选项列表中选择一项或几项。它的作用等效于单选按钮 ︵单选时︶ 或复选框 ︵多选时︶ ，当选项比较多的情况下，相对于单选框和复选框来说，选择列表可节省了很大的空间。,， 标记的功能,标记用于声明选择列表，需由它确定选择列表是否可多选，以及一次可显示的列表选项数；而选择列表中的各选项则需要由来设置，其可设置各选项的值、以及是否为默认选项。 选择列表类型：依列表选项一次可被选择和显示的个数，选择列表可分为以下两种形式： 下拉菜单 ︵下拉列表︶ 列 表,列 表,列表是指一次可以选择多个列表项，且一次可以显示1个以上列表选项的选择列表,列 表,基本语法 选项一 选项二 选项三 ᠁ ᠁ ,列表示例,请选择你喜欢的网站: 新浪 雅虎 搜狐 google 网易 ,下拉菜单,下拉菜单是指一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表,下拉菜单,基本语法 选项一 选项二 ᠁ ᠁ 语法解释 selected属性用于设置默认选中项 ，只能有一个列表选项设置此属性；size属性只能设置为1，也可不设置此属性，因为其值默认为1,下拉菜单示例,您的最高学历/学位: 博士后 博士 硕士 学士 其他 ,文本域标记,作用 用于制作一个多行多列的文本输入区域 基本语法 ᠁ ᠁ ︵此处输入的为默认文本︶ ,
ᠮᠣᠩᠭᠣᠯ ᠳ᠋ᠣᠺ ᠤᠨ ᠬᠥᠮᠥᠷᠭᠡ