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

 

<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

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

• 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：空格转换为 "+" 加号，但不对特殊字符编码。