表格和表单

表格和表单

1、表格
（1）创建表格

<table>
      <tr>
          <td>单元格内文字</td>
          ...
       </tr>
       ...
</table>

上述三种标签是创建HTML网页中表格的基本标签，缺一不可。
<table></table>：用于定义一个表格的开始和结束。在<table>标签内部，可以放置表格的标题、表格行和单元格等。
<tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标签中，在table标签内包含几对tr标签，就表示该表格有几行。
<td></td>：用于定义表格中的单元格，必须嵌套在tr标签内，一对tr标签中包含几对td标签，就表示该行中有多少列（或者多少个的单元格）。
创建表格的基本标签为<table></table>、<tr></tr>、<td></td>,默认情况下，表格的边框为0，宽度和高度靠表格里的内容来支撑。
<td></td>标签相当于一个容器，可以容纳所有的标签，甚至可以嵌套表格<table></table>。但是tr标签中只能嵌套td标签，不可以在tr标签中输入文字。
（2）<table>标签的属性
属性值
①border：设置表格的边框（默认为0）
②cellspacing：设置单元格与单元格之间的空间（默认距离为2px）
③cellpadding：设置单元格内容与单元格边缘之间的空间（默认距离为1px）
④width：设置表格的宽度
⑤height：设置表格的高度
⑥align：设置表格在网页中的水平对齐方式（控制表格在页面中的水平对齐方式，单元格的内容不受影响）
⑦bgcolor：设置表格的背景颜色
⑧background：设置表格的背景图片。
当为表格标签table同时设置width、height和cellspacing属性时，cellspacing的显示效果将不太容易观察，所以一般在未给表格设置宽高的情况下测试cellpacing属性。
（3）<tr>标签的属性
①height：设置行高度
②align：设置一行内容的水平对齐方式
③valign：设置一行内容的垂直对齐方式
④bgcolor：设置行背景颜色
④background：设置行背景图像
<tr>标签无宽高属性width，其宽度取决于表格标签<table>
可以对<tr>标签应用valign属性，用于设置一行内容的垂直对齐方式。
（4）<td>标签的属性
①height：设单元格高度
②width：设置单元格宽度
③align：设置单元格内容的水平对齐方式
④valign：设置单元格内容的垂直对齐方式
⑤bgcolor：设置单元格背景颜色
⑥background：设置单元格背景图像
⑦colspan：设置单元格横跨的列数（用于合并水平方向的单元格）
⑧rowspan：设置单元格竖跨的列数（用于合并竖直方向的单元格）
注意：①在<td>标签的属性中，应该重点掌握colspan和rolspan，其他属性了解即可，不建议使用，这些属性均可用CSS样式属性替代。
②当对某一个<td>标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。
③当对某一个<td>标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。
（5）<th>标签及其属性
该标签为表头标签，文本默认为加粗居中，而<td>定义的为普通单元格，其文本为普通文本且水平左居中。
（6）表格的结构
<thead></thead>：用于定义表格的头部，必须位于table标签中，一般包括含网页的logo和导航等头部信息。
<tfoot></tfoot>：用于定义表格的页脚，位于table标签中thead标签之后，一般包含网页底部的企业信息等。
<tbody></tbody>：用于定义表格的主体，位于table标签中tfoot标签之后，一般包含网页中出头部和底部之外的其他内容。
注意：一个表格只能定义一对thead标签、一对tfoot标签，但可以定义多对tbody标签，它们必须按thead标签、tfoot标签和tbody标签的顺序使用。之所以将tfoot标签置于tbody标签之前，是为了浏览器在收到全部数据之前即可显示页脚。
2、CSS控制表格样式
（1）CSS控制表格边框
运用CSS样式去掉单元格之间的空间，就需要使用border-collapse属性。
还有一个属性为separate（分开）。
注意：①当表格的border-collapse属性设置为collapse时，则HTML中设置的cell spacing属性值无效；
②行标签tr无border样式属性。
（2）CSS控制单元格边距
设置单元格内容与边框之间的距离，可以对th标签和td标签应用内边距样式属性padding，或者对table标签应用HTML标签属性cellpadding。
而th标签和td标签无外边距属性，想要设置相邻单元格边框之间的距离，只能对table标签应用HTML标签属性cellspacing。
（3）对同一行中的单元格定义不同的高度，或者对同一列中的单元格定义不同的宽度时，最终的宽度或者高度将取其中的较大值。
3、表单
（1）表单的构成
①表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。
②提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写的操作
③表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它处理表单数据所用程序的url地址，定义数据提交到数据库的方法。如果不定义表单域，表单中的数据就无法传达到后台服务器。
（2）创建表电脑
<form></form>标签用来定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form></form>中的所有内容都会被提交给服务器。

<form action="url 地址" method="提交方式"  name="表单名称">
    各种表单控件
</form>

①action属性：用于指定接收并处理表单数据的服务器程序的url地址。
可以是相对路径也可以是绝对路径
②method：取值有get和post，get为该属性的默认值，采用get方法时，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据，而post时分段传输。
get方法保密性差，且有数据量的控制，post方法保密性强，没有数据量的控制。
③name属性：表单中的name属性用于指定表单的名称，而表单控件中具有name属性的元素将用户填写的内容提交给服务器。
4、表单控件
（1）input控件

<input type="控件类型"/>

上述属性有
type：属性值有：text（单行文本输入框）、password（密码输入框）、radio（单选按钮）、checkbox（复选框）、button（普通按钮）、submit（提交按钮）、reset（重置按钮）、image（图像形式的提交按钮）、hidden（隐藏域）、file（文本域）。
name：有用户自定义
value：用户自定义
size：正整数
readonly：内容为只读

checked：属性值为checked，定义选择控件默认被选中的项。
maxlength：属性值为正整数，控件允许输入的最多字符数。
（2）taxtarea控件
用于定义多行文本框

<textarea  cols="每行中的字符串"  rows="显示的行数">文本内容</textarea>

textarea在不同浏览器不同，建议使用CSS样式
（3）select控件
制作下拉菜单的效果。

<select>
   <option >选项1</option>
</select>

select标签的属性：
①size：指定下拉菜单的可见选项数
②multiple：定义multiple=“multiple”时，下拉菜单将具有多项选择的功能，方法为按住ctrl键的同时选择多项
option标签的属性：selected：定义selected=“selected”时，当前项即为默认选中项。
5、HTML5表单新属性
（1）全新的form属性
①autocomplete属性：用于指定表单是否有自动完成功能，所谓的自动完成功能是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉表单里，以实现自动完成输入。
该属性有两个属性：
on：表单有自动完成功能
off：表单没有自动完成功能
该属性不仅可以用于<form>标签，还可以用于所有输入类型的<input/>标签
②novalidate属性：指定在提交表单时，取消对表单进行有效的检查。
为表单设置该属性时，可以关闭整个表单的验证，可以使<form>标签内的所有表单控件不被控制。
还属性的属性值为本身。
（2）全新的表单控件
在HTML5中新增了一些控件，如datalist、keygen等，使用这些元素可以强化表单功能，其中datalist控件用于定义输入框的选项列表，常见。
网页中的列表通过datalist内的option进行创建。
datalist控件通常与input控件匹配使用，来定义input的取值。
在使用控件时，需要通过id属性为其指定一个唯一的标识，然后input控件指定list属性，该属性值设置为option对应的id属性值即可。
例如：

<input type="text"  list="namelist">
<datalist  id="namelist">
   <option >sbiasd</option>
</datalist>

（3）全新的input控件类型
①email类型<input type="email"/>
是一种专门用于输入Email地址的文本输入框，用来验证Email输入框的内容是否符号时间地址格式，若不符合，将显示错误信息。
②url类型<input type"url"/>
判断输入的是否符合url地址，若不符合则不能提交。
③tel类型<input type="tel">
输入电话号码的框，通常和pattern属性使用
④search类型<input type="search">
一种专门用于输入搜索关键词的文本框，能自己记录一些字符。
⑤color类型<input type="color">
用于提供设置颜色的文本框，用于实现一个RGB颜色输入，其基本形式是#RRGGBB。
单击color类型文本框，可以快速打开拾色齐面本。
⑥number类型<input type="number">
用于提供输入数值的文本框，该文本框可以对输入的文字的个数进行设置
value：指定输入框的默认值
max：指定输入框最多能输入的文字个数
min：指定文本框最少能输入的文字个数
step：指定域合法的间隔，若不设置，默认为1.
⑦range类型<input type="range">
用于提供一定范围数值的输入范围，在网页上显示为滑动条，常用属性与number一样，通过step属性指定每次滑动的步幅。
⑧Data picket类型<input type="data,month,week....">
该类是指时间日期类型。
date：选择日月年
month：选择月年
time：选择时间（小时和分钟）
week：选择周和年
datetime：选择时间、日、月、年（UTC时间）
datetime-local：选取时间、日、月、年（本地时间）
（4）全新的input属性
①autofocus属性：用于指定页面加载后是否自动获取焦点，将标签指定为true时。表示页面加载完毕后会自动获取该焦点。
②form属性：在HTML5 中的form属性，可以把表单内的子元素写在页面中的任意的位置，只需为这个元素指定form属性并设置属性值为该表单的id即可。
③list属性：用于指定输入框所绑定的datalist元素，其值是某个datalist元素的id。
④mutilple属性：指定输入框可以选择多个值，该属性适用于email和file类型的input元素。
⑤min、max和step属性
⑥pattern属性：用于验证input类型输入框中用户输入的内容是否与所指定的正则表达式相匹配。pattern属性适用于的类型是：text、search、url、tel、Email和password的<input/>标签。
⑦placeholder属性：用于为input类型的输入框提供相关信息，以描述输入框期待用户输入何种内容。
⑧required属性：用于判断用户是否在表单输入框中输入内容，当表单内容为空时，则不允许提交表单。