search

博客列表 >HTML表格与表单的标签与属性

HTML表格与表单的标签与属性

Keroro丶前行
Keroro丶前行原创
2021年03月22日 18:34:521271浏览

HTML表格与表单的标签与属性

表格的标签与属性

1.标签

table：表格标签<table></table>

tr：表格行标签<tr></tr>

td：标准单元格<td></td>

th：表头单元格<th></th>

table表格由 tr 和 td / th 标签组成

实例一：

基础表格

  1. //实例一源码
  2. <table  border="1">
  3.     <tr>
  4.         <th>名称</th>
  5.         <th>单价</th>
  6.         <th>数量</th>
  7.     </tr>
  8.     <tr>
  9.         <td>拖鞋</td>
  10.         <td>35元</td>
  11.         <td>15对</td>
  12.     </tr>
  13.     <tr>
  14.         <td>棉拖</td>
  15.         <td>68元</td>
  16.         <td>10对</td>
  17.     </tr>
  18. </table>

复杂结构的表格由更多的HTML标签组成

caption：表格标题标签<caption></caption>

标签必须直接放置到 <table> 标签之后。
每个表格只能定义一个标题

thead：表头标签<thead></thead>

tbody：表格主体标签<tbody></tbody>

tfoot：表注标签<tfoot></tfoot>

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

实例二：

结构表格

  1. //实例二源码
  2. <table border="1">
  3. <caption>沃尔玛拖鞋采购单</caption>
  4.     <thead>
  5.         <tr>
  6.             <th>名称</th>
  7.             <th>单价</th>
  8.             <th>数量</th>
  9.         </tr>
  10.     </thead>
  11.     <tbody>
  12.         <tr>
  13.             <td>拖鞋</td>
  14.             <td>35元</td>
  15.             <td>15对</td>
  16.         </tr>
  17.         <tr>
  18.             <td>棉拖</td>
  19.             <td>68元</td>
  20.             <td>10对</td>
  21.         </tr>
  22.     </tbody>
  23.     <tfoot>
  24.         <tr>
  25.             <td>备注:</td>
  26.             <td colspan="2">2021年3月21日采购</td>
  27.         </tr>
  28.     </tfoot>
  29. </table>

table属性

  1. border【边框属性】
    border="1" 可自定义单元格边框大小
  2. cellspacing【单元格之间的间距属性】
    cellspacing="0" 可自定义单元格之间间距
  3. cellpadding【单元格内间距属性】
    cellpadding="5" 可自定义单元格内间距
  4. width【宽度属性】
    width="50%" 可使用百分比、px、em、rem、vw、vh等单位
  5. heigth【高度属性】
    heigth="50%" 可使用百分比、px、em、rem、vw、vh等单位
  6. bgcolor【背景颜色属性】
    bgcolor="red" 可自定义背景颜色
  7. align【对齐属性】
    align="center" 只有left、right 、center、justify
  8. rowspan【纵向单元格合并】
    rowspan="3" 数值为3则纵向合并3个单元格
  9. colspan【横向单元格合并】
    colspan="6" 数值为6则横向合并6个单元格

实例三

  1. //实例三源码
  2. <table border="1" width="50%" cellspacing="0" cellpadding="5" align="center" >
  3.         <caption>
  4.             <h3>山卡拉课程表</h3>
  5.         </caption>
  6.         <thead style="background-color: #e60021;">
  7.             <tr>
  8.                 <th>时间</th>
  9.                 <th>星期一</th>
  10.                 <th>星期二</th>
  11.                 <th>星期三</th>
  12.                 <th>星期四</th>
  13.                 <th>星期五</th>
  14.             </tr>
  15.         </thead>
  16.         <tbody align="center">
  17.             <tr>
  18.                 <td rowspan="4" bgcolor="lightyellow">上午</td>
  19.                 <td>语文</td>
  20.                 <td>语文</td>
  21.                 <td>数学</td>
  22.                 <td>体育</td>
  23.                 <td>英语</td>
  24.             </tr>
  25.             <tr>
  26.                 <td>语文</td>
  27.                 <td>语文</td>
  28.                 <td>数学</td>
  29.                 <td>体育</td>
  30.                 <td>英语</td>
  31.             </tr>
  32.             <tr>
  33.                 <td>美术</td>
  34.                 <td>数学</td>
  35.                 <td>计算机</td>
  36.                 <td>音乐</td>
  37.                 <td>数学</td>
  38.             </tr>
  39.             <tr>
  40.                 <td>英语</td>
  41.                 <td>美术</td>
  42.                 <td>计算机</td>
  43.                 <td>数学</td>
  44.                 <td>语文</td>
  45.             </tr>
  46.         </tbody>
  47.         <tbody align="center">
  48.             <tr>
  49.                 <td colspan="6" bgcolor="violet">课间午休</td>
  50.             </tr>
  51.         </tbody>
  52.         <tbody align="center">
  53.             <tr>
  54.                 <td rowspan="3" bgcolor="lightyellow">上午</td>
  55.                 <td>语文</td>
  56.                 <td>语文</td>
  57.                 <td>数学</td>
  58.                 <td>体育</td>
  59.                 <td>英语</td>
  60.             </tr>
  61.             <tr>
  62.                 <td>美术</td>
  63.                 <td>数学</td>
  64.                 <td>计算机</td>
  65.                 <td>音乐</td>
  66.                 <td>数学</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>英语</td>
  70.                 <td>美术</td>
  71.                 <td>计算机</td>
  72.                 <td>数学</td>
  73.                 <td>语文</td>
  74.             </tr>
  75.         </tbody>
  76.     </table>

表单的标签与属性

1.表单的标签

form 标签用于创建表单
form 标签可包含以下四种标签

  1. <input> 标签用于搜集用户信息
  2. <fieldset></fieldset> 元素可将表单内的相关元素分组
  3. <textarea></textarea> 多行文本输入控件标签
  4. <legend></legend> 元素为 fieldset 元素定义标题
  5. <label></label> 元素为元素定义标记
  6. <select></select> 元素为下拉选项框
  7. <option></option> 标签用于定义列表中的可用选项。
  8. <datalist></datalist> 标签定义选项列表,请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

2.表单属性

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

  1. action 规定当提交表单时向何处发送表单数据。
  2. method 规定表单提交方式，方式分为get和post两种。
  1. <label for="username">账号:</label>
  2. <input type="text" name="username" id="username" autofocus required placeholder="必须是6-8位">
  1. for 绑定指定表单元素。
  2. type 设定元素类型。
    • button 按钮
    • checkbox 多选框
    • file 文件选择
    • hidden 隐藏
    • image 图片
    • password 密码
    • radio 单选框
    • reset 重置按钮
    • submit 提交按钮
    • text 文本输入框
  3. name 元素名称。
  4. id 元素ID。
  5. autofocus 自动获取焦点。
  6. required 设定该元素为必填项。
  7. placeholder 规定帮助用户填写输入字段的提示。
  8. value 设定元素值
    1. <label>段位：
    2.  <select name="level" id="">
    3.      <option value="1" selected>青铜</option>
    4.      <option value="2">黄金</option>
    5.      <option value="3">铂金</option>
    6.      <option value="4">钻石</option>
    7.      <option value="4">超凡大师</option>
    8.      <option value="4">王者</option>
    9.  </select>
    10. </label>
  9. selected 默认选项
    1. <label>搜索：
    2.  <input type="text" name="search" id="" list="keyword">
    3.  <datalist id="keyword">
    4.      <option value="php"></option>
    5.      <option value="python"></option>
    6.      <option value="javascript"></option>
    7.      <option value="java"></option>
    8.  </datalist>
    9. </label>
  10. list 与datalist进行绑定

完整示例图

完整示例源码

  1.        <form action="" method="post">
  2.             <fieldset style="width: 230px;">
  3.                 <legend>必填项</legend>
  4.                 <div>
  5.                     <label for="username">账号:</label>
  6.                     <input type="text" name="username" id="username" autofocus required placeholder="必须是6-8位">
  7.                 </div>
  8.                 <div>
  9.                     <label for="password">密码:</label>
  10.                     <input type="password" name="password" id="password" required placeholder="必须是字母+数字">
  11.                 </div>
  12.                 <div>
  13.                     <label for="email">邮箱:</label>
  14.                     <input type="email" name="email" id="email" placeholder="demo@mail.com">
  15.                 </div>
  16.             </fieldset>
  17.             <div>
  18.                 <label for="gender">性别：</label>
  19.                 <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label>
  20.                 <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
  21.                 <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label>
  22.             </div>
  23.             <div>
  24.                 <label for="gender">爱好：</label>
  25.                 <input type="checkbox" name="hobby[]" value="php" id="php"><label for="php">PHP</label>
  26.                 <input type="checkbox" name="hobby[]" value="javascript" id="javascript"><label
  27.                     for="javascript">JavaScript</label>
  28.                 <input type="checkbox" name="hobby[]r" value="java" id="java"><label for="java">Java</label>
  29.                 <input type="checkbox" name="hobby[]r" value="python" id="java"><label for="python">python</label>
  30.             </div>
  31.             <div>
  32.                 <label>段位：
  33.                     <select name="level" id="">
  34.                         <option value="1" selected>青铜</option>
  35.                         <option value="2">黄金</option>
  36.                         <option value="3">铂金</option>
  37.                         <option value="4">钻石</option>
  38.                         <option value="4">超凡大师</option>
  39.                         <option value="4">王者</option>
  40.                     </select>
  41.                 </label>
  42.                 <label>搜索：
  43.                     <input type="text" name="search" id="" list="keyword">
  44.                     <datalist id="keyword">
  45.                         <option value="php"></option>
  46.                         <option value="python"></option>
  47.                         <option value="javascript"></option>
  48.                         <option value="java"></option>
  49.                     </datalist>
  50.                 </label>
  51.             </div>
  52.             <div>
  53.                 <input type="submit">
  54.             </div>
  55.         </form>

总结：

  1. HTML 标签元素很多，要彻底掌握要多写多练。
  2. 熟悉各类型标签的组合结构使用，有利于页面布局与SEO优化
上一条：JavaScript之模块相关知识初了解下一条：VSCODE，一款免费好用集成Markdown的源代码编辑器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多