表格和表单的应用

程序员文章站 2023-12-28 08:33:04

...

表格


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table
      border="1"
      align="center"
      width="450"
      cellspacing="0"
      cellpadding="5"
    >
      <caption>
        <h3>小学六年级课程表</h3>
      </caption>
      <thead>
        <tr bgcolor="#e5e5e5">
          <th>时间</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4" bgcolor="#e7f7f7">上午</td>
          <td>数学</td>
          <td>语文</td>
          <td>语文</td>
          <td>英语</td>
          <td>体育</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>语文</td>
          <td>法制</td>
          <td>科学</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>音乐</td>
          <td>语文</td>
          <td>英语</td>
          <td>电脑</td>
          <td>数学</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
        </tr>
        <tr>
          <td colspan="6" align="center">中午休息</td>
          <!-- <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td> -->
        </tr>
        <tr>
          <td rowspan="3" bgcolor="#e7f7f7">下午</td>
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
          <td>电脑</td>
        </tr>
      </tbody>
      <tfoot>
        <tr bgcolor="#e5e5e5">
          <td>备注：</td>
          <td colspan="5" align="center">哈哈哈哈</td>
          <!-- <td></td>
          <td></td>
          <td></td>
          <td></td> -->
        </tr>
      </tfoot>
    </table>
  </body>
</html>

表单


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
        background-color: #efe;
      }
      .login {
        display: inline-block;
        margin-top: 2em;
      }
      .login h2 {
        padding: 0.5em 1.5em;
        background-color: lightgreen;
        box-shadow: 3px 3px 3px #888;
        border-top-left-radius: 1em;
        border-bottom-right-radius: 1em;
      }
      .login input {
        border: none;
        border-bottom: 1px solid;
        background-color: lightblue;
        outline: none;
      }
      .login .button {
        border: none;
        outline: none;
        background-color: seagreen;
        color: white;
        width: 20%;
        height: 2.2em;
        margin-top: 1em;
        margin-left: auto;
      }
      .login .reset {
        width: 20%;
        height: 2.2em;
        border: none;
        outline: none;
        margin-top: 1em;
        margin-left: auto;
        background-color: seagreen;
        color: white;
      }
    </style>
  </head>
  <body>
    <form action="" method="get" class="login">
      <h2>用户注册</h2>
      <div>
        <label for="username">用户名：</label
        ><input
          type="text"
          name="username"
          value=""
          id="username"
          placeholder="不能为空"
          required
        />
      </div>
      <br />
      <div>
        <label for="password">密码：</label>
        <input
          type="text"
          name="password"
          value=""
          placeholder="不能为空"
          required
        />
        <button onclick="showPassword(this,this.form.password)">查看</button>
      </div>
      <br />
      <div>
        <label for="email">邮箱：</label>
        <input
          type="email"
          name="email"
          id="email"
          placeholder="不能为空"
          required
        />
      </div>
      <br />
      <div>
        <label for="secret">性别：</label>

        <input type="radio" name="sex" id="male" value="male" />
        <label for="male">男</label>

        <input type="radio" name="sex" id="female" value="female" />
        <label for="female">女</label>

        <input
          type="radio"
          type="radio"
          name="sex"
          id="secret"
          value="secret"
          checked
        /><label for="secret">保密</label>
      </div>
      <br />
      <div>
        <label for="">爱好：</label>
        <input type="checkbox" name="hobby[]" id="game" value="game" checked />
        <label for="game">游戏</label>

        <input type="checkbox" name="hobby[]" id="trave" value="trave" />
        <label for="trave">旅游</label>

        <input type="checkbox" name="hobby[]" id="shoot" value="shoot" />
        <label for="shoot">摄影</label>

        <input type="checkbox" name="hobby[]" id="other" value="other" />
        <label for="other">其他</label>
      </div>
      <br />
      <div>
        <label for="">LOL等级：</label>
        <select name="level" id="">
          <option value="1">黑铁</option>
          <option value="2" selected>青铜</option>
          <option value="3">白银</option>
        </select>
      </div>
      <br />
      <div>
        <button type="submit" class="button">提交</button>
        <button type="reset" class="reset">重置</button>
        <!-- <button type="button">按钮</button> -->
      </div>
    </form>
    <script>
      function showPassword(btn, ele) {
        if (ele.type === "password") {
          ele.type = "text";
          btn.textContent = "隐藏";
        } else {
          ele.type = "password";
          btn.textContent = "显示";
        }
      }
    </script>
  </body>
</html>

表格和表单的应用

表格

表单

表格和表单的应用

再谈应用环境下的TIME_WAIT和CLOSE_WAIT

十二条提升Ubuntu桌面体验的技巧和应用

DB2和 Oracle的并发控制（锁）的比较_Oracle应用_脚本之家

有道搜索和IP138的IP的API接口(PHP应用)_php实例

css3中检验表单的required,focus,valid和invalid样式

JavaScript学习总结之正则的元字符和一些简单的应用

javascript获取表单数据的原始做法和升级做法实例详解

halcon中相似变换、仿射变换、投影变换的区别以及应用方式和例程

ajax的配置详情、ajax的调用解释、ajax的中文乱码和ajax的表单提交（内有实例）