HTML 表格和表单

HTML(HyperText Markup Language)是构建网页和网页应用的标准标记语言。在HTML中,表格和表单是两个基本且重要的组件,用于展示数据和收集用户输入信息。两者都是HTML文档的重要组成部分,用于展示信息和交互。可以通过CSS进行样式化,以符合页面的整体设计。

1、HTML 表格

HTML (HyperText Markup Language) 中的表格用于展示表格化数据,这是通过 <table> 元素及其相关元素,比如 <tr>(表格行)、<td>(单元格)和 <th>(表头单元格),来实现的。

标签描述<table>定义表格的开始和结束。<tr>定义表格的一行。<td>定义表格中的一个单元格,用于数据。<th>定义表格中的表头单元格,通常用于描述列的内容。<th> 元素中的文本默认加粗和居中。<thead>定义表格的头部区域。<tbody>定义表格的主体部分,通常是数据行。<tfoot>定义表格的脚注区域,用于总结表格的信息。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>30</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
    <td>上海</td>
  </tr>
</table>

2、HTML 表单

HTML 表单是网页开发中的一个核心元素,它允许网站收集用户输入的数据。一个表单可以包含输入字段、单选按钮、复选框、下拉列表等,以及一个提交按钮。这些输入数据可以被Web服务器处理,比如注册、登录、搜索等功能。

标签描述<form> 表单的开始和结束。action属性指定表单提交的地址(一个URL),而method属性指定提交的HTTP方法(通常是GET或POST)。<label>为表单控件定义标签。for属性应该与相关输入控件的id属性相同。<input>输入字段,可以是文本、密码、提交按钮等多种类型。type属性定义类型,name属性定义字段的名称。<textarea> 用于较长文本的输入控件。<button> 按钮,可用于提交表单。<select><option>下拉列表,允许用户从多个选项中选择一个。

<form action="/submit_form" method="post">
  <label for="fname">名字:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">姓氏:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
</form>

3、HTML 表格和表单 使用示例

HTML中,表格和表单都是构建网页内容的重要元素。它们在展示数据和收集用户输入方面发挥着重要作用。

1)HTML表格

表格通常用于显示数据。一个简单的HTML表格包括<table>标签,以及用于行的<tr>标签,用于表头的<th>标签,以及用于表格数据的<td>标签。

<!DOCTYPE html>
<html>
<head>
    <title>简单的HTML表格示例</title>
</head>
<body>
<h2>员工信息表</h2>
<table border="1">
  <tr>
    <th>姓名</th>
    <th>职位</th>
    <th>邮箱</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>前端开发</td>
    <td>zhangsan@example.com</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>后端开发</td>
    <td>lisi@example.com</td>
  </tr>
</table>
</body>
</html>

2)HTML表单

表单用于收集用户输入。一个基本的HTML表单包括<form>标签,以及各种输入元素,如<input>, <textarea>, <button>, <select>等。

<!DOCTYPE html>
<html>
<head>
    <title>简单的HTML表单示例</title>
</head>
<body>
<h2>注册表单</h2>
<form action="/submit_form" method="post">
  <label for="fname">名字:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">姓氏:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <label for="email">邮箱:</label><br>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

3)HTML 表格和表单示例

HTML中,"表格"(<table>)是用来展示数据的结构,而"表"(通常指"表单",<form>)是用于收集用户输入的。如想要将它们一起使用,如下,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 表格和表单示例</title>
</head>
<body>
<form action="/submit-form" method="post">
  <table>
    <tr>
      <th>项目</th>
      <th></th>
    </tr>
    <tr>
      <td>姓名:</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td><input type="number" name="age"></td>
    </tr>
    <tr>
      <td>性别:</td>
      <td>
        <select name="gender">
          <option value="male"></option>
          <option value="female"></option>
          <option value="other">其他</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="提交"></td>
    </tr>
  </table>
</form>
</body>
</html>

推荐阅读
cjavapy编程之路首页