form标签：跳转页面（HTTP POST 请求）

form表单里必须要有input “提交” 按钮，否则无法提交这个form，除非你用JS
form标签一般是用来发 POST 请求的

<a href="index2.html" target="">link</a>
<iframe src="#" frameborder="0" name="xxx"></iframe>
<form action="users" method="POST" target="xxx">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

Content-Type

POST请求: name会带到第四部分作为它的key，而GET不会，而是将其作为查询参数显示
file协议不支持POST
HTTP协议不安全，网络一旦被监听，用户名和密码就会泄露

input和button

如果只写了一个button，没有写type，那么会自动升级为一个提交按钮，默认是submit，如果写了，就按照type执行

<button>button</button>
<button type="button">button</button>

submit是唯一能够确定form表单能否点击提交的按钮，而button只是一个普通的按钮，和提交没有关系

<input type="submit" value="button">
<input type="button" value="button">

checkbox: 多选框勾选。
label表示点击文字即勾选，用途是和一个input关联，同属于一个checkbox的选项用同一个name。

<input type="checkbox" id="xxx"><label for="xxx">自动登录</label>
或
<label>用户名<input type="text" name="username"></label>
<label>密码<input type="password" name="password"></label>
<label><input type="checkbox" name="login" value="autologin">自动登录</label>
<label><input type="checkbox" name="login" value="password">记住密码</label>

radio: 单选框圆点勾选。

<label><input type="radio" name="owner" value="yes">Yes</label>
<label><input type="radio" name="owner" value="no">No</label>

select: 分组。value为空或者不写则无选项；disabled不可选；selected默认勾选。

<select name="group" multiple>
  <option value="">-</option>
  <option value="1">第一组</option>
  <option value="2">第二组</option>
  <option value="3" disabled>第三组</option>
  <option value="4" selected>第四组</option>
</select>

textarea: 多行文本。用户可以填写多行文本，默认可以随意调节宽高，可以用CSS设置固定resize:none; cols列数; rows行数。

<textarea style="resize:none; width:300px; height:300px;" name="多行文本" cols="30" rows="10"></textarea>

区别：input没有子元素，而button有子元素（span等）

table标签：很少用

HTML规定，table标签里只能有三个元素：thead，tbody 和 tfoot。

<body>
  <table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
  </table>
</body>

thead, tbody, tfoot 三个元素顺序是固定的，代码顺序乱了浏览器也是按顺序显示。
没有写tbody浏览器会自动补上，thead 或 tfoot没写就默认显示tbody内，都没写就按照写的顺序显示。
border默认边框是有空隙的，加上collapse边框就是实线。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    table{
      border-collapse:collapse;
    }
  </style>
</head>
<body>
  <table border=1>
    <colgroup>
      <col width=70>
      <col bgcolor=yellow width=60>
      <col width=60>
      <col width=60>     
    </colgroup>
    <thead>
      <tr>
        <th>项目</th><th>姓名</th><th>班级</th><th>分数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th><td>张三</td><td>一班</td><td>94</td>        
      </tr>
      <tr>
        <th></th><td>李四</td><td>二班</td><td>96</td>        
      </tr>      
      <tr>
        <th>平均分</th><td></td><td></td><td>95</td>        
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>总分</th><td></td><td></td><td>190</td>        
      </tr>
    </tfoot>
  </table>
</body>
</html>

默认border

加上collapse

form标签、input和button、table标签

form标签、input和button、table标签

form标签：跳转页面（HTTP POST 请求）

input和button

table标签：很少用

推荐阅读更多精彩内容