目录
标签概览
<!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>
<input type="hidden" name="csrf" value="12345623fafdffdd">
<input type="button" value="Buttom" /> 不会提交
<input type="submit" value="Submit" /> 会提交
<input type="reset" value="Reset" /> 重置输入
</div>
</form>
</div>
</body>
</html>
post vs get
- 表象不同，get把提交的数据url可以看到，post看不到
- 原理不同，get 是拼接 url， post 是放入http 请求体中
- 提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
- get提交的数据在浏览器历史记录中，安全性不好
- 场景不同，get 重在 "要", post 重在"给"
form标签属性
- action： 表单提交的地址
- method：提交保单的方法
- target：在何处打开action
- enctype:
- application/x-www-form-urlencoded
- text/plain：
- multipart/form-data
CSRF
参考阅读
admin · 2021/09/15 15:31 · 前端基础_html_form.md.txt
