14期1209作业：表格与表单

14 期 1209 作业：表格与表单

思闻_Sven

表格

<tr>与<th>对应“行”与“列”
<thead>：表头（表格第一行）
<tbody>：表格主体
<tfoot>：表格最后一行
表格中的合并单元格通过：rowspan（纵向）与 colspan（横向）属性完成。

---

表格练习

<table border="1">
  <thead><!--无论是否写在tbody之前，thead中的内容永远是表格的第一行-->
    <tr>
      <td>第一天</td>
      <td>第二天</td>
      <td>第三天</td>
      <td>第四天</td>
    </tr>
  </thead>
  <tfoot><!--无论是否写在tbody之前，tfoot中的内容永远是表格的最后一行-->
    <tr><td>第一天</td><td>第二天</td><td>第三天</td><td>第四天</td></tr>
  </tfoot>
  <tbody><!-- 如果不写浏览器也会自动生成tbody标签-->
    <tr><td rowspan="2">1</td><td colspan="2">1</td><td>1</td></tr>
    <tr><td rowspan="2" colspan="2">1</td><td>1</td></tr>
    <tr><td rowspan="2">1</td><td>1</td></tr>
    <tr><td colspan="2">1</td><td>1</td></tr>
  </tbody>
</table>

---

表单

html 中无特殊情况，表单内容一般都是写在<form>标签中。该标签有两个属性需要理解（更多属性可以查阅html手册）

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据。
method	get、post	规定用于发送表单数据的 HTTP 方法。

表单的功能主要通过<input>标签完成。<input>标签通过改变其 type 属性来实现不同功能。同样的，<input>标签也有两个属性需要理解。

属性	值	描述
name	text	name 属性规定 <input>元素的名称。
value	text	指定 <input> 元素 value 的值。

除了<input>标签，<select>，<textarea>,<button>均有其独特的功能。
ps.<input>标签也能实现<button>标签的功能。

---

表单练习

<form action="" method="GET">
  <label for="username">用户名</label>
  <input type="text" name="un" id="username" value="" placeholder="不以数字开头" /><br />
  <label for="email">邮箱</label>
  <input
    type="email"
    name="mail"
    id="email"
    value=""
    placeholder="xxx@xxx.com"
  /><br />
  <label for="password">密码</label>
  <input
    type="password"
    name="pw"
    id="password"
    value=""
    placeholder="至少六位"
  /><br />
  <label for="sex">性别</label>
  <input type="radio" name="sex" id="sex" value="male" checked />男
  <input type="radio" name="sex" id="sex" value="female" />女<br />
  <label for="type">门类</label>
  <input type="checkbox" name="type" id="type" value="1" />一类
  <input type="checkbox" name="type" id="type" value="2" />二类
  <input type="checkbox" name="type" id="type" value="3" checked />三类
  <input type="checkbox" name="type" id="type" value="4" />四类
  <br />
  <label for="lesson">学科</label>
  <select name="lesson" id="lession">
    <option value="1">语文</option>
    <option value="2">数学</option>
    <option value="3">体育</option>
    <option value="4">文艺</option>
  </select>
  <br />
  <label for="text">简介</label><br />
  <textarea name="text_in" id="text" cols="30" rows="10"></textarea>
  <br />
  <input type="submit" value="发送" />
  <button type="reset">重制</button>
</form>