持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情。

表单

<form> 标签用于为用户输入创建 HTML 表单，表单用于向服务器传输数据。 (form表单是块级元素)

客户端定义发送数据：

<form> 元素定义了如何发送数据。它的所有属性都是为了配置当用户点击提交按钮时发送的请求。两个最重要的属性：action 和 method

action 属性：定义发送数据要去的位置。它的值必须是一个有效的URL 如果没有提供此属性，则数据将被发送到包含这个表单的 URL

<form action="http://foo.com">
</form>

method 属性：定义了如何发送数据。

 <!--GET 方法：请求服务器返回给定的资源，发送到服务器的数据将被追加到URL中  -->
 <form action="http://foo.com" method="get">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>        
  </div>
 </form>
 <!-- 使用 GET 方法，提交表单的时候，数据作为一系列的 名称/值对 被附加
 到 URL。 在URL web地址结束后，我们得到一个问号(?),后面跟着由一个 ($)符合
 互相分隔开的 名称/值 -->



 <!-- POST 方法 -->
 <!-- POST方法是浏览器在询问响应时使用与服务器通信的 -->
  <form action="http://foo.com" method="post">
    <div>
      <label for="say">What greeting do you want to say</label>
      <input type="text" name="say" id="say" value="HI">
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input type="text" name="to" id="to" value="Mom">
    </div>
    <div>
      <input type="submit" value="Send my greeting">
    </div>
  </form>

 <!-- 使用 POST 方法提交表单时，没有数据会附加到 URL -->
 <!-- 请求主体包含的数据是这样的：
     POST / HTTP/2.0
      Host: foo.com
      Content-Type: application/x-www-form-urlencoded
      Content-Length: 13

      say=Hi&to=Mom    -->
 Content-length 数据头表示主体的大小
 Content-Type    表示发送到服务器的资源类型

使用POST 请求，用户将不会看到。
1、如果需要发送密码(或者其他敏感数据)，永远不要使用GET 方法，否则数据会显示在 URL栏中，非常不安全
2、如果需要发送大量数据，POST 方法是首选的，因为一些浏览器限制了URL的大小，并且许多服务器限制它们接受的URL的长度

JavaScript学习笔记(叁)

表单