WEB应用开发工程师 6表单设计.ppt

表单设计 教学基本要求 重点掌握form标签的属性、用法以及form标签中所包含的input、select、option和textarea四个标签的用法，为今后的学习打下坚实的基础。 主要内容 建立表单 输入标记 选择标记 多行文本框 综合案例 建立表单 表单是网站管理者与浏览者之间沟通的桥梁 表单由描述表单元素的HTML代码和客户端的脚本构成。 由成对标签form来定义。 其语法格式如下： form name = “form_name” method = “method” action = “url” … … /form 表单属性 form标签有三个基本的属性： name属性 定义表单的名称。表单提交后，Web服务器的表单处理程序根据该属性的值识别各表单。 method属性 定义表单信息提交的方法，可取get和post两个值。当参数为get时表示从服务器获取信息，提交信息通过URL传递，总长度不能超过8192个字符；当参数为post时表示向服务器发送信息，提交信息的长度没有限制。默认情况下为get方式提交。 action属性 用来指出表单提交的地址。 输入标记 - input 定义页面上表单中的几种常见组件 语法格式：input 属性列表 … 属性说明： name = “组件标识名” type=“组件类型” maxlength = “用户输入的最大字符数” size =“文本框的可显示的字符数” value = “文本框初始文本” 输入标记 - input type属性取值 描述 text 单行文本框 password 密码框 button 普通按钮 submit 提交按钮 reset 重置按钮 radio 单选框 checkbox 复选框 file 文件输入框 input 单行文本框 语法格式示例： input type=“text” name = “yourname” size = 30 maxlength = 100 value = “在此输入” input标签的type属性的值为“text”时，表示该输入项标识了一个单行文本框。 input 单行文本框 单行文本框示例： input 单行文本框 单行文本框示例代码： html head title输入用户姓名/title /head body form 请输入你的姓名： input type=text name=yourname size = 30 maxlength =100 value=在此输入 input type=submit value=提交 /form /body /html input 密码输入框 input标签的type属性的值为password时，表示该输入项为密码输入框，输入的内容以*表示（屏蔽输入内容）。 其语法格式为： input type=“password” … 密码框示例： input 密码输入框 密码框示例代码： html headtitle输入用户姓名和密码 /title/head body center form 用户名： input type=text name=yournamebrp/p 密码： input type=password name=yourpwbrp/p input type=submit value=登录 /form /center /body /html input 按钮 input type=button/submit/reset value=“按钮上文字” … 普通按钮 button 常用来配合JavaScript脚本处理表单 提交按钮 submit 单击它时可以实现表单内容的提交（传送给给服务器） 重置按钮 reset 单击重置按钮时，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。 input 按钮 按钮示例 input 按钮 html head title按钮种类示例/title /head body h1注册/h1 form name=register method=post action=index.asp 用户：input type=text name=username size=20br