表格元素

1、`<form>` 元素的定义和用法

<form> 标签用于为用户输入创建 HTML 表单，用于向服务器传输数据，通过 PHP 或其它后端语言与 MySQL 数据库进行交互。
表单能够包含 input，textarea，select 等元素， input 可设置成文本字段（text，number，url，email，tel，password 等）、复选框、单选框、提交按钮等等。
表单还可以包含 menus、fieldset、legend 和 label 元素。
表单上的标签使用 label 元素，可与 input，textarea，select 等元素进行绑定。

2、`<table>` 元素实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="PHP 系统学习之路之 HTML 基础，form 标签表单元素的使用实例"
    />
    <meta name="keywords" content="PHP 学习, HTML 基础, form 标签, 表单元素" />
    <link rel="canonical" href="http://127.0.0.1:5500/0403/form.html" />
    <link rel="shortcut icon" href="/images/favicon.jpg" />
    <title>表单元素|PHP 系统学习之路之 HTML 基础</title>
    <style>
      /******************************************
         * 全局样式
         ******************************************/
      html,
      body,
      main,
      h2,
      button {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
      }
      h2 {
        line-height: 24px;
        color: #333;
        text-rendering: optimizelegibility;
        font-weight: normal;
        font-size: 32px;
        line-height: 36px;
      }
      input[type="email"],
      input[type="number"],
      input[type="password"],
      input[type="tel"],
      input[type="text"],
      input[type="url"],
      select,
      textarea {
        background-color: #fbfbfb;
        border: 1px #f2f2f2 solid;
        padding: 10px;
        min-width: 60px;
        font-size: 12px;
        width: calc(100% - 80px);
      }
      input:focus,
      textarea:focus {
        background-color: #fff;
      }
      input[type="checkbox"],
      input[type="radio"],
      input[type="reset"],
      input[type="submit"],
      label,
      select {
        cursor: pointer;
      }
      select,
      input[type="email"],
      input[type="number"],
      input[type="password"],
      input[type="reset"],
      input[type="submit"],
      input[type="tel"],
      input[type="text"],
      input[type="url"],
      textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        border-radius: 0;
      }
      input[type="submit"],
      input[type="reset"],
      button {
        border: 0;
      }
      select {
        background-image: url(svg/select.svg);
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 24px 24px;
        cursor: pointer;
        outline: none;
      }
      body * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      input,
      textarea {
        -moz-transition: ease-in-out 0.5s;
        -webkit-transition: ease-in-out 0.5s;
        -o-transition: ease-in-out 0.5s;
        -ms-transition: ease-in-out 0.5s;
        transition: ease-in-out 0.5s;
      }
      body {
        font-size: 12px;
        overflow-x: hidden;
        overflow-y: scroll;
        line-height: 24px;
        color: #666;
        font-family: "PingFang SC", "Microsoft Yahei", "Helvetica Neue",
          Helvetica, STHeiTi, sans-serif;
      }
      /******************************************
         * 全局样式 end
         ******************************************/
      /******************************************
         * 主体内容
         ******************************************/
      main {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        min-height: 600px;
        padding: 100px;
      }
      /******************************************
         * 主体内容 end
         ******************************************/
      /******************************************
         * 表单元素
         ******************************************/
      .resiger-form {
        background-color: #fff;
        padding: 30px;
        width: 560px;
        border: 1px solid #eee;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.11);
      }
      /******************* 标题 *******************/
      .resiger-form h2 {
        display: block;
        text-align: center;
        margin-bottom: 30px;
      }
      /******************* 标题 end *******************/
      /******************* 表单 *******************/
      /* 模块 */
      .resiger-form section {
        margin-bottom: 12px;
        font-size: 0;
      }
      /* 标签 */
      .resiger-form section label {
        font-size: 12px;
      }
      .resiger-form section > label {
        display: inline-block;
        padding: 0 0 4px 2px;
        width: 80px;
      }
      /* textarea 元素 label 对齐 */
      .resiger-form .intro label {
        vertical-align: top;
      }
      /* 必填 */
      .resiger-form label b {
        color: #ff0000;
      }
      /***** 单选和多选 *****/
      .resiger-form .box {
        display: inline-block;
        vertical-align: middle;
      }
      /* label 样式 */
      .resiger-form .box label {
        color: #999999;
      }
      /***** 单选和多选end *****/
      /***** 按钮 *****/
      .resiger-form .buttons {
        margin-left: 80px;
      }
      .resiger-form .buttons .button {
        text-align: center;
        display: inline-block;
        position: relative;
        padding: 8px 20px;
        color: #ffffff;
      }
      /* 重置按钮 */
      .resiger-form .buttons input[type="reset"] {
        margin-right: 12px;
        background-color: #000000;
      }
      /* 提交按钮 */
      .resiger-form .buttons input[type="submit"] {
        background-color: #073997;
      }
      /***** 按钮 *****/
      /******************* 表单 end *******************/
      /******************************************
         * 表单元素 end
         ******************************************/
    </style>
  </head>
  <body>
    <!-- 主体内容 -->
    <main>
      <div class="resiger-form">
        <h2>注册</h2>
        <!-- 表单元素 -->
        <form action="" method="get">
          <!-- 用户名 -->
          <section>
            <label for="username">用户名<b>*</b>：</label>
            <input
              type="text"
              name="username"
              id="username"
              placeholder="请输入用户名！"
              minlength="6"
              maxlength="20"
              autofocus
              required
            />
          </section>
          <!-- 密码 -->
          <section>
            <label for="password1">密码<b>*</b>：</label>
            <input
              type="password"
              name="password1"
              id="password1"
              placeholder="请输入8位及以上的密码！"
              min="8"
              max="20"
              required
            />
          </section>
          <!-- 重复密码 -->
          <section>
            <label for="password2">重复密码<b>*</b>：</label>
            <input
              type="password"
              name="password2"
              id="password2"
              placeholder="重复密码"
              min="8"
              max="20"
              required
            />
          </section>
          <!-- 邮箱 -->
          <section>
            <label for="email">邮箱<b>*</b>：</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="请输入邮箱！"
              required
            />
          </section>
          <!-- 手机 -->
          <section>
            <label for="phone">手机：</label>
            <input
              type="tel"
              name="phone"
              id="phone"
              placeholder="请输入手机号码！"
            />
          </section>
          <!-- 网站 -->
          <section>
            <label for="website">网站：</label>
            <input
              type="url"
              name="website"
              id="website"
              placeholder="请输入网站！"
            />
          </section>
          <!-- 年龄 -->
          <section>
            <label for="age">年龄：</label>
            <input
              type="number"
              name="age"
              id="age"
              placeholder="请输入年龄！"
            />
          </section>
          <!-- 简介 -->
          <section class="intro">
            <label for="intro">简介：</label>
            <textarea
              name="intro"
              id="intro"
              cols="30"
              rows="10"
              placeholder="请输入个人简介！"
            ></textarea>
          </section>
          <!-- 性别 -->
          <section>
            <label for="secret">性别：</label>
            <div class="box">
              <input type="radio" name="gender" id="male" value="male" />
              <label for="male">男</label>
              <input type="radio" name="gender" id="female" value="female" />
              <label for="female">女</label>
              <input
                type="radio"
                name="gender"
                id="secret"
                value="secret"
                checked
              />
              <label for="secret">保密</label>
            </div>
          </section>
          <!-- 爱好 -->
          <section>
            <label for="tibet">爱好：</label>
            <div class="box">
              <input
                type="checkbox"
                name="hobby[]"
                id="travel"
                value="travel"
              />
              <label for="travel">旅行</label>
              <input
                type="checkbox"
                name="hobby[]"
                id="photography"
                value="photography"
              />
              <label for="photography">摄影</label>
              <input
                type="checkbox"
                name="hobby[]"
                id="tibet"
                value="tibet"
                checked
              />
              <label for="tibet">西藏</label>
            </div>
          </section>
          <!-- 地区 -->
          <section>
            <label for="area"> 地区：</label>
            <select name="area" id="area" required>
              <option value="">请选择地区…</option>
              <option value="0">北京-海淀</option>
              <option value="1">上海-浦东</option>
              <option value="2" selected>云南-大理</option>
            </select>
          </section>
          <!-- 按钮 -->
          <section class="buttons">
            <input type="reset" class="button" value="重置" />
            <input type="submit" class="button" value="提交" />
          </section>
        </form>
        <!-- 表单元素 end -->
      </div>
    </main>
    <!-- 主体内容 end -->
  </body>
</html>