web表格与表单怎么运用
本篇内容主要讲解"web表格与表单怎么运用"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"web表格与表单怎么运用"吧!
什么是表格
表格由
标签来定义
每个表格均由若干行(由tr标签定义)
每行被分为若干个单元格(由td标签定义)
标签td指表格数据及数据单元格内容
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等
表格的表头使用
定义。 表格结构
Document 表头1 表头2 表头3 表单1 表单2 表单3 表单1 表单2 表单3 表单1 表单2 表单3 表格属性
单元格边框
单元格边距，指单元格内文字与边框的距离
表格显示方式
表格宽度
表格标签
标签定义表格的表头。该标签用于组合HTML表格的表头内容。
- 标签表格主体(正文)。该标签用于组合HTML表格的主体内容。
- 标签定义表格的页脚(脚注或表注)。该标签用于组合HTML表格中的表注内容。
tfoot元素应该与thead和tbody元素结合起来使用。
若使用thead、tfoot及tbody元素，就必须使用全部的元素。必须在table元素内部使用这些标签。
在默认情况下这些元素不会影响表格的布局。不过，可以使用CSS使这些元素改变表格的外观。
标签定义HTML表格中的行。tr元素包含一个或多个th或td元素。 标签定义HTML表格中的标准单元格。 HTML表格有两类单元格：
表头单元 - 包含头部信息(由th元素创建)
标准单元 - 包含数据(由td元素创建)
td元素中的文本一般显示为正常字体且左对齐
表格跨2列
，表格跨2行 空单元格。在一些浏览器中没有内容的表格单元可能会不显示它的边框，为了让空单元格显示边框可以在该表格单元中加一个空格占位符 。
案例1：
表格 每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
一列：
100 一行三列：
100 200 300 两行三列：
100 200 300 400 500 600 案例2：
如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格 消费项目.... 一月 二月 总计 $1001.50 $744.65 衣服 $241.10 $50.20 化妆品 $30.00 $44.45 食物 $730.40 $650.00
HTML表单
Web网页中表单的概念与作用。
表单结构语法及属性语法。
表单元素标记语法及属性语法。
域和域标题标记语法。
综合运用表单及表单元素设计网页。
表单的用途
表单是Web服务器端和客户端进行信息交互的主要桥梁。
Web服务器通过含有表单和表格控件的Web页面完成用户信息的采集。
表单有12个常用表单控件
输入框：
单行文本输入框
密码输入框
多行文本输入框
复选框
单选按钮
按钮：
普通按钮
提交按钮
重置按钮
图像按钮
文件选择框
隐藏框
下拉列表框
表单概述
表单是较为复杂的HTML元素，经常与脚本、动态网页、后台数据处理等结合在一起使用，是设计动态网页的必备元素。
利用表单可以在HTML页面中插入一些表单控件(元素)，如文本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表等，完成各类信息的采集。
案例：
表单的使用实例
表单标记
name：给表单命名，表单命名后可以用脚本语言(如JavaScript)对它进行控制。
action：指定服务器端处理表单信息的应用程序。
method：指定表单"处理表单数据方法"，method的值(get、post，默认get)。若消息要求保密度高且较长应该使用post。
enctype：enctype是encodetype，即编码类型。它规定表单数据在发送到服务器之前是否进行编码。有三种取值，分别如下：
值 描述 application/x-www-from-urlencoded 在发送前编码所有字符(默认)。该方式只能上传文本信息，不能上传文件。 multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。即表单数据既有文本又有二进制时使用该方式。 text/plain 空格转换为"+"号，但不对特殊字符编码。
HTML Form属性
HTMl
属性 描述 accept-charset 设置在被提交表单中使用的字符集(默认：页面字符集)。 action 设置向何处提交表单的地址(URL)提交页面。 autocomplete 设置浏览器是否自动补全表单(默认：开启)。 enctype 设置被提交数据的编码(默认：url-encoded)。 method 设置在提交表单时所用的HTTP方法(默认：GET)。 name 设置识别表单的名称(对于DOM使用document.forms.name)。 novalidate 设置浏览器不验证表单。 target 设置action属性中地址的目标(默认：_self)。 Action属性
action属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
一般表单会被提交到web服务器上的应用程序。
若省略action属性，则action会被设置为当前页面。
Method属性
何时使用GET？
何时使用POST？
GET是默认提交方式。如果表单提交是被动的且没有敏感信息建议用GET。
使用GET时，表单数据在页面地址栏中是可见的。
注意：GET最适合少量数据的提交，浏览器会设定容量限制。
action_page.php?firstname=Mickey&lastname=Mouse
若表单正在更新数据或包含敏感信息(例如密码)。
POST的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
method属性规定在提交表单时所用的HTTP方法(GET或POST)：
name属性
若要正确地提交表单，每个输入字段必须设置一个name属性。
案例：
HTML表单 如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。
first name 不会被提交，因为此 input 元素没有 name 属性。
用
案例：
定义域和域标题实例
定义域和域标题
利用
域标记可将表单内的相关元素进行分组。当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。
标记定义域标题。
表单信息输入
name属性，值自定义， 用来定义input元素的名称。
type属性，属性值有：text单行文本输入框、password密码输入框、checkbox复选框、image图像按钮、submit提交按钮、reset重置按钮、button普通按钮、file文件选择框、hidden隐藏框。
maxlength：设置单行文本框输入的最大字符数；
size：设置单行输入框可显示的最大字符数；
value：文本框的值，指定输入框中初始值；
readonly：只读，文本框不可编辑。
案例：
单行文本输入框实例 输入用户信息
单行文本输入框、密码框文本框
表单的主要功能是为用户提供输入信息的接口，将输入信息发送请求到服务器并等待服务器响应。
+ 复选框、单选按钮 ```html ``` 注：checked表示预选中。每一个复选框name、value属性都是不同的。每组单选按钮的name值必须相同，而value值必须不同。 案例： ```html
```复选框与单选钮的应用 + 图像按钮 ```html ``` 注：src属性是必需的，它用于设置图像文件的路径。 案例： ```html
```图像按钮实例 + 提交按钮、重置按钮和普通按钮 + \ 注：value属性默认为"提交"，可更改它来设置在按钮上的文字。点击提交按钮后表单数据会提交给服务器。 + \ 注：value属性默认为"重置"，可更改它来设置在按钮上的文字。点击重置按钮后表单域的内容会清空。 + \
三种按钮的应用 - 标签表格主体(正文)。该标签用于组合HTML表格的主体内容。