4.表格表单

表格table:

• 表格标签

  表示

• 一个表格

  是由表头和表格内容组成的。

• 其中的每一行又是由组成的，每行中的每一格是由组成的。

• 基本语法:

  <table>
      <caption>表格标题</caption>
      <tr>
          <th>字段名1</th>
          <th>字段名2</th>
      </tr>
      <tr>
          <td>字段1对应的值</td>
          <td>字段2对应的值</td>
      </tr>
  </table>
  

• 的属性:
  • border : 边框。像素为单位
  • style=“border-collapse:collapse;”：单元格的线和表格的边框线合并
  • width：宽度。像素为单位
  • height：高度
  • bordercolor：表格的边框颜色
  • align：表格的水平对齐方式。属性值：left、right、center。这里不是设置表格内的对齐方式（可通过进行设置）
  • cellpadding：单元格内容到边的距离（内边框到内容的距离），像素为单位。默认是文字紧挨着左边的线（即默认值为0）。这里是设置到一条边的距离（默认是左线），可通过属性dir=“rtl”，改为离右线。
  • cellspacing：单元格和单元格之间的距离（外边距，即外边框到内边框的距离），像素为单位。默认为0
  • bgcolor=“#99cc66”：表格的背景颜色
  • background=“路径及文件名”：背景图片。背景图片的优先级大于背景颜色

• ：行

  • 一个表格一行一行的组成
  • 属性：
    • dir：公有属性，设置这一行单元格内容的排列方式。属性值：ltr（从左到右，left to right），rtl（right to left）
    • bgcolor：设置这一行单元格的背景色（这里没有background属性）
    • height：一行的高度
    • align：一行水平对齐方式。属性值：left、center、right
    • valign：一行垂直对齐方式。属性值：top、middle、bottom

• ：单元格：

  • 属性:
    • align：内容的水平对齐方式，属性值：left、right、center
    • valign：内容的纵向对齐方式，属性值：top、middle、bottom
    • width：绝对值或者相对值（%）
    • height：单元格的高度
    • bgcolor：设置单元格的背景色
    • background：设置单元格的背景图片
    • 单元格合并：（肯定要删除至少一个单元格）
      • colspan：横向合并
      • rowspan：纵向合并

• ：加粗的单元格，而且可以居中

  • 属性同标签

• ：表格标题

  • 使用时与tr标签并列

• 表格的标签、标签、标签

  • 有这三个标签，所写代码顺序可以任意，浏览器始终按照thead标签、tbody标签、tfoot标签顺序执行。没有这三个标签，浏览器解析显示表格内容始终从代码上面到下面。
  • 当表格非常大，内容非常多的时候，有这三个标签数据可以边获取边显示，没有这三个标签等从服务器获取完全部内容才一起显示出来

表单from:

功能:

• 表单用于向服务器传输数据，从而实现用户与web服务端的交互
• 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等
• 表单还可以包含textarea、select、fieldset、label标签。

表单属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

表单元素：

• 基本概念：
  • HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
  • 表单一般用来收集用户的输入信息
• 表单工作原理：
  • 访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
  • 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

属性：

• name：表单的名称，用于JS来操控或控制表单时使用
• id：表单的名称，用于JS来操控或控制表单时使用
• action：指定表单数据提交的地址
• method：表单提交方式，一般取值有get（默认）和post
  • post方法主要包含名称/值对，并且无须包含于action属性的URL中
  • get方法把名称/值对加在action的URL后面并且把新的URL送至服务器（不推荐使用）
• enctype：
  • 表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。
  • Enctype只能在POST方式下使用。
  • Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
  • Multipart/form-data：上传附件时，必须使用这种编码方式.

input：输入标签（文本框）（内联标签）

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框（不显示明文）
date	日期输入框
checkbox	复选框
radio	单选框
submit	提交按钮	#发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset	重置按钮	#页面不会刷新，将所有输入的内容清空
button	普通按钮
hidden	隐藏输入框
file	文本选择框	（等学了form表单之后再学这个）

属性：

type=“属性值”：文本类型

属性值

• text（默认）

• date：年月日（类似于日历）

• password：密码类型

• radio：单选按钮，必须加上name后才能互斥

• checkbox：多选按钮，name相同的按钮作为一组选择

• checked：将单选按钮或多选按钮默认处于选中状态。当用到radio属性时可以一起用（设置默认按钮）

• hidden：隐藏框，在表单中包含不希望用户看见的信息

• button：普通按钮，通过value给默认值，结合JS代码一起使用

• submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。

  • 这个按钮不需要写value自动就有“提交”文字。
  • 这个按钮也自带有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的地址去

• reset：重置按钮，清空当前表单的内容，并且设置为最初的默认值

• image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片（配合src属性插入图片）

• file：文件选择框

  • 如果要限制上传文件的类型，需要配合JS来实现验证。
  • 对上传文件的安全检查：
    1. 扩展名的检查
    2. 文件数据内容的检查

value=“内容”

• 文本框里默认的内容

size=“大小“

• 表示文本框内可以显示的字符。
• 一个英文或一个中文都算一个字符
• size属性值的单位不是像素px

readonly

• 规定文本框中内容只读，不能修改和编辑（可以不用写属性值）
• 在Google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去

disabled

• 文本框只读，不能编辑，光标点不进去，属性值可以不写

select：下拉列表标签（内联标签）

• <select>标签里面的每一项用<option>表示
• select就是“选择”，option“选项”
• select标签和ul、ol、dl一样，都是组标签

select标签的属性：

• multiple：可以对下拉列表的选项进行多选。没有属性值
• size=“2”：如果属性值大于1，则列表为滚动视图。默认属性值是1，即下拉视图

option标签的属性：

• selected：预选中，没有属性值

textarea标签：多行文本输入框（内联标签）

属性：

• value：提交给服务器的值
• rows：指定文本区域的行数
• cols：指定文本区域的列数
• readonly：只读

label标签（内联标签）

我们先来看下面一段代码：

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。

本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。

解决方法如下：

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

上方代码中，input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。

当然了，复选框也有label：（任何表单元素都有label）

<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label> 

知识来源于网上