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

时间:2022-04-21 15:11:22

一、表格

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>