html&css------表格、表单（11/1）

表格

基本的表格结构：

<table>：创建表格

<tr>：每行的开始，（table row）

<td>：表格中的每个单元格

表格的标题：

<th>：用法与<td>类似，表示列或行的标题（table heading），没有内容的话就是空单元格。

scope特性：元素是列标题还是行标题

<th scope="col">xxxx</th>    #列标题

<th scope="row">xxxx</th>#行标题

跨列：

在<th>或<td>元素中用colspan特性表明单元格索要跨越的列数。

<td colspan="2">xxxx</td>#跨越了两个单元格

跨行：

在<th>或<td>元素中用rowspan特性表明单元格索要跨越的行数。

<tdrowspan="2">xxxx</td>#跨越了两列单元格

长表格：

<thead>：表格标题

<tbody>：表格主题部分

<tfoot>：表格脚注

宽度和间隔：

<table>标签的特性：

width：表格的宽度

cellpadding：表格中的每个单元格增加内边距

cellspacing：每个单元格之间设置间隔

<table width="400" cellpadding="10" cellspacing="5">

边框和背景：

<table>、<td>标签的特性：

border：指定边框宽度

bgcolor：为整个表格或是单独的单元格指定背景颜色（十六进制代码）

表单

表单控件：

添加文本

单行文本框（text input）：用于单行文本，电子邮件地址和姓名

密码框（password input）：掩盖输入字符

文本域（text area）：用于较长的文本，消息和评论

进行选择：

单选按钮（radio buttons）：用户必须选择一个选项

复选框（checkboxes）：可以选择一个或者多个选项

下拉列表（drop-down boxes）：用户从一个选项列表中挑选期中之一

提交表单：

提交按钮（submit buttons）：从你的表单向另一个网页提交数据

图像按钮（image buttons）：类似于提交按钮，不过允许使用图片

上传文件：

允许把文件上传到网站

表单结构

<form>标签的特性：action：每个<form>元素都需要一个action特性，特性值是服务器上一个页面的URL，这个页面用来在用户提交表单时接收表单的信息

method：表单提交的方式（get和post）

get（默认）：短表单（搜索框）、中从web服务器上检索数据的情形

post： 允许用户上传文件、非常长、包含敏感信息（密码）、向数据库中添加信息，或是从数据库中删除信息

id：表单进行唯一标识

单行文本框

<input>创建多种不同的表单控件：

type：创建那种控件

单行文本框，对表单控件进行识别并与输入的信息一同传送到服务器，文本框的宽度，限制用户在文本区域输入字符的数量

<input type="text" name="username" size="15" maxlength="30"/>

密码框，对表单控件进行识别并与输入的信息一同传送到服务器，文本框的宽度，限制用户在文本区域输入字符的数量

<input type="password" name="password" size="15" maxlength="30"/>

单选按钮，与输入的信息一同传送到服务器，指定了被选中时要发送到服务器的值，未选择时默认选项（一共三个选择rock，pop，jazz）

<input type="radio" name="genre" value="rock" checked="checked"/>rock

<input type="radio" name="genre" value="pop" />pop

<input type="radio" name="genre" value="jazz" />jazz

复选框，与输入的信息一同传送到服务器，指定了被选中时要发送到服务器的值，未选择时默认选项（一共三个选择itunes，lastfm，Spotify）

<input type="checkbox" name="service" value="itunes" checked="checked"/>itunes

<input type="checkbox" name="service" value="lastfm" />Last.fm

<input type="checkbox" name="service" value="spotify" />spotify

文件上传域

<input type="file" name="user-song"/>

提交按钮（将表单发送到服务器）

name不是必须的特性，value控制按钮上显示的文本

<input type="submit" name="subscribe" value="subscribe"/>

图片按钮

<input type="image" src="" art="" width="" height=""/>

隐藏控件

不会显示在页面上，运行网页设计人员向表单添加用户不能看到的值，方便网页设计人员在提交表单时位于那个页面

<input type="hidden" name="bookmark" value="lyrics"/>

按钮

更好的控制用户按钮的显示方式

<button><img src="" alt="" width="" height=""/>add</button>

日期控件

<input type="date" name="depart"/>

电子邮件和url输入

<input type="email" name="email"/>

<input type="url" name="website"/>

搜索输入控件

<input type="search" name="search" placeholder="enter keyword"/> #placeholder（在文本框类显示的文本提示）

文本域（多行文本框）

<textarea name="comments" clos="20" rows="4">enter your comments....</textarea>

下拉列表框

<select name="devices">#创建下拉列表框，包含两个或多个<option>

<option value="ipod">ipod</option>

   <option value="radio">radio</option>

<option value="computer">computer</option>

</select>

多选框

<select name="instruments" size="3" multiple="multiple">#size（将下拉列表框变成一个能显示多个选项的列表框）、multiple（允许用户选择多项）

<option value="guitar" selected="selected">guitar</option>

<option value="drums">drums</option>

<option value="keyboard" selected="selected">keyboard</option>

<option value="bass">bass</option>

</select>

标签表单控件

<label>age:<input type="text" name="age"/></label><br/>gender:<input id="female" type="radio" name="gender" value="f"><label for="female">female</label><input id="male" type="radio" name="gender" value="m"><label for="male">male</label>

两种方式使用<label>标签：

（1）将文本说明和表单输入框全部包围起来

（2）与表单控件分开，使用for特性来指明<label>元素所关联的表单控件

for特性与控件的id特性进行匹配

组合表单元素

<fieldset>：可将相关的表单控件分成一组

<legend>：跟着<fieldset>标签后面并包含一个标题，帮助用户理解控件组的用途