使用form表单的注意事项

1. 前言

本身对前端这块不是很熟悉，自己试着做了个表单，但是发现最终提交表单后的URL不是我所期望的，就像了解下表单应该怎么用。看了下百度的搜索效果，如下

我们能够发现地址栏中出现了很多字符串参数，例如：wd， rsv_iqid，rsv_bp， issp 等等

查看源码之后，发现其表单部分的HTML代码如下：

<form name="f" id="form" action="/s" class="fm" onsubmit="javascript:F.call('ps/sug','pssubmit');">
    <span id="s_kw_wrap" class="bg s_ipt_wr">
        <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
    </span>
    <input type="hidden" name="rsv_spt" value="1">
    <input type="hidden" name="rsv_iqid" value="0xfeeb201f0000e61e">
    <input type="hidden" name="issp" value="1">
    <input type="hidden" name="f" value="8">
    <input type="hidden" name="rsv_bp" value="0">
    <input type="hidden" name="rsv_idx" value="2">
    <input type="hidden" name="ie" value="utf-8">
    <input type="hidden" name="rqlang" value="">
    <input type="hidden" name="tn" value="baiduhome_pg" />
    <input type="hidden" name="ch" value="">
    <span class="btn_wr s_btn_wr bg" id="s_btn_wr">
        <input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">
    </span>
    <span class="tools">
        <span id="mHolder">
            <div id="mCon"><span>输入法</span></div>
            <ul id="mMenu">
                <li><a href="javascript:;" name="ime_hw">手写</a></li>
                <li><a href="javascript:;" name="ime_py">拼音</a></li>
                <li class="ln"></li>
                <li><a href="javascript:;" name="ime_cl">关闭</a></li>
            </ul>
        </span>
        <span class="bd_bear_home"></span>
    </span>
</form>

细心的同学就能发现了，之前在地址栏中出现的查询字符串（如，wd， rsv_iqid，rsv_bp， issp 等等）都在 <input>标签中的name属性中出现了，这之间是否有什么联系呢？

2. form表单简介

<form>元素表示一个文档部分，其中包含用于提交信息的交互式控件。

• 常用属性
• name，表单名。从HTML4开始被id所代替
• action，处理表单提交的URL。可以通过<button>，<input type =“ submit”>或<input type =“ image”>元素上的formaction属性覆盖此值。
• enctype,
• method, 提交表单时使用的HTTP方法。默认为get，可用值为get，post，dialog。使用get时表单数据放到了URL的?后面；使用post时表单数据放到了请求体中；
• target，提交表单之后的响应在哪里展示。默认为_self，可用值为_self（在当前页面加载响应），_blank（在新页面加载响应），_parent（在当前页面的父页面加载响应），_top（在顶级页面加载响应）

当创建表单时，往往需要其他一些元素，如： <button>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.

其中，最常用的就是<input>，<select>，<option>，<label>，<button>了，自己去看看这些标签的属性有什么作用，就能会用表单了。下面是<input>标签的部分类型：

下面是<input>标签的部分属性：

3. form表单使用例子

例子1：

<form id="search-form" action="http://localhost:5000/search">
   <span>
       <input type="text" name="keyword1" class="input_search" id="input_search" placeholder="请输入要搜索的内容">
   </span>
   <label class="selected-title">选择你的标签：</label>
   <div class="selected-list">
       <select name="keyword2">
           <option value="label1">标签1</option>
           <option value="label2">标签2</option>
           <option value="label3" selected="selected">标签3</option>
           <option value="label4">标签4</option>
           <option value="label5">标签5</option>
       </select>
   </div>
   <div class="submit-btn">
      <input type="submit" class="input_submit" id="submit_btn" value="查询">
   </div>
</form>

例子2：

<form id="search-form" action="http://localhost:5000/search">
   <span>
       <input type="text" name="keyword1" class="input_search" id="input_search" placeholder="请输入要搜索的内容">
   </span>
   <label class="selected-title">选择你的标签：</label>
   <div class="selected-list">
       <select name="keyword2">
           <option value="label1">标签1</option>
           <option value="label2">标签2</option>
           <option value="label3" selected="selected">标签3</option>
           <option value="label4">标签4</option>
           <option value="label5">标签5</option>
       </select>
   </div>
   <div class="submit-btn">
        <input type="button" class="input_submit" id="submit_btn" value="查询">
   </div>
</form>

对比例子1和例子2，发现只有一句不同：
<input type="submit" class="input_submit" id="submit_btn" value="查询">
和 <input type="button" class="input_submit" id="submit_btn" value="查询">
这两者效果分别如下：

1. 前一句使用的是submit类型的<input>标签，那么最后的URL会是http://localhost:5000/search?keyword1=第一个input输入框的值&keyword2=下拉框的值
2. 后一句则根本不会发起请求，需要ajax配合才能向后端发送请求，至于请求的URL是什么样子的，这是由你所构造的。

总结

在form表单中，如果使用submit类型的<input>标签提交表单，那么表单的数据会将标签中的name/value以键值对的方式，放在URL的？后边，或者请求体内。
如果使用的button类型的<input>标签提交表单，则需要ajax配合，才能向后端发送请求。

参考

zeal中的html文档