WEB前端技术第6讲 表格与表单.ppt

组成部分：根据实现的功能的不同，可将表单分成以下两个部分： 描述表单元素的HTML源代码 客户端的脚本以及服务器端用于处理访问者所输入信息的程序 表单的基本工作原理 1) 表单组成标记 表单是网页上的一个特定区域，主要由下表所列标记构成。 标 记 描 述 form 定义一个表单区域以及携带表单的相关信息 input 设置输入表单元素 select 设置菜单或列表元素 option 定义菜单或列表元素中的选项 textarea 设置表单文本域元素 根据表现形式的不同，可将表单元素分为三大类：输入元素、文本域元素及选择列表元素，分别对应标记input、textarea和select 表6-1 form标记作用： 限定表单的范围，即定义一个区域，表单各元素都要设置在这个区域内，单击提交按钮时，提交的也是这个区域内的数据 携带表单的相关信息，如处理表单的脚本程序的位置、提交表单的方法等 2) 表单标记form 基本语法 form name=“form_name” method=“get/post” action|onsubmit=“url” … /form 表6-2 form标记常用属性 属 性 描 述 name 设置表单名称，用于脚本引用 method 定义表单内容从客户端传送到服务器的方法，包括两种方法：get和post；默认时使用get方法 action 用于定义表单处理程序的位置 onsubmit 用于定义表单处理脚本的位置 enctype 设置MIME类型，默认值为 application/x-www-form-urlencoded。需要上传文件到服务器时，应将该属性设置为multipart/form-data 数据发送形式 数据从浏览器向服务器发送时，会分成HTTP头和HTTP正文体两部分来发送。其中头包含有关用户代理、服务器信息、内容类型等信息，这些信息通常以纯文本发送，因而不安全；而HTTP正文体包含正文实体，这些信息是编码后再发送的，所以比HTTP头发送的信息更安全 POST和GET提交方法的比较 GET方法是将表单数据以HTTP头的形式附加到URL地址后面，因而不安全；而POST方法则是以HTTP正文体形式发送，因而相对比较安全。 GET方法对传送数据的长度有限制，不能超过8K个字符；而POST方法无此限制。 GET方法只能传送ASCII码的字符；而POST方法没有字符码的限制，它可以传送包含在ISO10646中的所有字符。 表单默认的提交方法是GET，当数据涉及到保密问题或所传送的数据是用于执行插入或更新数据库操作时，必须使用POST方法；否则可以使用GET方法 基本语法 input type=“type_name” name=“field_name” 语法解释 type属性用于设置不同类型的输入域，可设置的域的类型请参见表6-3；name属性指定域的名称。 3) 输入标记input 表6-3 type属性值 type属性值 描 述 text 设置文字域 password 设置密码域 file 设置文件域 hidden 设置隐藏域 radio 设置单选框 checkbox 设置复选框 button 设置普通按钮 submit 设置提交按钮 reset 设置重置按钮 image 设置图像域(图像提交按钮) 文本框text 作用 设置单行输入文本框，用于访问者在其中输入文本信息，输入的信息将以明文显示 语法格式 input type=“text” name=“field_name” maxlength=“value” size=“value” value=“field_value” 属 性 描 述 name 设置文字域的名称，在脚本中用于获取域的数据 maxlength 设置在文字域中最多可输入的字符数 size 控制文本框的长度，单位是像素，默认值是24个像素 value 设置文字域的默认值 文字域示例 姓名：input type=“text” size=“12” maxlength=“20” name=“user_name” 密码域password 作用 设置单行密码输入框，用于访问者在其中输入密码信息，默认以“*”或 “?”回显所输入的密码 语法格式 input type=“password” name=“field_name” maxlength=“value” size=“value” value=“field_value” 密码域示例 密码：input type=“password” size=“12” maxlength=“20” name=“psw” 隐藏域hidden 作用 隐藏域在页面