form标签、input和button、table标签
2018-09-18 本文已影响0人
ScottWalker
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
