第2章表单重点.ppt

第2章 表单 表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作，表单的工作原理如图2-1所示。 2.1 表单的工作原理 网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。form标签用于创建供用户输入的HTML表单。表单的基本语法及格式为： form name=表单名 action=URL method=get|post … /form 2.2 表单标签 处理 传输 名称 2.3 表单元素 2.3 表单元素 2.3.1 input元素 input元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。input元素的基本语法及格式为： input type=表项类型 name=表项名 value=默认值 size=x maxlength=y / 2.3 表单元素 2.3.1 input元素的常用属性 2.3 表单元素 2.3.1 常用的input元素类型 1.文字和密码框 2.重置和提交按钮 3.复选框和单选按钮 4.电子邮件输入框 5.日期时间选择器 6.URL输入框 7.数值输入框 8.范围滑动条 9.隐藏域框 10.文件域 2.3 表单元素 【演练2-1】制作商品图片上传的表单页面，使用文件域上传文件，用户单击“浏览”按钮后，将弹出“打开”对话框。选择文件后，路径将显示在地址文本框中。 2.3 表单元素 2.3.2 选择栏select 语法格式如下： select size=“x” name=“名称”multiple option ……/option option ……/option … /select 2.3 表单元素 2.3.2 选择栏select 2.3 表单元素 select name=OS option value=WINWindows option value=MACMacintosh option value=UNIXUNIX option value=OTHER其他 /select select name=BROWSER size=3 option value=IE5Internet Explorer· 6.X option value=IE4Internet Explorer 7.X option value=IE3Internet Explorer 8.X option value=NN6Netscape 6.X option value=NN4Netscape Communicator 4.X option value=NN3Netscape Navigator 3.X option value=OTHER其他 /select 2.3.3 多行文本框textarea 语法格式如下： textarea name=“名称”rows=“x” cols=“y” 用户文本 /textarea 2.3 表单元素 2.3.2 选择栏select 选择栏可分为两种：弹出式和字段式。 select标签的格式为： select size=x name=控制操作名 multiple option … … /option option … … /option … /select option标签的格式为： option selected value=可选择的内容 … /option 2.3 表单元素 2.3.3 多行文本域textarea…/textarea 在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。使用textarea标签可以设置允许成段文字的输入，格式为： textarea name=文本域名 rows=行数 cols=列数 多行文本 /textarea 其中的行数和列数是指不拖动滚动条就可看到的部分。 2.3 表单元素 在某些情况下，用户需要对表单元素进行限制，设置表单元素为只读或禁用，常应用于以下场景： 只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。 禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“