HTML表格和表单

表格

1.表格的作用：

 A.页面的布局

 B.显示规则有序的数据

 

2.表格的写法

<table>

   <tr>

      <td|th>...</td|/th>

   ...

   </tr>

   ...

</table>

说明：th只能用于第一行，用于设置列名，居中且加粗。

 

3.表格的属性（table）

width 宽度

height 高度

bgcolor 背景颜色

background 背景图像

border 边框宽度

bordercolor 边框颜色

align 水平对齐方式(left|center|right)

cellpadding 内边距(内容与框线之间的距离)

cellspacing 外边距(相邻单元格之间的距离)

<caption>表格标题</caption>:为表格设置标题，必须紧跟在<table>之后，每个表格只有1个标题。

 

4.行的属性（tr）

align 水平对齐方式(left|center|right)

valign 垂直的对齐方式(top|middle|bottom)

 

5.单元格的属性（td）

align 水平对齐方式(left|center|right)

valign 垂直的对齐方式(top|middle|bottom)

bgcolor 背景颜色

background 背景图像

rowspan  行合并的数目

colspan 列合并的数目

 

6.表格的边框设置

 6.1 frame：用于处理表格外侧的边框，其属性的值有：

  void：不显示任何边框

  above：只显示顶部边框

  below：只显示底部边框

  hsides：只显示水平方向边框

  visides：只显示垂直方向边框

  lhs：只显示左侧边框

  rhs：只显示右侧边框

  box显示所有边框

  border：显示所有边框（默认）

 

 6.2rules：用于处理表格内侧的边框，其属性的值有：

  none：不显示任何单元格之间的边框

  groups：只在行编组或列编组之间显示边框

  rows：只显示水平方向边框

  cols：只显示垂直方向边框

  all：显示所有单元格之间的边框（默认）

 

7.表格编组

 7.1表格按行编组可分为：表头、表主体、表尾

   <thead>表头</thead>:表头，每个表只有一个

   <tbody>表头</tbody>:表内容，每个表可以有多个内容编组

   <tfoot>表头</tfoot>:表尾，每个表只有一个

 

 7.2表个按列编组

   <colgroup>

      <td>...</td>

      ...

   </colgroup>

 

表单

1.表单的作用

 收集客户端的信息，然后提交给服务器。

 

2.表单的标记

 <form name="名称" action="服务器页面URL" method="提交方式(post|get)">

   ....

 </form>

 

说明：

 A.action指服务器页面URL，一般为动态类型的文件(如jsp,php等)

 B.method指表单的提交方式

   get 提交的字符数较少提交的数据以"名/值"对形式附加在URL地址栏。

   post 提交的字符数理论上讲无限制 提交数据将由HTTP请求头部一起发送。

 

3.表单的控件(表单的元素)

 3.1 说明：所有表单控件必须赋予含义明确的名称。否则服务器端取不出提交值

 

 3.2 单行文本框

  <input type="text" name="名称" value="值" size="显示宽度" maxlength="最大长度"/>

 

 3.3 密码框

  <input type="password" name="名称" value="值" size="显示宽度" maxlength="最大长度"/>

 

 3.4 单选框

  <input type="radio" name="名称" value="值" checked="checked"/>

  说明：

  A.一组类型的单选框名称必须相同

  B.必须为单选框赋予有效提交值

  C.checked是用来设置默认选项的

 

 3.5 复选框

  <input type="checkbox" name="名称" value="值" checked="checked"/>

  说明：

  A.一组类型的复选框名称必须相同

  B.必须为复选框赋予有效提交值

 

 3.6 按钮

  提交按钮

  <input type="submit" value="值" name="名称"/>

  取消按钮

  <input type="reset" value="值" name="名称"/>

  自定义按钮(其行为由js控制)

  <input type="button" value="值" name="名称"/>

 

 3.7下拉列表框

  <select name="名称" size="显示高度" multiple="multiple">

   <optgroup label="分组名称">

      <option value="值" selected="selected">....</option>

      ...

   </optgroup>

   ...

  </select>

  说明：

   A.multiple="multiple"属性可以控制是否多选。

   B.必须为列表项赋予有效提交值。

   C.selected=”selected”用来设置默认选项。

   D.在分组时，IE浏览器显示的字体加粗且倾斜，其他浏览器只加粗。

 

 3.8多行文本框

  <textarea name="名称" rows="行数" cols="列数" wrap=”换行处理方式” readonly=”readonly”>

      文本内容

  </textarea>

  说明：

  A.wrap属性有3个值，virtual、physical、off

  B.virtual表示将文本框中的内容做换行处理，但会作为一个整体发送。

  C.physical表示录入的文本会折叠，发送时也一样。

  D.off表示文本并不换行，发送时按照输入的样子发送（默认）

  E.readonly属性指定文本只读，用户无法修改初始内容，但可以进行第一次内容填写，之后该效果才生效。

 

 3.9 隐藏域

  <input type="hidden" name="名称" value="值"/>

  说明：隐藏域提交正确但无需用户干涉的信息。

 

 3.10浏览框（文件上传框）

  <input type="file" name="名称" size=”框的大小” accept=”文件类型”/>

  说明：

  A.具有浏览框的表单，其提交方式只能为post

  B.具有浏览框的表单，必须设置enctype="multipart/form-data"属性

  C.accept属性用于限制长传的文件类型，如：accept=”image/gif”,只允许上传gif格式的图像文件。

 

 3.11图像按钮

  <input type=”image” src=”图像URL” height=”图像高度” width=”图像宽度” alt=”注释” border=”value”/>

 

4.访问控制

 A.acceskey=”value”可实现快捷键的设置

 B.disable属性禁用表单元素，被禁用的元素将不被提交

 C.readonly属性在表单提交后，禁止用户修改

 D.title属性可以为用户提供提示信息

 

5.实现表单中选择框点击文字也能选择

 <input type=”checkbox|radio” name=”名称” value=”值” checked=”checked” id=”标记符号”/>

 <label for=”标记符号” >文本</label>

 

 说明：id只用于标识文本，具有唯一性，不可重复。

 

6.控件分组

 一般情况下我们应当为控件分组，使文档内容更美观紧凑。

 <fieldset>控件</fielset>:为控件分组，在一组窗口部件外面建立一个边框。

 <legend>分组控件名</legend>:为fieldset设置名称，紧跟在fieldset后。