网页设计与制作教程（HTML+CSS+JavaScript） 教学配套课件 刘瑞新 第2章 表单.pdfVIP

网页设计与制作教程 网页设计与制作教程 （HTML+CSS+JavaScript） （HTML+CSS+JavaScript） 机械工业出版社同名教材 机械工业出版社同名教材 配套电子教案 配套电子教案 第2章 表单 第2章 表单 2.1 表单的工作原理 2.1 表单的工作原理 2.2 表单标签 2.2 表单标签 2.3 表单元素 2.3 表单元素 2.4 表单的高级用法 2.4 表单的高级用法 2.1 表单的工作原理 2.1 表单的工作原理 表单的作用是从客户端收集信息。当访问者在表单中输 表单的作用是从客户端收集信息。当访问者在表单中输 入信息，单击提交按钮后，这些信息将被发送到服务器，服 入信息，单击提交按钮后，这些信息将被发送到服务器，服 务器端脚本或应用程序将对这些信息进行处理。服务器进行 务器端脚本或应用程序将对这些信息进行处理。服务器进行 响应时，会将被请求信息发送回用户（或客户端），或者基 响应时，会将被请求信息发送回用户（或客户端），或者基 于该表单内容执行一些操作，表单的工作原理如图2-1所示。 于该表单内容执行一些操作，表单的工作原理如图2-1所示。 2.2 表单标签 2.2 表单标签 网页上具有可输入表项及项目选择等控制所组成的栏目 网页上具有可输入表项及项目选择等控制所组成的栏目 称为表单。form标签用于创建供用户输入的HTML表单。表 称为表单。form标签用于创建供用户输入的HTML表单。表 单的基本语法及格式为： 单的基本语法及格式为： form name=表单名 action=URL method=get|post form name=表单名 action=URL method=get|post … … /form /form 2.3 表单元素 2.3 表单元素 2.3.1 input元素 2.3.1 input元素 input元素用来定义用户输入数据的输入字段，根据 input元素用来定义用户输入数据的输入字段，根据 不同的type属性，输入字段可以是文本字段、密码字段、复 不同的type属性，输入字段可以是文本字段、密码字段、复 选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数 选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数 值、范围、图像、文件等。input元素的基本语法及格式 值、范围、图像、文件等。input元素的基本语法及格式 为： 为： input type=表项类型 name=表项名 value=默认值 size=x input type=表项类型 name=表项名 value=默认值 size=x maxlength=y / maxlength=y / 2.3 表单元素 2.3 表单元素 【演练2-1】制作商品图片上传的表单页面，使用文件域上传 【演练2-1】制作商品图片上传的表单页面，使用文件域上传 文件，用户单击 “浏览”按钮后，将弹出 “打开”对话框。 文件，用户单击 “浏览”按钮后，将弹出 “打开”对话框。 选择文件后，路径将显示在地址文本框中。 选择文件后，路径将显示在地址文本框中。 2.3 表单元素 2.3 表单元素 2.3.2 选择栏select 2.3.2 选择栏select 选择栏可分为两种：弹出式和字段式。 选择栏可分为两种：弹出式和字段式。 select标签的格式为： select标签的格式为： select size=x name=控制操作名 multiple select size=x name=控制操作名 multiple option … … /option option … … /option option … … /option option … … /option