饥人谷Wiki

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

--- 前端基础_html_form.md [2021/09/15 14:30]
admin 创建
+++ 前端基础_html_form.md [2021/09/15 15:31] (当前版本)
admin
@@ 行 1: / 行 1: @@
-<markdown>
 [\<\< 返回HTML教程](:document/html)
-</markdown>
+## 标签概览
+```
+<!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
+- 1. 表象不同，get把提交的数据url可以看到，post看不到
+- 2. 原理不同，get 是拼接 url， post 是放入http 请求体中
+- 3. 提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
+- 4. get提交的数据在浏览器历史记录中，安全性不好
+- 5. 场景不同，get 重在 "要", post 重在"给"
+## form标签属性
+- action： 表单提交的地址
+- method：提交保单的方法
+- target：在何处打开action
+- enctype:
+  - application/x-www-form-urlencoded
+  - text/plain：
+  - multipart/form-data
+## CSRF
+- [CSRF 是什么?](http://blog.jirengu.com/?p=349)
+## 参考阅读
+- [http methods](http://www.restapitutorial.com/lessons/httpmethods.html)

饥人谷Wiki

站点工具

用户工具

页面工具