input标签
一、input标签
<body>
<input type="text" name="user"/>
<br />
<input type="password" name="password"/>
<br />
<br />
<input type="button" value="登入1" />
<input type="submit" value="登入2" />
</body>
'''
type:
text 文本输入框
password 密码输入框
button 按钮（需要配合js使用）
subbmit 提交按钮
'''
显示如下：
二、form表单提交
上面的内容是无法提交的，虽然有提交按钮，但是没有提交到后台的地址，这里就需要使用form表单来提交了。
<body>
<form action="http://localhost:8000" method="get">
<input type="text" name="user"/>
<br />
<input type="password" name="password"/>
<br />
<br />
<input type="button" value="登入1" />
<input type="submit" value="登入2" />
</form>
</body>
'''
1. action: 指定要发送数据的后台url地址
2. method: 提交表单使用的方法，有POST和GET, 默认为GET方法
'''
注：
input标签中的内容要提交到后台，必须要有一个name属性，当点击submit按钮提交时，数据会被打包成一个字典的形式，{'user':'bigberg','password':'111111'},然后将这个数据提交到后台
form标签提交的内容只能是 input 和 select 标签的内容
POST和GET方法的区
| GET | POST | |
|---|---|---|
| 后退按钮/刷新 | 无害 | 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。 |
| 书签 | 可收藏为书签 | 不可收藏为书签 |
| 缓存 | 能被缓存 | 不能缓存 |
| 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 |
| 历史 | 参数保留在浏览器历史中。 | 参数不会保存在浏览器历史中。 |
| 对数据长度的限制 | 是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。 | 无限制。 |
| 对数据类型的限制 | 只允许 ASCII 字符。 | 没有限制。也允许二进制数据。 |
| 安全性 |
与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！ |
POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
| 可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 |
三、input表单类型和属性
3.1 文本框的默认值
<input type="text" name="user" value="哈士奇"/> <br /> <input type="password" name="password" value="hashiqi"/>
3.2 单选框radio
<body>
<div>
<p>性别</p>
<span>男:</span><input type="radio"/>
<span>女:</span><input type="radio"/>
</div>
<br />
<input type="submit" value="提交" />
</body>
显示如下：
我们可以添加name属性，并将name属性设置为一样，那么单选框就能保证只能选择一个了，如下：
<body>
<div>
<p>性别</p>
<span>男:</span><input type="radio" name="gender"/>
<span>女:</span><input type="radio" name="gender"/>
</div>
<br />
<input type="submit" value="提交" />
</body>
'''
name属性设置一样，就能实现单选的功能
'''
显示如下：
上面的内容如果提交到后台，还是不能区分gender指的是男还是女，所以还是需要设置一个value值：
<body>
<form>
<div>
<p>性别</p>
<span>男:</span><input type="radio" name="gender" value="1"/>
<span>女:</span><input type="radio" name="gender" value="2"/>
</div>
<br />
<input type="submit" value="提交" />
</form>
</body>
'''
用value值来区分单选框选择的具体值
'''
设置默认值checked="checked"：
<span>男:</span><input type="radio" name="gender" value="1" checked="checked"/>
<span>女:</span><input type="radio" name="gender" value="2"/>
'''
checked="checked" 设置默认
'''
3.3 多选框checkbox
<body>
<form>
<div>
<p>爱好</p>
<span>足球</span> <input type="checkbox" name="favor" value="1">
<span>蓝球</span> <input type="checkbox" name="favor" value="2">
<span>棒球</span> <input type="checkbox" name="favor" value="3">
<span>网球</span> <input type="checkbox" name="favor" value="4">
</div>
<input type="submit" value="提交">
</form>
</body>
'''
同样以value的值来确定不同的选项
同样可以使用 checked="checked" 来设置默认值
'''
3.4 文件上传file
<body>
<form enctype="multipart/form-data">
<div>
<p>上传文件</p>
<input type="file" />
</div>
<input type="submit" value="提交">
</form>
</body>
'''
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
上传文件注意两点：
1 请求方式必须是post
2 enctype="multipart/form-data"
'''
3.5 重置reset
<body>
<form>
<div>
<input type="text" name="user"/>
<br />
<input type="password" name="password"/>
</div>
<input type="submit" value="提交">
<input type="reset" value="重置"/>
</form>
</body>
'''
重置按钮可以将输入的信息清空
'''
