实验六-HTML列表与表单实验.doc

ADDIN CNKISM.UserStyleHTML+CSS实验报告 实验六 HTML的表格设置 一、实验目的 掌握HTML列表和表单的设置方法。 二、实验内容 1. 熟练使用OL、UL标签为网页添加列表。 2. 掌握各种类型表单的添加方式。 3. 掌握表单数据传送的基本原理。 三、实验原理 1、列表 列表可分为有序列表、无序列表和定义列表 有序列表ol： ol type=列表类型 start=起始编号 li.../li /ol type的属性值： 1：数字（默认） a：小写字母 A：大些字母 i：小写罗马数字 l：大写罗马数字 无序列表ul： ul type=列表类型 li.../li /ul type的属性值： disc：实心圆（默认） circle：空心圆 square：实心矩形 定义列表dl dl dt一个术语/dt dd这个术语的定义/dd /dl dl：定义一个定义列表 dt：定义了定义列表中的一个术语 dd：对定义列表中的术语提供定义 2、表单 表单的作用 搜集不同类型的用户输入，通过form创建表单，在form中添加其他表单可以包含的控件元素。 用于显示信息，并提交到服务器。 表单元素 form定义表单 主要属性： method：表单数据提交的方式，取值为get或post。get是将数据放在url中，并且对数据的大小有限制，不安全。post是不要将数据显示在url中，而且传输的数据一般无限制，安全。 action：指定将数据提交到哪里。 name：表单名称。 部分表单控件元素 表单可以包含许多不同的表单控件，表单控件元素用来让访问者输入信息 input是最重要的表单元素，input有很多形态，根据不同的type属性有不同的作用。type：text（文本输入）、password（密码）、radio（单选输入）、checkbox（多选输入）。PS：设置单选时一定要将name设置一致 name：提交表单数据必须要有name属性 required：设置表单控件必须填写 readonly：设置内容只读 value：设置默认值 checked：设置radio和checkbox的默认值 maxlength：设置最大字符数 Select下拉列表 selected：默认选中项 size：让用户看到几个选项 option：列表项 textarea文本域 cols：设置宽，用字符数设置 rows：设置高 示例： textarea name=message rows=10 cols=30 The cat was playing in the garden. /textarea 按钮： 1）提交按钮 input type=submit/` 2）重置按钮 input type=reset/ 3）普通按钮 input type=button/与JS搭配使用 四、实验步骤 1、请使用无序列表实现如下图效果。 2、请使用有序列表实现如下图效果。 3、请使用表单实现如下图效果。 说明： 1）学历栏目分：博士、硕士、本科、专科、高中、初中 2）意向工作城市栏分广州、深圳、武汉、成都、北京、上海，要求显示3栏。 3）要求点击OK按钮后有数据传送提示，如下所示 五、实验报告提交 确保所有页面能正常跳转后，将本次实验所有完成文档打包上传课堂派。