纯HTML——写一个简易的搜索框

曾经终败给现在 2022-03-25 15:50 423阅读 0赞

<form action="http://baidu.com/s" method="get">
        <div>
             <label for="search">你想搜索什么?</label>
             <input name="wd" id="search" value="花">
        </div>
        <div>
             <button>立即搜索</button>
        </div>
    </form>

*  action —— 规定当提交表单时向何处发送表单数据。
 *  method —— 规定用于发送 form-data 的 HTTP 方法。

1.  get：get仅仅是拼接一个URI，然后直接向服务器请求数据（需要提交给服务器的数据集包含在URI中）。
2.  post：post会把form的数据集，即比如 id=xx 这个键值对包装在请求的body中，发送给服务器，然后向服务器请求数据。

比较GET与POST

<table> 
 <tbody> 
  <tr> 
   <th>&nbsp;</th> 
   <th>GET</th> 
   <th>POST</th> 
  </tr> 
  <tr> 
   <td>后退按钮/刷新</td> 
   <td>无害</td> 
   <td>数据会被重新提交（浏览器应该告知用户数据会被重新提交）。</td> 
  </tr> 
  <tr> 
   <td>书签</td> 
   <td>可收藏为书签</td> 
   <td>不可收藏为书签</td> 
  </tr> 
  <tr> 
   <td>缓存</td> 
   <td>能被缓存</td> 
   <td>不能缓存</td> 
  </tr> 
  <tr> 
   <td>编码类型</td> 
   <td>application/x-www-form-urlencoded</td> 
   <td>application/x-www-form-urlencoded or multipart/form-data。为二进制数据使用多重编码。</td> 
  </tr> 
  <tr> 
   <td>历史</td> 
   <td>参数保留在浏览器历史中。</td> 
   <td>参数不会保存在浏览器历史中。</td> 
  </tr> 
  <tr> 
   <td>对数据长度的限制</td> 
   <td>是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。</td> 
   <td>无限制。</td> 
  </tr> 
  <tr> 
   <td>对数据类型的限制</td> 
   <td>只允许 ASCII 字符。</td> 
   <td>没有限制。也允许二进制数据。</td> 
  </tr> 
  <tr> 
   <td>安全性</td> 
   <td>与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。<br><br> 在发送密码或其他敏感信息时绝不要使用 GET ！</td> 
   <td>POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。</td> 
  </tr> 
  <tr> 
   <td>可见性</td> 
   <td>数据在 URL 中对所有人都是可见的。</td> 
   <td>数据不会显示在 URL 中。</td> 
  </tr> 
 </tbody> 
</table>

*  name —— 规定表单的名称。
 *  target —— 规定在何处打开 action URL。

1.  \_blank：在新窗口打开。
2.  \_self：默认。在相同的框架中打开。
3.  \_parent：在父框架集中打开。
4.  \_top：在整个窗口中打开。

*  enctype —— 规定在发送表单数据之前如何对其进行编码。

1.  application/x-www-form-urlencoded：在发送前编码所有字符（默认）。
2.  multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
3.  text/plain：空格转换为 "+" 加号，但不对特殊字符编码。