HTML表格与表单控件及文件域和隐藏域

课程表作业

<table border="1" cellspacing="0">
      <caption>
        课程表作业
      </caption>
      <thead>
        <tr>
          <th colspan="2"></th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <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>第四节</td>
          <td>英语</td>
          <td>化学</td>
          <td>物理</td>
          <td>生物</td>
          <td>音乐</td>
        </tr>
        <tr align="center">
          <td colspan="7">中午休息</td>
        </tr>
        <tr>
          <td rowspan="3">下午</td>
          <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 colspan="2">课外活动</td>
          <td>大扫除</td>
          <td colspan="2">班会</td>
        </tr>
      </tbody>
    </table>

表单控件

• action:处理表单的程序 method:表单提交类型
• 默认为GET,数据参数直接放在url地址中 POST：表单的数据在请求头中，更安全
• type：控件类型 text：文本，email：邮箱，password:密码，namber:数字
• name:数据的变量名 value:表单的默认内容 placeholder:提示 required:必选

<form action="处理程序" method="POST">
      <!--文本框-->
      <label for="username">账号：</label>
      <input
        type="text"
        id="username"
        name="username"
        value="admin"
        placeholder="至少6位"
        autofocus
        required
      />
      <label for="email">邮箱：</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="admin@qq.com"
        required
      />
      <label for="age">年龄：</label>
      <input type="number" id="age" name="age" min="10" max="150" required />
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" required />
      <label for="password1">确认：</label>
      <input type="password1" id="password1" name="password1" required />
      <button>提交</button>
    </form>
<!--单选框和复选按钮和下拉列表-->
<form action="" method="POST">
      <label for="">性别：</label>
      <div>
        <!--一组单选框按钮必须用同一个名称的name属性值，否则无法实现值的唯一性-->
        <input type="radio" name="gender" value="male" id="male" />
        <label for="male">男</label>
        <input type="radio" name="gender" value="female" id="female" />
        <label for="female">女</label>
        <input type="radio" name="gender" value="secret" id="secret" />
        <label for="secret">保密</label>
      </div>
      <label for="#">兴趣：</label>
      <div>
        <!--复选框的name属性值应该写数组格式名称，这样才能确保服务器可以接收到一组值 -->
        <input type="checkbox" name="hobby[]" value="game" id="game" />
        <label for="game">打游戏</label>
        <input type="checkbox" name="hobby[]" value="shoot" id="shoot" />
        <label for="shoot">摄影</label>
        <input type="checkbox" name="hobby[]" value="music" id="music" />
        <label for="music">听歌</label>
        <!--下拉列表-->
        <label for="">学历</label>
        <!--multiple size="2"-->
        <select name="edu">
          <option value="1">小学</option>
          <option value="2">初中</option>
          <option value="3" selected>高中</option>
          <option value="4">大学</option>
          <!--label属性的优先级大于 Option内部的文本
            <option value="5" label=“自学“ </option>-->
        </select>
      </div>
  <button>提交</button>
  </form>

文件域隐藏域

文件域

• 1.请求类型必须是：POST
• 2.将表单数据编码设置为enctypc=“multipart/form-data”

  <form action="cc.php" method="POST" enctypc="multipart/form-data">
  <label for="file">选择文件：</label>
  <input type="file" name="file" id="file" />
  <button>上传文件</button>
  </form>

隐藏域

<input type="hidden" name="MAX_FILE_SIZE" value="100000" />

表单的form属性

• 通过关联绑定FORM标签外的控件也能获取到表单数据
• Input和button都要绑定才能提交数据

  <form action="#" method="POST" id="register">
  </form><label for="name">用户名：</label>
  <input type="text form="register" name="name" id="name">
  <button form="register">提交</button>

• 尽管form可以将控件写到任意地址，仍然能获取到数据的值，但不要这样做，第一影响布局，第二代码混乱
• 但是，用在JS中，获取数据将变得非常的方便