web前端html5+css3学习笔记(5)——表格、表单

---

前言

本篇学习表格和表单。

---

一、表格

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注四部分组成。

table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格（表格头部中用 th ，表格主体、表格脚注中用td ）

1. 表格属性

table：
  width：表格宽度
  height：表格最小高度，表格最终高度可能比设置的值大
  border：表格边框宽度
  cellspacing：单元格之间的间距
thead：
  height：表格最小高度，表格最终高度可能比设置的值大
  align：单元格水平对齐方式，值：left，center，right
  valign：单元格垂直对齐方式，值：top，middle，bottom
tbody：
   与thead相同
tr：
   与thead相同
tfoot：
   与thead相同
td：
  width：单元格宽度，同列所有单元格都受影响
  height：单元格高度，同列所有单元格都受影响
  align：单元格水平对齐方式，值：left，center，right
  valign：单元格垂直对齐方式，值：top，middle，bottom
  rowspan：指定要跨的列数
  colspan：指定要跨的行数
th：
   与td相同

table标签的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度
只能控制表格最外侧边框的宽度
默认情况下，每列的宽度得看这一列单元格最长的文字
给某个 t;h 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了（最优先）
给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了（最优先）

二、表单

包含交互的区域，用于收集用户提供的数据
form 属性
  action：用于指定表单的提交地址（需要与后端人员沟通后确定）
  target：用于控制表单提交后，如何打开页面
  method：用于控制表单的提交方式
input 属性
  text：设置输入框的类型
  name：用于指定提交数据的名字（需要与后端人员沟通后确定）
button

<form action="https://www.baidu.com/s" target="_blank" method="get">
	<input type="text" name="wd">    <!-- 这里的wd是百度网站的规定 -->
	<button>去百度搜索</button>
</form>
<form action="https://search.jd.com/search" target="_self" method="get">
    <input type="text" name="keyword">  <!-- 这里的keyword是京东网站的规定 -->
    <button>去京东搜索</button>
</form>

常用表单控件

1.文本输入框

<input type="text" name="account" value="zhangsan" maxlength="10">

作为文本输入框的属性：
  text：设置输入框的类型为文本
  name：用于指定提交数据的名字（需要与后端人员沟通后确定）
  value：输入框的默认输入值
  maxlength：输入框最大可输入长度

2.密码输入框

<input type="password" name="pwd" maxlength="6">

作为密码输入框的属性：
  password：设置输入框的类型为密码
  name：用于指定提交数据的名字（需要与后端人员沟通后确定）
  value：输入框的默认输入值
  maxlength：输入框最大可输入长度

3.单选框

<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男

  name 属性：数据的名称。注意：想要单选效果，多个 radio 的 name 属性值要保持一致
  value 属性：提交的数据值
  checked 属性：让该单选按钮默认选中

4.复选框

<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="swim">游泳

5.隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域。作用是： 提交表单的时候，携带一些固定的数据用于检查
name 属性：指定数据的名称（需要与后端人员沟通后确定）
value 属性：指定的是真正提交的数据

6.提交按钮

<!--两种写法-->
<input type="submit" value="确认">
<button>确认</button>

input 标签编写的按钮，使用 value 属性指定按钮文字
注意：作为提交都不要写name属性，否则会把“确认”带走
button的type默认是submit

7.重置按钮

<input type="reset" value="重置">
<button type="reset">重置</button>

同样，作为重置不要指定 name 属性
input和button的type必须写清楚是reset

8.普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

普通按钮的 type 值为 button ，若不写 type 值则是 submit 会引起表单的提交

9.文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

rows 属性：指定默认显示的行数，会影响文本域的高度
cols 属性：指定默认显示的列数，会影响文本域的宽度
不能编写 type 属性，其他属性，与普通文本输入框一致

10.下拉框

<select name="from">
	<option value="黑">黑龙江</option>
	<option value="辽">辽宁</option>
	<option value="吉">吉林</option>
	<option value="粤" selected>广东</option>
</select>

name 属性：指定数据的名称
option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了value 属性，提交的数据就是 value 的值（建议设置 value 属性）
option 标签设置 selected 属性，表示默认选中

禁用表单控件

标签设置 disabled 可禁用表单控件
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性

label标签

可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点
两种与 label 关联方法：
  1.label 标签的 for 属性的值等于表单控件的 id
  2.把表单控件嵌套在 label 标签的里面

<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account" maxlength="10"><br>

<label>
	密码：
	<input id="mima" type="password" name="pwd" maxlength="6">
</label>

fieldset 与 legend 的使用*

fieldset 可以为表单控件分组， legend 标签是分组的标题

<fieldset>
	<legend>主要信息</legend>
	<label for="zhanghu">账户：</label>
	<input id="zhanghu" type="text" name="account" maxlength="10"><br>
	<label>
	密码：
	<input id="mima" type="password" name="pwd" maxlength="6">
	</label>
	<br>
	性别：
	<input type="radio" name="gender" value="male" id="nan">
	<label for="nan">男</label>
	<label>
	<input type="radio" name="gender" value="female" id="nv">女
	</label>
</fieldset>

---

ctrl+alt：在vscode中跨行选择同样位置，可以做统一的增删

总结

本片学习了表格与表单，尤其是表单内标签多，属性多，不要记混了。

根据尚硅谷张天禹老师2023年的前端基础视频整理而成。