【HTML】button 在 form 裡和在 form 以外的差別

回覆文章分享
【HTML】button 在 form 裡和在 form 以外的差別

本篇重點

  • 了解 <button> 在 <form> 裡與 <form> 以外的差別
  • 了解 <form> 的預設 method 和預設 action

<button> 在 <form> 裡與 <form> 以外的差別

<button> 在 <form> 裡

  • 當 <button> 放在 <form> 裡且沒有指定 type 屬性時，它的預設 type 是 submit，會提交整個表單到指定的 action URL
  • 如果指定了 type="button"，按鈕就不會觸發表單提交，只是單純的按鈕，可以透過 JavaScript 綁定其他行為
html
1
2
3
4
5
<!-- 按下提交按鈕會觸發表單提交，並將資料發送到 "example.php" -->
<form method="post" action="example.php">
    <input type="text" name="username">
    <button>提交</button> <!-- 相當於 <button type="submit">提交</button> -->
</form>

<button> 在 <form> 以外

  • 在 <form> 以外的 <button> 元素，預設 type="button"，按下時不會觸發表單提交
  • 這種 <button> 通常用於執行與表單提交無關的操作，例如觸發 JavaScript 函數等
html
1
2
3
4
5
<!-- 按下提交按鈕甚麼事都不會發生 -->
<form method="post" action="example.php">
    <input type="text" name="username">
</form>
<button>提交</button> <!-- 相當於 <button type="button">提交</button> -->

案例說明

在處理表單返回按鈕的功能時，發現一個問題，當 <button> 沒有設定 type 屬性時，點擊按鈕會自動送出表單，這和原本預設的行為不符。

以下範例的樣式使用 bulma

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 建立一個表單，底部有兩個按鈕，一個是返回指定頁面，一個是提交表單 -->
<form>
    <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label">Name</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input class="input" type="text"  name="username" placeholder="Text input">
                </div>
            </div>
        </div>
    </div>
    <div class="field is-grouped is-grouped-centered">
        <a href="/" class="control">
            <button class="button is-link">返回</button> <!-- 預期是返回首頁 -->
        </a>
        <div class="control">
            <button class="button is-link">提交</button> <!-- 預期是提交表單 -->
        </div>
    </div>
</form>

範例中，<button> 位於 <form> 內部，當按鈕沒有設定 type 屬性時，瀏覽器會將其視為 type="submit"。所以點擊「返回」按鈕時，會觸發表單的提交操作，而不是前往 href 指定的首頁。

為了正確的前往指定連結，就要將「返回」按鈕的 type 設定為 button

html
1
2
3
4
<!-- <button> 的 type 設定為 button -->
<a href="/" class="control">
    <button type="button" class="button is-link">返回</button>
</a>

設定後，點擊「返回」按鈕會前往首頁，而不會提交表單。

健忘筆記

<button> 位於 <form> 內且未設置 type 時，默認為 type="submit"，會提交表單。

<form> 的預設 method 和預設 action

  • 預設 method：沒有設定 method 屬性，<form> 元素的預設提交方法是 GET。表單數據會被附加到 URL 中進行提交。
  • 預設 action：沒有設定 action 屬性，表單數據會提交到當前頁面本身的 URL。
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form>
    <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label">Name</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input class="input" type="text"  name="username" placeholder="Text input">
                </div>
            </div>
        </div>
    </div>
    <div class="field is-grouped is-grouped-centered">
        <a href="/" class="control">
            <button type="button" class="button is-link">返回</button>
        </a>
        <div class="control">
            <button class="button is-link">提交</button>
        </div>
    </div>
</form>

提交表單後會以 GET 的方式送到原網址，因此可以看到網址列最後面會加上 ?username=[填入的字串]

以 GET 的方式送到原網址

結論

這個 <button> 小細節是在我製作表單時不小心踩到的坑。當時因為沒有指定屬性，結果 <button> 在不同情境下的預設值竟然不一樣，讓我花了不少時間才找到問題。標籤的預設屬性在不同情境下可能會有很大的差異，還有甚麼在不同情境下有不同預設屬性的標籤嗎？歡迎分享給我～

延伸閱讀

【HTML】button 在 form 裡和在 form 以外的差別

https://forgetfulengineer.github.io/Frontend/Html/Difference-Between-button-Inside-and-Outside-of-a-form/

作者

健忘工程師

發表於

2024-08-18

更新於

2024-08-18

許可協議

評論

文章目錄

follow.it

歡迎訂閱電子報！追蹤【健忘工程師】的最新資訊～

廣告

最新文章

廣告

×
複製完成