工信版（中职）Web前端设计基础 项目五电子课件

YCF （中职）Web前端设计基础 项目五电子课件 1 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 网页中的表单 项目五 授课教师：姓名 WEB前端设计基础 学习情境一 授课教师：姓名 单击此处编辑母版标题样式 Contents 1.项目描述 2.知识准备 3.项目实施 4.项目拓展 5.项目小结 6.技能训练 Contents 1.项目描述 2.知识准备 3.项目实施 4.项目拓展 5.项目小结 6.技能训练 一 项目描述 本项目学习要点 表单的高级应用； 使用CSS样式修饰表单。 表单的作用和语法格式； 表单中各元素的作用和语法格式； 二 知识准备 表单概述； 表单高级元素。 表单基本元素； 表单其他元素； 表单概述 在HTML文档中，使用表单可以收集用户的相关信息，提交后的数据可以交付后台进行处理，比如登录界面、调查问卷、个人信息填写等。 表单的标签为<form></form>，其格式如下： <form name="表单名称" action="url" method=”get/post” target=”目标显示方式” enctype=”mime”></form> 表单概述 其中各属性的含义如表所示。 属性 含义 说明 name 表单名称 为了区分多个表单，用该属性给表单命名，以防止表单提交到后台程序出现混乱。 action 表单提交地址 用于指定表单数据提交到哪个地址进行处理或者以邮件形式发送到哪个邮箱。如： action=”form-action.asp”或者action=”mailto:415770947@qq.com” method 传送方法 指明提交表单的HTTP方法，取值为get或post，由于get方法安全性较低，所以大部分采用post的方法。 target 目标显示方式 目标窗口的打开位置，与超链接<a>标签一样，有四个属性值： _self：默认值，表示在当前的窗口打开页面。 _blank：表示在新的窗口打开页面（常用）。 _parent：表示在父级窗口中打开页面。 _top：页面载入到包含该链接的窗口，取代当前在窗口中的所有页面。 enctype 编码方式 用于设置表单信息提交的编码方式，有两个值： application/x-www-form-urlencoded：默认的编码方式。 multipart/form-data：MIME编码，对于“上传文件”这种表单必须选择该值。 表单概述 结合以上表单属性的介绍，可以创建如图所示的表单。 第8、9行代码为： <form name="form1" action=”form-action.asp” method=”post” target=”_blank” enctype=”application/x-www-form-urlencoded”></form> 这句代码创建了一个表单，name=“form1”表示表单名称为form1，action=”form-action.asp”表示提交表单后将数据交给form-action.asp文件来执行，method=”post”表示传送方法为post，target=”_blank”表示提交表单后在新的窗口打开页面，enctype=”application/x-www-form-urlencoded”定义了表单信息提交时的编码方式。 表单概述 也可以如图所示创建表单。 第8、9行代码为： <form action="mailto:someone@sohu.com" method="post" enctype="text/plain"></form> 这句代码中action=mailto:someone@sohu.com表示提交表单后将表单内容以邮件形式发送给someone@sohu.com。 表单基本元素 按照上面的方法创建的表单，在网页上并没有内容显示，因为表单是一个包含表单元素的容器，只有通过插入各种表单元素，才能显示不同的交互界面。 <input>标签用于搜集用户信息，通过设置不同的type属性值，可以有很多类型，type属性值如表所示。 type值 含义 说明 text 单行文本框 用户可在其中输入简短文本，默认宽度为 20 个字符。 password 密码 为了保证文本的安全性，该字段中的字符被掩码，以点的形式显示。 checkbox 复选框 用户在一组选项中可以选择一项或多项。 radio 单选按钮 用户在一组选项中只能选择一项。 button 普通按钮 可点击的按钮，一般用于通过 JavaScript 启动脚本。 submit 提交按钮 作用是把表单数据发送到服务器。 reset 重置按钮 作用是清除表单中的所有数据。 image 图像域 图像形式的提交按