Form is submitted when I click on the button in form. How to avoid this?

Posted in :

原來button 沒加 type 屬性,會變成 submit @_@;

太久沒寫網頁,這個變化真大。


From the fine HTML5 specification:

button element with no type attribute specified represents the same thing as a button element with its type attribute set to “submit”.

And a <button type="submit"> submits the form rather than behaving like a simple <button type="button"> push-button.

The HTML4 spec says the same thing:

type = submit|button|reset [CI]
This attribute declares the type of the button. Possible values:

  • submit: Creates a submit button. This is the default value.
  • reset: Creates a reset button.
  • button: Creates a push button.

So your <button> elements:

<button class="btn">Button_1</button>
<button class="btn">Button_2</button>

are the same as these (in compliant browsers):

<button type="submit" class="btn">Button_1</button>
<button type="submit" class="btn">Button_2</button>

and any time you hit one of those buttons you’ll submit your form.

The solution is to use plain buttons:

<button type="button" class="btn">Button_1</button>
<button type="button" class="btn">Button_2</button>

Some versions of IE default to type="button" despite what the standard says. You should always specify the type attribute when using a <button> just to be sure that you will get the behavior you’re expecting.

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *