Html-表格表单篇

表格

表格标签

• <table>：创建一个表格
• <tr>：在<table>中使用表示表格中的一行，有几个 tr 就有几行
• <th>：在<tr>中使用表示表头中的单元格,也可以当作是加粗的 td
• <td>：在<tr>中使用表示一个单元格，有几个 td 就有几个单元格
• 在<td>中使用的属性：
  • rowspan=”number”：纵向的合并单元格
    • 注意：rowspan=”0”,告知浏览器使单元格横跨到表格组件中的最后一个行(thead、tbody 或 tfoot)
  • colspan=”number”：横向的合并单元格
    • 注意：colspan=”0”,告知浏览器使单元格横跨到列组 (colgroup) 的最后一列。

长表格

• <thead>：表格的头部，在<table>中使用，包裹<tr>的代码
• <tbody>：表格的主体，在<table>中使用，包裹<tr>的代码
• <tfoot>：表格的底部，在<table>中使用，包裹<tr>的代码
• 注意：如果没有用到以上标签，浏览器会自动向 table 中添加一个 tbody
  并将所有的 tr 都放到 tbody 中，tr是tbody的子元素，不是table的子元素
• 使用这三个标签创建的表格，在打印时，会在每页都打印表格的头部和底部
• 无论编写到什么位置，thead中的内容，永远都会显示在表格的头部
• 而tfoot中的内容，永远都会显示在表格的底部
• <caption>: 表格标题，在表格外底部显示

表格样式

• 可以设置宽高
• 可以设置边框 border
• border-spacing：设置表格边框之间的距离
• border-collapse：设置表格的边框的合并
  • 如果将值设置 collapse，则 table 和 td 的边框将会自动合并为一个
  • 当设置了边框合并以后，border-spacing 将自动失效
• 默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改
• display: table-cell;：将元素设置为单元格 td

表格嵌套

• 在一个表格中也可以嵌套其他的表格
• 表格布局，布局简单，但是维护麻烦，所以现在已经很少有人用
• 表格的列数由 td 最多的那个 tr 来决定
• 总结：table 嵌套 table

表单

<form></form>：创建一个表单

• 属性：
  • action=""：form的必须的属性，需要一个服务器的地址，提交表单时表单中的内容将会被提交到该地址
  • autocomplete="off"：关闭自动补全

<input />: 创建一个表单项

• 默认用户添加的内容将会以查询字符串(url地址?后边的内容)的形式发送给服务器
• 查询字符实际上就是键值对结构，多个键值对之间使用&隔开：
  • 键：表单项指定的 name 属性值
  • 值：用户填写的内容
• 属性：
  • name=""：用户填写的名字，服务器根据这个来获取用户填写内容
  • value=""：为文本框指定一个默认值
  • checked：选项按钮的默认选中状态
  • readonly：将表单项设置为只读，数据会提交
  • disabled：将表单项设置为禁用，数据不会提交
  • autofocus：设置表单项自动获取焦点
  • type：指定表单项类型
  • required: 必填
  • placeholder="": 文本提示，value 有值则不显示
  • multiple: 多选文件提交
• 示例 和 type 类型：

  属性值	示例
  button	按钮:
  checkbox	复选框：
  radio	单选： 通过name属性来分组的，相同的name属于一组
  email	邮箱：
  url	网址：
  password	密码框：
  text	默认文本框：
  number	步进器：
  tel	手机号码：
  search	搜索框：
  datetime-local	日期时间：
  date	日历-日期：
  time	时间：
  month	日历-年月：
  week	日历-周：
  color	颜色块：
  file	文件：
  hidden	隐形控件：
  image
  range	范围控件：
  reset	重置：
  submit	form中做提交：

button 标签

• 创建按钮，和 input 创建的按钮功能一致，但比它灵活
• 属性也一致
• <button type="submit">提交按钮</button>
• <button type="reset">重置</button>
• <button type="button">单纯的按钮</button>

下拉列表

• 使用 select 来创建一个下拉列表
• 使用 option 标签来创建下拉列表中的选项
• 下拉列表的 name 属性需要指定给 select 标签，value 属性需要指定给 option
  • selected：option 默认选中
  • 示例：

<select name='star'>
	<option value='ym'>xxx</option>
	<option
		value='wyb'
		selected
	>
		wyb
	</option>
	<option value='xxx'>xxx</option>
</select>