饥人谷Wiki

<markdown>
 
[\<\< 返回HTML教程](:document/html)
 
 
## 标签概览
```
<!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)


</markdown>

饥人谷Wiki

站点工具

用户工具

目录

页面工具