form标签、input标签与table标签

form标签

1. <form>和<a>的区别：
   区别在与a发起的get请求。form发起的是get或post请求(不支持PUT)。get是获取内容。post是上传内容。

• <a>提交时是GET请求
• <form>可以用method=’post’发送POST请求
• <form>里必须要有一个submit按钮才能被提交
• post请求参数会出现在第四部分。get请求没有第四部分。
• form标签的target和a标签的target是一样的

即<form>是注册时用的，你提交的账号密码会出现在第四部分里，但GET请求是不会有第四部分的，POST若想有查询参数，可以直接写在action里，如：

<form action="users?name=pyz" method="post">
    <label>用户名<input type="text" name="username"></label>   
    //input要被提交的话一定要有name值
    <label>密码<input type="password" name="password"></label>
    <input type="submit" value="提交">
</form>

2. 结合<input> 要被提交的话一定要有name值

• <label>直接包在input外面用 （简单易用写法）
• <form>里的target和<a>是一模一样的。
• <form>里如果没有<input type="submit">而有<button>，则<button>会默认为submit，若写成这样<button type="button">button</button>则不会成为submit，一个form里必须要有一个submit按钮才能提交

input标签

1. checkbox属性 复选框

喜欢的语言
<label><input type="checkbox" name="language" value="chinese">汉语</label>
<label><input type="checkbox" name="language" value="English">英语</label>

checkbox属性.PNG

2. radio属性

喜欢我吗？
<label><input type="radio" name="likeme" value="yes">yeah~</label>
<label><input type="radio" name="likeme" value="no">no~</label>

和checkbox不同的是，两个name一样的radio只能选中一个

radio属性.PNG

select下拉列表

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

select标签.png

disabled属性意味着不能被选中，selected意思是默认选中的，multiple意思是可以同时选中几项

textarea标签

<textarea style="resize: none" name="爱好"></textarea>

resize若不设置为none，则用户可以随意更改输入框的大小

table标签

<table border="1">
   <colgroup>
       <col width="100">
       <col bgcolor="red" width="200">
       <col width="100">
       <col width="100">
   </colgroup>
   <thead>
       <tr>
           <th>项目</th><th>姓名</th><th>班级</th><th>成绩</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <th></th><td>小明</td><td>1</td><td>22</td>
       </tr>
       <tr>
           <th></th><td>小红</td><td>2</td><td>12</td>
       </tr>
       <tr>
           <th>平均分</th><td></td><td></td><td>17</td>
       </tr>
   </tbody>
   <tfoot>
   <tr>
       <th>总分</th><td></td><td></td><td>34</td>
   </tr>
   </tfoot>
</table>

table标签.PNG

thead tbody tfoot不写浏览器也不会报错，而会自动全部加入到tbody里