<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="login">
<input type="text" name="sex">
<form action="/getInfo" method="get">
<div class="submit">
<button>提交😁</button>
</div>
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" value="ruo">
</div>
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="输入密码">
</div>
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习
</div>
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
<div class="select">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
<div class="textarea">
<textarea name="article">
多行文本，注意和 type=text的区别
</textarea>
<div>
<input type="hidden" name="csrf" value="12345623fafdffdd">
<input type="button" value="Buttom" /> 不会提交
<input type="submit" value="Submit" /> 会提交
<input type="reset" value="Reset" /> 重置输入
</div>
</div>
</form>
</div>
</body>
</html>
屏幕快照 2019-01-02 上午10.08.20.png
form表单
- action：提交地址
- method: 提交方法
- target：在何处打开action
http://127.0.0.1:8080/getInfo?username=ruo&password=12345&hobby=read&hobby=music&hobby=study&sex=女&myfile=屏幕快照+2018-12-30+下午1.21.46.png&city=shanghai&article=text内容%0D%0A++++++&csrf=12345623fafdffdd
- 使用form标签来创建一个表单
- form中有一个必须的属性叫做action
- action需要一个服务器的地址，当我们提交表单时，填写的内容将会提交到action指向的地址
post vs get
- 表象不同，get把提交的数据url可以看到，post看不到
- 原理不同，get 是拼接 url， post 是放入http 请求体中
- 提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
- get提交的数据在浏览器历史记录中，安全性不好
- 场景不同，get 重在 "要", post 重在"给"
