HTML Form中button自動重新整理頁面

在html的form中定義button的時候，如果不加上type="button"屬性，會出現執行完事件後自動重新整理目前頁面的情況， 比如這樣 的代碼：

<form class="form form-horizontal" id="queryForm" >
            <div class="row cl">
                <label class="form-label col-sm-3">服務号碼：</label>
                <div class="formControls col-sm-4">
                    <input type="text" class="input-text" placeholder="輸入手機号碼" id="cellNo" name="cellNo">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-sm-4 col-sm-offset-3">
                    <button class="btn btn-success radius" id="queryBtn">查詢</button>
                </div>
            </div>
        </form>
           

 其實用chrome開發工具調試的時候就發現了一個怪異的情況，點選完“查詢”按鈕後，在Sources頁面會出現 “query?cellNo=” 這樣開頭的頁面， 這說明它把整個form表單送出了，而不是單單的一次按鈕click。 解決辦法就是加上type="button"：

<button type="button" class="btn btn-success radius" id="queryBtn">查詢</button>