网页设计课件ch8表单的设计072.ppt

第8章 表单的设计 HTML是利用表单（Form）来设计交互界面的。 表单工作原理 8.2.1 文本框text 8.2.2 提交按钮submit与重置按钮reset 8.2.3 密码框password 8.2.4 单选框radio 8.2.5 复选框checkbox 8.2.6 图像按钮image 8.2.7 隐含框hidden 8.2.8 文件选择输入框file 举例 html headtitle输入用户姓名/title/head body form action=yourname.asp method=get 请输入你的姓名： input type=text name=yourname input type=submit value=提交 /form /body /html html body form action = choose.asp method = post 你最喜欢的水果是： select name=fruit option value=apple苹果 option value=orange桔子 option value=mango芒果 /select input type=submit value=提交 /form /body /html 实例：下拉框(select)单选 htmlheadtitle选择/title/head body form action = choose.asp method = post 你最喜欢的水果是：br select name=fruit multiple option value=apple苹果 option value=orange桔子 option value=mango芒果 /select br input type=submit value=提交 /form /body /html 实例：下拉框多选 * * 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。 例如： 表单作用 8.1 form标签 8.2 input标签 8.3 下拉菜单select/option 8.4 多行文本框textarea 第8章 表单的设计 表单标签form是成对标签，首标签form和尾标签/form之间的内容就是一个表单。 表单form中的HTML代码要完成两件事情：一是指出服务器程序的路径和名称，二是要将给定信息传递给服务器程序。 8.1 form标签 Form表单的基本格式： 在HTML中，form的语法结构如下： form action=… method=… 　input 　… 　select…/select 　… 　textarea…/textarea /form 在form标签里有二个属性：action、method。 1．action属性 action属性指出该表单所对应的处理程序的位置。它的参数值就是该程序的URL。 2．method属性 method属性用于指定该表单的运行方式。属性的参数值为get和post之一，默认的方式是get。当值为get时表示该表单主要是从服务器中获取信息，因此它传送给服务器的反馈信息长度不能超过255个字符；当值为post时表示该表单主要是向服务器发送信息的，它传送给服务器的反馈信息长度没有限制。 8.2 input标签 input是个单标签，它必须嵌套在表单标签中使用。 input标签有六个属性：type、name、size、value、maxlength和checked，其中name和type是两个必选属性。 服务器处理程序通过name属性值来提取用户所输入的信息。 type属性指定input的类型 input标签说明 type主要有九种类型：text、password、radio、checkbox、submit、reset、image、hidden和file。 当type的类型为text时，表示单行文本框。 格式：input　type=“text”　name=“”　size=“”　 value =“”　 maxlength =“” 8.2.1 文本框text 1．size属性：用于指定文本框的长度，默认值为20，以字节为单位。 2．value属性：设定预先出现在文本框中的内容。 3．maxlength属性：表示该文本框允许用户输入的最大字符数。此值总是大于或等于size属性的参数值。当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过部分的内容。 属性说明 8.2.2 提交按钮submit