第6章HTML表单
合集下载
HTML表单实例
• <body> • 正文 • </body> • </html>
6
软件学院
1.1.2 HTML基本语法
• HTML通过各种标记、元素、属性、对象等来建 立与文本、图形、声音、视频等多媒体信息、 超文本的链接。
• HTML的语法主要分为三种形式： （1）<标记>对象</标记> （2）<标记 属性1＝参数1 属性2＝参数 2 ... ...>对象</标记> （3）<标记>
13
软件学院
• Get: it is attached to the end of the URL by a ‘?”
/musicSearch.html?song_title=Hello&song_artist=Jones
• Post: it is a separated line after the blank line. song_title=Hello&song_artist=Jones&limit_number=
• 语言字符集(Charsets)的信息 -<meta http-equiv="Content-Type" content="text/html;charset=#">
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
6
软件学院
1.1.2 HTML基本语法
• HTML通过各种标记、元素、属性、对象等来建 立与文本、图形、声音、视频等多媒体信息、 超文本的链接。
• HTML的语法主要分为三种形式： （1）<标记>对象</标记> （2）<标记 属性1＝参数1 属性2＝参数 2 ... ...>对象</标记> （3）<标记>
13
软件学院
• Get: it is attached to the end of the URL by a ‘?”
/musicSearch.html?song_title=Hello&song_artist=Jones
• Post: it is a separated line after the blank line. song_title=Hello&song_artist=Jones&limit_number=
• 语言字符集(Charsets)的信息 -<meta http-equiv="Content-Type" content="text/html;charset=#">
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
html表格、表单相关内容知识点
一、HTML表格的基本结构HTML表格是网页中常用的一种数据展示方式，它由表格元素<table>、行元素<tr>和单元格元素<td>组成，具体结构如下：1.1 定义表格```html<table><!-- 表格内容 --></table>```1.2 定义行```html<tr><!-- 行内容 --></tr>```1.3 定义单元格```html<td><!-- 单元格内容 --></td>```二、HTML表格的基本属性HTML表格可以通过一些属性来控制其显示效果和行为，下面是一些常用的表格属性：2.1 边框属性可以通过设置border属性来定义表格的边框样式，如：```html<table border="1"><!-- 表格内容 --></table>```2.2 合并单元格可以通过设置rowspan和colspan属性来合并单元格，实现复杂的布局效果。
2.3 表头和表体可以通过使用<thead>、<tbody>和<tfoot>元素来定义表格的表头、表体和表尾部分，提高表格的语义性和可读性。
三、HTML表单的基本结构HTML表单是网页中用于收集用户输入信息的一种方式，它由表单元素<form>、输入元素<input>、选择元素<select>和按钮元素<button>等组成，具体结构如下：3.1 定义表单```html<form><!-- 表单内容 --></form>```3.2 定义输入框```html<input type="text" />```3.3 定义下拉框```html<select><option value="1">选项1</option><option value="2">选项2</option></select>```3.4 定义按钮```html<button>提交</button>```四、HTML表单的常用属性HTML表单可以通过一些属性来控制其行为和样式，下面是一些常用的表单属性：4.1 提交位置区域可以通过action属性定义表单提交的位置区域，如：```html<form action="/submit" method="post"><!-- 表单内容 --></form>```4.2 提交方式可以通过method属性定义表单的提交方式，一般有get和post两种方式。
第6章 表格与表单
总结:间距cellspacing的作用
再设置填充为10
<table border="20" cellspacing="10 " cellpadding="10" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
可见：设置表格边框为0时，会使单元格边框也变为0象素， 而设置表格边框为其他数值时，不会影响单元格边框的宽
再设置背景颜色为玫瑰色
<table border="20" bgcolor="#9933CC" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
表格标记
表格是由<table>定义的，行由<tr>定义，单元格 由<td>定义，因此<table>、<tr>、<td>是表格中 三个最基本的标记，必须一起出现。 表格中的单元格<td>能容纳网页中的任何元素，如 图像，文本，列表，表单，表格等。
HTML制作表单ppt课件
name=“login”>
用户名：<input type ="text" name="userName"/> <br/>
年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
action属性值：url地址
</form> Nhomakorabea相对或绝对路径
• 创建图像按钮
• <input type=“image” scr=“图像地址” name=“控
件名称”/>
▪ type属性：image ▪ name属性值：控件名称 ▪ src属性值：图像文件地址
代码 示例
22
<input>——隐藏控件
• 创建隐藏控件
• <input type=“hidden” name=“控件名”/>
• size属性：文本框长度
• maxlength属性：文本框最多输入字符数
• value属性：文本框中默认值
代码 示例
15
<input>——密码框
• 创建一个密码文本框 • <input type="password" name="名称" size="NB"
maxlength="NB"/>
• type属性值：password • name属性值：控件名称 • size属性值：指定密码框大小 • maxlength属性值：允许输入最多字符 • 输入的文本显示为密码形式
HTML进度计划表
备考
1
2－28
3－3
3－4
第1章HTML简介 第2章 文字版面的编辑
上机：认识HTML、文字版面的编辑
2
3－7
3－10
3－11
第3章 建立超链接
上机：建立超链接
3
3－14
3－17
3－18
第4章 图像的处理 第5章 列表项目
上机：图像处理、设计列表
4
3－21
3－24
3－25
第6章 表格（一）
上机：设计表格
施工进度计划表进度计划表工程进度计划表月进度计划表毕业设计进度计划表项目进度计划表施工进度计划表范本施工总进度计划表建筑施工进度计划表工程施工进度计划表
教学进度表
2004~2005学年第二学期网络03专业填写日期：2005年3月2日
课程名称：任课教师：课程总学时：
周数
日期
课程内容：包括课堂讲课、习题课、实验、实习、校外参观、阶段检测、其中考试、期末复习等安排
5
3－28
3－31
4－1
第6章 表格（二）
上机：设计表格
6
4－4
4－7
4－8
第7章 窗口框架
上机：窗口框架
7
4－11
4－14
4－15
第8章 表单的设计
上机：设计表单
8
4－18
4－21
4－22
第9章 网页的动态效果
上机：页面的动态效果
9
4－25
4－28
4－29
第10章CSS的基础知识 第11章CS0
11
5－9
5－12
5－13
第11章CSS的属性（二） 第12章CSS滤镜
上机：CSS滤镜的使用
1
2－28
3－3
3－4
第1章HTML简介 第2章 文字版面的编辑
上机：认识HTML、文字版面的编辑
2
3－7
3－10
3－11
第3章 建立超链接
上机：建立超链接
3
3－14
3－17
3－18
第4章 图像的处理 第5章 列表项目
上机：图像处理、设计列表
4
3－21
3－24
3－25
第6章 表格（一）
上机：设计表格
施工进度计划表进度计划表工程进度计划表月进度计划表毕业设计进度计划表项目进度计划表施工进度计划表范本施工总进度计划表建筑施工进度计划表工程施工进度计划表
教学进度表
2004~2005学年第二学期网络03专业填写日期：2005年3月2日
课程名称：任课教师：课程总学时：
周数
日期
课程内容：包括课堂讲课、习题课、实验、实习、校外参观、阶段检测、其中考试、期末复习等安排
5
3－28
3－31
4－1
第6章 表格（二）
上机：设计表格
6
4－4
4－7
4－8
第7章 窗口框架
上机：窗口框架
7
4－11
4－14
4－15
第8章 表单的设计
上机：设计表单
8
4－18
4－21
4－22
第9章 网页的动态效果
上机：页面的动态效果
9
4－25
4－28
4－29
第10章CSS的基础知识 第11章CS0
11
5－9
5－12
5－13
第11章CSS的属性（二） 第12章CSS滤镜
上机：CSS滤镜的使用
HTML 表单ppt课件
label标签的for属性应当与相关元素的id属性相同labelforman男labelinputtyperadionamesexvalue男idman表单元素标记2021精选ppt145多行文本框textareaname多行文本框名称cols每行中的字符数rows显示的行数初始内容textarea表单元素标记2021精选ppt156列表框a菜单式selectname列表框名称optionselectedselected哪个为初始选择就添加selected语句只有一个value提交值列表1optionoptionvalue提交值列表2optionselect分组optgrouplabel分组名称optgroup表单元素标记2021精选ppt16例如
最新课件
25
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" /> 2. 重置按钮 <input type="reset" value="" /> 3. 普通按钮 <input type="button" value="" /> 4. 图片按钮 <input type="image" src="" />
最新课件
27
<form action="Echo64.asp" method="POST">
最新课件
28
<% name = Request("Name")
最新课件
25
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" /> 2. 重置按钮 <input type="reset" value="" /> 3. 普通按钮 <input type="button" value="" /> 4. 图片按钮 <input type="image" src="" />
最新课件
27
<form action="Echo64.asp" method="POST">
最新课件
28
<% name = Request("Name")
第6章 表格与表单
注意: cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离 ，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子 模型的内外边距理解cellpadding与cellspacing的不同。
6.1 表格标记
• 6.1.2 <table>标记的属性
4、width与height属性
设置单元格的背景图像 设置单元格横跨的列数（用于合并水平方向 的单元格） 设置单元格竖跨的行数（用于合并竖直方向 的单元格）
rowspan
正整数
6.1 表格标记
• 6.1.4 <td>标记的属性
注意:
让IT教学更简单，让IT学习更有效
1、在<td>标记的属性中，重点掌握colspan和rolspan，其他的属性了解 即可，不建议使用，均可用CSS样式属性替代。 2、当对某一个<td>标记应用width属性设置宽度时，该列中的所有单元 格均会以设置的宽度显示。 3、当对某一个<td>标记应用height属性设置高度时，该行中的所有单元 格均会以设置的高度显示。
6.2 CSS控制表格样式
• 6.2.2 CSS控制单元格边距
让IT教学更简单，让IT学习更有效
– 使用<table>标记的属性美化表格时，可以通过cellpadding和 cellspacing分别控制单元格内容与边框之间的距离以及相邻单元 格边框之间的距离。
注意: 行标记<tr>无内边距属性padding和外边距属性margin，本书不再做 具体的演示，初学者可以自己测试加深理解。
属性名 含义 常用属性值
height
align valign
html6表格
第10节表格的使用10.1 表格的构成元素表格:<table></table>行：<tr></tr>列：<td></td>代码结构：表格永远包括的是行，行永远包括的是列，也就是说<tr>..</tr>中永远都包括<td>...</td>但它的都属于<table>...</table>中.<table><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table>以上代码说明建立了一个三行两列的表格.10.2 设置表格的标题caption语法：<caption>...</caption>将此代码加入到第一个<table>下方。
例如：<table width="200" border="1"><caption>表格的标题部分</caption><tr><td> </td><td> </td><td> </td></tr></table>10.3 表头TH语法：<th>..</th>此代码表示表格的表头的部分。
例：<table width="200" border="1"><caption>小学成绩表</caption><th>姓名</th><th>语文</th><th>数学</th><tr><td>小明</td><td>85.5</td><td> </td></tr><tr><td>小红</td><td>90</td><td> </td></tr></table>由上例看出：表头的个数由列决定，有几个列那么就有几个表头。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• name name属性用于指定表单的名称，以区分同一个页面中的多个表单。 注意： <form>标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义， 就必须在<form>与</form>之间添加相应的表单控件。
6.1 【案例15】案例实现
6.2 【案例16】趣味选择题
案例引入
学习表单的核心是学习表单控件，HTML 语言提供了一系列的表单控件，用于定义不同 的表单功能，如文本输入框、下拉列表、复选 框等。本节将通过表单元素的input控件制作 一个“趣味选择题”效果，如下图所示。
6.3 【案例17】知识点讲解 2、select控件
（2）单击插入栏上方的“表单”选项，会弹出相应的表单工具组，如下图 所示。
（3）单击表单工具组中不同的选项，即可生成不同的表单控件，例如单击 “ ”选项时，会生成一个单行文本输入框。
6.3 【案例17】案例实现
6.4 【案例18】学员档案
学员档案用于对学生信息进行统一管理，
6.2 【案例16】知识点讲解
1、input控件
（4）复选框<input type="checkbox" /> 复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性， 指定默认选中项。 （5）普通按钮<input type="button" /> 普通按钮常常配合javaScript脚本语言使用，初学者了解即可。 （6）提交按钮<input type="submit" /> 提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提 交按钮才能完成表单数据的提交。可以对其应用value属性，改变提交按钮上的 默认文本。
1、认识表单
对于表单构成中的表单控件、提示信息和表单域，初学者可能比较难理解， 对它们的具体解释如下：
• 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、 复选框、提交按钮、重置按钮等。
• 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进 行填写和操作。
• 表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可 以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器 的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
除了type属性之外，<input />标记还可以定义很多其他的属性，其常用属性 如下表所示。
ቤተ መጻሕፍቲ ባይዱ属性
type
name value size readonly disabled checked maxlength
text password radio checkbox button submit reset image hidden file 由用户自定义 由用户自定义 正整数 Readonly
6.1 【案例15】知识引入
知识引入
认识表单 创建表单
6.1 【案例15】知识点讲解
1、认识表单
对于“表单”初学者可能比较陌生，其实它们在互联网上随处可见，例如注 册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单相关的标记定 义的。简单地说，“表单”是网页上用于输入信息的区域，它的主要功能是收集 用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。
6.2 【案例16】知识引入
知识引入
Input控件
6.2 【案例16】知识点讲解 1、input控件
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重 置按钮等，要想定义这些元素就需要使用input控件，其基本语法格式如下：
<input type="控件类型"/>
6.2 【案例16】知识点讲解 1、input控件
（左）
（右）
6.3 【案例17】知识点讲解
2、select控件
使用select控件定义下拉菜单的基本语法格式如下：
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ...
</select>
在上面的语法中，<select></select>标记用于在表单中添加一个下拉菜单， <option></option>标记嵌套在<select></select>标记中，用于定义下拉菜单中的 具体选项，每对<select></select>中至少应包含一对<option></option>。
6.3 【案例17】知识点讲解
2、select控件
多学一招：使用Dreamweaver工具生成表单控件 通过前面的介绍已经知道，在HTML中有多种表单控件，牢记这些表单控件， 对于初学者来说比较困难。然而Dreamweaver工具很贴心，使用Dreamweaver 可以轻松地生成各种表单控件，具体步骤如下： （1）选择菜单栏中的【窗口】→【插入】选项，会弹出插入栏，默认效果 如下图所示。
6.1 【案例15】知识点讲解
2、创建表单
通过认识表单，我们知道要想让表单中的数据传送给后台服务器，就必须定 义表单域。在HTML中，<form></form>标记被用于定义表单域，即创建一个表 单，以实现用户信息的收集和传递，<form> </form>中的所有内容都会被提交给 服务器。创建表单的基本语法格式如下：
disabled
checked 正整数
属性值
描述 单行文本输入框 密码输入框 单选按钮 复选框 普通按钮 提交按钮 重置按钮 图像形式的提交按钮 隐藏域 文件域 控件的名称 input控件中的默认文本值 input控件在页面中的显示宽度 该控件内容为只读（不能编辑修改）
第一次加载页面时禁用该控件（显示为灰 色） 定义选择控件默认被选中的项 控件允许输入的最多字符数
6.2 【案例16】知识点讲解 1、input控件
（7）重置按钮<input type="reset" /> 当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可 以对其应用value属性，改变重置按钮上的默认文本。 （8）图像形式的提交按钮<input type="image" /> 图像形式的提交按钮用图像替代了默认的按钮，外观上更加美观。需要注意 的是，必须为其定义src属性指定图像的url地址。 （9）隐藏域<input type=" hidden" /> 隐藏域对于用户是不可见的，通常用于后台的程序，初学者了解即可。
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容
</textarea>
6.3 【案例17】知识点讲解 2、select控件
浏览网页时，经常会看到包含多个选项的下拉菜单，例如选择所在的城市、 出生年月、兴趣爱好等。如图左所示即为一个下拉菜单，当点击下拉三角时，会 出现一个选择列表，如图右所示。
案例引入
空间日志是一个日记发布平台，用户可 以在这里记录心情随笔、日常见闻及所思所 想等。本节将通过表单元素的textarea控件及 select控件制作一个空间日志的发布页面，如 下图所示。
6.3 【案例17】知识引入
知识引入
textarea控件 select控件
6.3 【案例17】知识点讲解
<option>
selected
定义selected =" selected "时，当前项即为默认选 中项。
6.3 【案例17】知识点讲解 2、select控件
上面我们实现了不同的下拉菜单效果，但是，在实际网页制作过程中，有时 候需要对下拉菜单中的选项进行分组，这样当存在很多选项时，要想找到相应的 选项就会更加容易。如下图所示即为选项分组后的下拉菜单中选项的展示效果。
6.1 【案例15】知识点讲解
1、认识表单
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信 息和表单域3个部分构成，如下图所示，即为一个简单的HTML表单界面及其构 成。
表单域 (容纳表单控件 和提示信息)
提示信息
表单控件 (包含单行文本输入框、密 码输入框、提交按钮等)
6.1 【案例15】知识点讲解
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件
</form>
6.1 【案例15】知识点讲解
2、创建表单
action、method和name为表单标记<form>的常用属性，下面针对它们进行 解释。
• action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于 指定接收并处理表单数据的服务器程序的url地址。 例如： <form action="form_action.asp">
6.2 【案例16】知识点讲解 1、input控件
（10）文件域<input type="file" /> 当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可 以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。
6.2 【案例16】案例实现
6.3 【案例17】空间日志
6.4 【案例18】案例实现
6.3 【案例17】知识点讲解 2、select控件
6.1 【案例15】案例实现
6.2 【案例16】趣味选择题
案例引入
学习表单的核心是学习表单控件，HTML 语言提供了一系列的表单控件，用于定义不同 的表单功能，如文本输入框、下拉列表、复选 框等。本节将通过表单元素的input控件制作 一个“趣味选择题”效果，如下图所示。
6.3 【案例17】知识点讲解 2、select控件
（2）单击插入栏上方的“表单”选项，会弹出相应的表单工具组，如下图 所示。
（3）单击表单工具组中不同的选项，即可生成不同的表单控件，例如单击 “ ”选项时，会生成一个单行文本输入框。
6.3 【案例17】案例实现
6.4 【案例18】学员档案
学员档案用于对学生信息进行统一管理，
6.2 【案例16】知识点讲解
1、input控件
（4）复选框<input type="checkbox" /> 复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性， 指定默认选中项。 （5）普通按钮<input type="button" /> 普通按钮常常配合javaScript脚本语言使用，初学者了解即可。 （6）提交按钮<input type="submit" /> 提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提 交按钮才能完成表单数据的提交。可以对其应用value属性，改变提交按钮上的 默认文本。
1、认识表单
对于表单构成中的表单控件、提示信息和表单域，初学者可能比较难理解， 对它们的具体解释如下：
• 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、 复选框、提交按钮、重置按钮等。
• 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进 行填写和操作。
• 表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可 以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器 的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
除了type属性之外，<input />标记还可以定义很多其他的属性，其常用属性 如下表所示。
ቤተ መጻሕፍቲ ባይዱ属性
type
name value size readonly disabled checked maxlength
text password radio checkbox button submit reset image hidden file 由用户自定义 由用户自定义 正整数 Readonly
6.1 【案例15】知识引入
知识引入
认识表单 创建表单
6.1 【案例15】知识点讲解
1、认识表单
对于“表单”初学者可能比较陌生，其实它们在互联网上随处可见，例如注 册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单相关的标记定 义的。简单地说，“表单”是网页上用于输入信息的区域，它的主要功能是收集 用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。
6.2 【案例16】知识引入
知识引入
Input控件
6.2 【案例16】知识点讲解 1、input控件
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重 置按钮等，要想定义这些元素就需要使用input控件，其基本语法格式如下：
<input type="控件类型"/>
6.2 【案例16】知识点讲解 1、input控件
（左）
（右）
6.3 【案例17】知识点讲解
2、select控件
使用select控件定义下拉菜单的基本语法格式如下：
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ...
</select>
在上面的语法中，<select></select>标记用于在表单中添加一个下拉菜单， <option></option>标记嵌套在<select></select>标记中，用于定义下拉菜单中的 具体选项，每对<select></select>中至少应包含一对<option></option>。
6.3 【案例17】知识点讲解
2、select控件
多学一招：使用Dreamweaver工具生成表单控件 通过前面的介绍已经知道，在HTML中有多种表单控件，牢记这些表单控件， 对于初学者来说比较困难。然而Dreamweaver工具很贴心，使用Dreamweaver 可以轻松地生成各种表单控件，具体步骤如下： （1）选择菜单栏中的【窗口】→【插入】选项，会弹出插入栏，默认效果 如下图所示。
6.1 【案例15】知识点讲解
2、创建表单
通过认识表单，我们知道要想让表单中的数据传送给后台服务器，就必须定 义表单域。在HTML中，<form></form>标记被用于定义表单域，即创建一个表 单，以实现用户信息的收集和传递，<form> </form>中的所有内容都会被提交给 服务器。创建表单的基本语法格式如下：
disabled
checked 正整数
属性值
描述 单行文本输入框 密码输入框 单选按钮 复选框 普通按钮 提交按钮 重置按钮 图像形式的提交按钮 隐藏域 文件域 控件的名称 input控件中的默认文本值 input控件在页面中的显示宽度 该控件内容为只读（不能编辑修改）
第一次加载页面时禁用该控件（显示为灰 色） 定义选择控件默认被选中的项 控件允许输入的最多字符数
6.2 【案例16】知识点讲解 1、input控件
（7）重置按钮<input type="reset" /> 当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可 以对其应用value属性，改变重置按钮上的默认文本。 （8）图像形式的提交按钮<input type="image" /> 图像形式的提交按钮用图像替代了默认的按钮，外观上更加美观。需要注意 的是，必须为其定义src属性指定图像的url地址。 （9）隐藏域<input type=" hidden" /> 隐藏域对于用户是不可见的，通常用于后台的程序，初学者了解即可。
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容
</textarea>
6.3 【案例17】知识点讲解 2、select控件
浏览网页时，经常会看到包含多个选项的下拉菜单，例如选择所在的城市、 出生年月、兴趣爱好等。如图左所示即为一个下拉菜单，当点击下拉三角时，会 出现一个选择列表，如图右所示。
案例引入
空间日志是一个日记发布平台，用户可 以在这里记录心情随笔、日常见闻及所思所 想等。本节将通过表单元素的textarea控件及 select控件制作一个空间日志的发布页面，如 下图所示。
6.3 【案例17】知识引入
知识引入
textarea控件 select控件
6.3 【案例17】知识点讲解
<option>
selected
定义selected =" selected "时，当前项即为默认选 中项。
6.3 【案例17】知识点讲解 2、select控件
上面我们实现了不同的下拉菜单效果，但是，在实际网页制作过程中，有时 候需要对下拉菜单中的选项进行分组，这样当存在很多选项时，要想找到相应的 选项就会更加容易。如下图所示即为选项分组后的下拉菜单中选项的展示效果。
6.1 【案例15】知识点讲解
1、认识表单
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信 息和表单域3个部分构成，如下图所示，即为一个简单的HTML表单界面及其构 成。
表单域 (容纳表单控件 和提示信息)
提示信息
表单控件 (包含单行文本输入框、密 码输入框、提交按钮等)
6.1 【案例15】知识点讲解
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件
</form>
6.1 【案例15】知识点讲解
2、创建表单
action、method和name为表单标记<form>的常用属性，下面针对它们进行 解释。
• action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于 指定接收并处理表单数据的服务器程序的url地址。 例如： <form action="form_action.asp">
6.2 【案例16】知识点讲解 1、input控件
（10）文件域<input type="file" /> 当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可 以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。
6.2 【案例16】案例实现
6.3 【案例17】空间日志
6.4 【案例18】案例实现
6.3 【案例17】知识点讲解 2、select控件