HTML与CSS教学-第九章 创建表单

 

第九章 创建表单
本章要点
常用表单标记的意义及使用
表单布局标记的意义及使用

目录：
9.1 表单的作用
9.2 表单标记
9.3 表单布局标记

9.1  表单的作用
HTML中的表单(form)是网页中最常用的组件，是网站服务器端与客户
端之间沟通的桥梁。表单在网上随处可见，它们被用于在登录页面输
入用户名和密码，对博客进行评论等。

9.2  表单标记
1.form
可用<form>标记来定义一个表单，当一个表单被定义后就可在表单内放置表单标记。表单使用<form>作为开始标记，以</form>结尾。在一个HTML页面中允许有多个表单，以表单的名字（name）和（id）作为它们之间的区分。表单格式的代码如下：
<form 表单标记的各种属性设置>
 设置各种表单标记
</form>

2.input
最常用的表单控件是input，这一类的表单控件被称为输入类控件，通过<input>来标记。输入类控件有很多种类型，通过type属性进行设置。<input>标记可以为表单提供单行文本输入框、单选按钮、复选按钮、普通按钮等。

3.textarea
HTML语言提供了多行文本的输入框，这是接收大量数据的文本区，它可以用于数据的输入，又可用于数据的显示区域。实现多行文本输入区的标记为<textarea>，其语法为：
<textarea class=“class name”id=“ID name”cols=“number”rows=“number”style=“style information”read only>在文本区中显示内容</textarea>

4. select和option
HTML语言支持具有选择功能的标记<select>。使用选择功能方便了用户在多个选项中进行选择，提高了窗口区域的利用率。通过对<select>标记的属性size的值的设置，可产生不同的列表形式：如下拉列表和滚动列表。对属性multiple进行设置，可以使同时选择多个列表项。<select>标记是定义一个列表结构的标记，列表中的列表项（或称菜单项）是真正被选择的对象，对它的定义要用<option>标记。因此，设置一个列表，要同时使用<select>和<option>标记。

<select class=“class name” id=“id name” name=“selectname” size=“number” multiple >
option标记
</select>

5.optgroup
<optgroup>标记可以对选项进行分组，通过<optgroup>标记可以对选项进行分类，并使用label属性在下拉列表里显示为一个不可选的缩进标题。语法如下：

 <optgroup label="组名">

9.3  表单布局标记
1.fieldset和legend
<fieldset>标记可将表单内的相关标记分组。当一组表单控件放到<fieldset>标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，甚至可创建一个子表单来处理这些标记。

<legend>标记为<fieldset>标记定义标题，<legend>且必须在<fieldse>标记中使用。

2.label
 可以对form表单中的文本内容关联一个<label>标记，并使用<label>标记的for属性使其与表单组件关联起来，效果为单击文本是，光标显示在相关联的表单组件内。使用时要将lable绑定到其它的控件，将<lable>标记的for属性设置为与该控件的id相同。将lable绑定到控件的name属性没有作用。语法为：

 <label for="fname">显示内容字符串</label>