表单

1. 表单（p184）：用来采集用户输入到网页中的数据。其功能是收集用户信息，并将信息发送给后台服务器，从而实现网页与用户之间的交互。表单通常用于用户登录、留言簿、网上报名、产品订单、网上调查及搜索界面等。

  表单的组成部分（p184）：

表单域：相当于一个容器 包含表单标签和各种表单控件。

表单标签：一些说明性文字，提示用户进行填写或选择。

表单控件：包含文本域、复选框、文件域、图像域和按钮等。（p185）

2.  操作：创建表单（p184-188）

  ①定义表单域：

<form name=”表单名称” method=”提交方式” action=”url地址”>

 各种表单控件

</form>

②在表单域内插入表格，主要用于表单各个控件的布局。因为表单控件是行级元素，不能单个一行显示。表格做简单布局，整齐划一。

  ③在表格的单元格内，插入表单标签和表单控件。

3. 表单标签 主要是文本域和按钮 其他参考p185

 ①文本域：

    单行文本域和密码域 <input>标签 单标签不成对出现

         多行文本域 <textarea> </textarea> 成对标签

 

文本域：name=””  用于标明该文本域的名称。

字符宽度：size=”” 设置文本域中最多可显示的字符数。

最多字符数：maxlength=”” 设置单行、密码文本域中最多可输入的字符数。

类型：type=”text/password” 设置文本域的类型，可在单行、多行、密码3个类型中任选一个。如果是密码类型，则网页中密码框内容用*显示。

如果是多行文本域，代码有变化。

 

初始值：value=”” 设置文本域的初始值，即在首次载入表单时文本域中显示的值。

类：class=”” 或者id=”” 将CSS规则应用于文本域对象。

②按钮 

包括普通按钮 提交按钮 重置按钮 <input>标签 单标签 不成对出现

 

按钮名称：name=”” 用于输入选中按钮的名称，每个按钮的名称不能相同。

值：value=”” 设置按钮上显示的文本。

动作：type=”” 设置用户单击按钮时将发生的操作，包括3个选项。

  提交表单：type=”submit”单击按钮时，将表单数据提交到表单指定的处理程序处理。

  重设表单：typy=”reset”将表单域内的各对象值还原为初始值。

  无：type=”button” 单击按钮时，选择为该按钮附加的行为或脚本。

类：class=”” 或者id=”” 将CSS规则应用于按钮。

③ 复选框（复选框组）

 复选框<input>标签 注意：<input>标签是行级标签 同行显示，不会自动换行 。可以使用换行标签<br />来实现换行。

 

    复选框名称：name=”” 输入一个名称。

    选定值：value=”” 输入一个选取该复选框时要发送给服务器断的应用程序或者处理脚本的值。

初始状态：checked="checked" “已勾选”项，浏览器首次加载时该选项处于被选定状态。

复选框组：自动添加一组（自定义个数）复选框。

名称：name=”” 为复选组框输入一个名称。

复选框“+”“-”：增加或者删除一个复选框。单击上下按钮为复选框项排序。

标签：单击标签下面的“复选框”，可以输入一个新名称。下图“运动”“爱好”等在此输入设置。

值：value=”” 单击下面复选框文字，可输入一个新值。

布局，使用：使用哪种布局方式进行换行。尽量选择换行符<br />，整体表单布局我们使用表格，另外，复选框组内每一项可以横向显示，在代码区域删掉<br />换行标签就可以。

 

 

④单选按钮（单选按钮组）：

多个选项中只能选择一个。尽量使用插入单选按钮组。因为单选按钮每一项之间有互斥性，只能选择一个。一组中的所有单选按钮都必须有同样的名称，但域值不同。

    类型：type=”radio”

 

⑤文件域：

上传文件，或者注册时上传头像照片。类型：type=”file”

 

⑥下拉列表：

选择年月日，或者学院、专业时。写在<select></select>标签之间。

列表的每一项写在<option></option>标签内。

初始化时选定：selected=”selected” 浏览器中显示的选项。

 

⑦图像域：

通过图像域制作各具特色的按钮图像代替默认的按钮。

 另一种做特色按钮的方法就是为按钮添加CSS样式。

 各类表单控件及标签

表单控件	控件分类	控件标签	类型 type
文本域	单行文本域	<input>	type=”text”
	密码域	<input>	type=”password”
	多行文本域	<textarea></textarea>	type=”text”
按钮	普通按钮	<input>	type=”button”
	提交按钮	<input>	type=”submit”
	重置按钮	<input>	type=”reset”
复选框	复选框/复选框组	<input>	type=”checkbox”
单选按钮	单选按钮/单选按钮组	<input>	type=”radio”
文件域		<input>	type=file”
图像域		<input>	type=”image”
下拉列表		<select></select>

4. 使用CSS设置表单样式（美化表单、表单控件）（p188-190）

    ①表单<form></form>标签 可以设置width:220px;（宽）、height:75px;（高）、background-color:red;（背景色）、border:1px solid blue;（边框）、padding:10px;（内边距）等属性。

②表单控件 1  可以使用标签选择器定义，注意标签所属父元素。使用标签选择器定义样式，会影响到网页中所有标签。如果某些标签想要不同效果，需另外设置。

在此可以设置父元素引用类，再定义父元素下表单标签样式。

           2  在表单控件便签内引用类、ID选择器。这样需要每个标签都引用。

 注意：样式设置方法择优而选。