HTML5学习笔记 —— 表格、表单入门

一、表格

1.表格内容概要

a.表格的基本元素、基本属性以及嵌套规则
b.表单常用元素
c.表格实现布局的基本方法

2.表格的基本元素

a.caption：元素定义表格标题
b.thead：标签定义表格的表头
c.tbody：标签表格主题（正文）
d.tfoot：标签定义表格的页脚（脚注或表注）
e.tr：表格的行
f.th：表头单元格
g.td：单元格

3.table的基本属性

a.cellpadding：设置单元格边框与单元格里的内容之间的距离
b.cellspacing：设置单元格间的距离
c.colspan：跨列
d.rowspan：跨行
e.border：表格边框
f.border-collapse: collapse; 合并边框
border-collapse：设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

4.嵌套规则

a.form 元素不能够直接包含input 元素。原因在于input 元素属于行内元素，form 元素仅仅能够包含块状元素
b.thead包含tr，这里的tr只能包含th
c.tbody/tfoot包含tr，这里的tr只能包含td
d.tr包含td/th

二、表单

1．表单常用元素

a.form：表单提交，用于提交数据

<form action="" method="get">

</form>
<form action="" method="post">

</form>

1)action：表单提交的地址
2)method：表单提交数据的形式
3)get通常用于获取数据
4)post：通常用于提交数据
b.fieldset：表单域
c.lengend：表单域标题
d.textarea：定义多行的文本输入控件
e.select：定义选择列表（下拉列表）
f.option：定义选择列表中的选项
g.input：定义单选框、文本框等各种类型的表单元素

2．表单嵌套规则

form 元素不能够直接包含input 元素。原因在于input 元素属于行内元素，form 元素仅仅能够包含块状元素，所以form中要套div再套input

3．表单域

a.文本框
1)显示绑定——for等于input的id名，常用
效果为，当鼠标点击label标签时，input文本框激活，光标显示在input文本框中

<label for="user">用户名：</label>
<input type="text" id="user" value="用户名" name="user">

2)隐式绑定——直接把input写在label里面

<label>用户名：
<input type="text" id="user" value="用户名" name="user"></label>

3)id用于与label的for属性进行绑定使用，name用于提交表单数据使用
b.密码框
定义密码字段，密码字段中的字符会被掩码

<div>
<label for="password"></label>
<input type="password" id="password" name="password">
</div>

name用于和后台交互，可以自己命名。
c.隐藏域
定义隐藏字段。隐藏字段对于用户不可见、不可更改。隐藏字段通畅会存储一个默认值，当表单数据进行提交时，隐藏字段会提交其默认值。

<div>
<input type="hidden" value="隐藏">
</div>

d.多行文本框
textarea标签定义多行的文本输入域。可以通过cols和rows属性来规定textarea的尺寸，不过更好的办法是使用CSS的height和width属性。
因在未禁用的情况下，textarea标签的文本框可以随意扩大缩小，但最小值会保持cols和rows属性定义的大小。
这样会影响网页整体布局，所以一般都会禁用此功能。

<div>
<label for="">简介</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>

e.单选框
定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

<div>
<label for="">性别</label>
<label>
<input type="radio" name="sex" checked="checked">男
</label>
<label>
<input type="radio" name="sex">女
</label>
</div>

f.复选框
定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

<div>
<label for="">爱好</label>
<label for="">
<input type="checkbox" name="check" checked="checked">跑步
</label>
<label for="">
<input type="checkbox" name="check">打球
</label>
<label for="">
<input type="checkbox" name="check">游戏
</label>
</div>

g.下拉选择框
<select>标签可以创建单选或者多选菜单。
option元素定义下拉列表中的一个选项。
该标签中的内容座位<select>标签的菜单中的一个元素显示。
option元素位于select元素的内部。
预先选中使用selected属性

<div>
<label for="">地址：</label>
<select name="address" id="">
<option value="fj">福建</option>
<option value="bj">北京</option>
<option value="zj" selected="selected">浙江</option>
</select>
</div>

h.文件上传

<div>
<label for="">文件上传</label>
<input type="file" value="添加文件">
</div>

4．表单的按钮

a.提交按钮
定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的action属性中制定的页面。
b.一般按钮
定义可点击的按钮，但没有任何行为。
c.重置按钮
定义重置按钮。重置按钮会清除表单中所有的数据。
d.button按钮
在IE浏览器的默认值：button
谷歌、火狐浏览器的默认值：submit
e.button与input的区别：
相比之下，button的功能更丰富。
<button>不仅仅存放文本信息，还可以存放图片等多媒体信息
在页面开发中，我们常用的是input元素来创建按钮

<div>
<input type="submit" value="提交">
<input type="button" value="一般">
<input type="reset" value="重置">
<button>登录</button>
</div>

5．属性name/id/for的辨析

a.id用于与label的for属性进行绑定使用
b.提交数据都用控件中的name，而不用id。因为有许多相同的name会同时对应多个控件，比如checkbox和radio
c.id仅用来对元素进行标识，且id必须唯一
d.for的使用：用于label与form空间的关联，for属性指定与label关联的元素的id

6．表单的特有属性：禁止属性

禁止和只读的应用

<div>
<label for="">用户名</label>
<!-- 禁止 -->
<input type="text" disabled="disabled" value="aa">
<label for="">用户名</label>
<!-- 只读 -->
<input type="text" readonly="readonly" value="bb">
</div>

a.disabled：禁止属性
b.readonly：只读属性
c.区别：
1)使用范围不同：
disabled：适用于所有的表单元素
readonly：只适用于输入框、密码框、多行文本、文件添加
2)文本聚焦状态：
disabled：不能使文本框获取聚焦
readonly：文本框可以聚焦

7．表单兼容问题

a.IE文本框清除文本按钮和密码框显示密码按钮
IE10以上，type="text" 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本。
对于type="password"的 input 则会在右方显示一个小眼睛的图标，占击这个图标可以显示已经输入的内容。为统一样式，添加代码：

input::-ms-clear, input::-ms-reveal {
display: none;
}

IE9只能设置一个span元素，覆盖住小叉和小眼睛的位置

b.谷歌浏览器聚焦状态下，文本框蓝色外框

form input, form textarea {
outline: none;
}

c.多行文本框拉伸问题

form textarea {
resize: none;
/*取消拉升，设置此项目*/
resize: both;
/*默认值，横纵向都可以拉伸*/
resize: vertical;
/*设置只能够在纵向拉伸*/
resize: horizontal;
/*设置只能够在横向拉伸*/
}

三、CSS3新增表单元素

1．表单的新增元素

a.email：用于应包含E-mail地址的输入域

<input type="email" name="user-email">
<input type="submit" value="提交">

b.url：用于应包含URL地址的输入域

<input type="url" name="url-url">
<input type="submit">

c.number：用于应包含数值的输入域

<input type="number" name="points" min="1" max="10">
<input type="submit">

d.range：用于应包含一定范围内数值的输入域

<input type="range" name="user-range" min="0" max="100" step="10">
<input type="submit">

2．表单的新增属性

a.占位符：placeholder=”请输入用户名”，描述输入字段的提示信息会在输入字段为空时显示，并会在字段获得聚焦时消失。

<input type="text" placeholder="用户名" autofocus="autofocus" name="user-name">
<input type="submit">

placeholder属性兼容性：谷歌支持、IE10+支持、火狐支持。IE9及以下需要使用JavaScript实现聚焦

b.自动对焦状态：autofocus=”autofocus”，当页面加载时，按钮应当自动获得聚焦点。

<input type="text" placeholder="用户名" autofocus="autofocus" name="user-name">
<input type="submit">

c.自动完成：autocomplete=”on/off”，含义：代表是否让浏览器自动记录之前输入的值

<input type="text" placeholder="电话" autocomplete="off" name="user-phone">
<input type="submit">

3．表单新增标签

a.<datalist></datalist>标签定义选项列表，使用input元素的list属性来绑定datalist；
list：类似于select，但只能单选。

<input type="url" list="text" name="test">
<datalist id="text">
<option label="Baidu" value="http://www.baidu.com"></option>
<option label="163" value="http://www.163.com"></option>
</datalist>