HTML input type button 按鈕設計 - HTML 網頁設計筆記

HTML input type button 按鈕設計是網頁表單基本的功能之一，所謂的按鈕就是讓網友可以按下並觸發動作用的功能，HTML 常見的按鈕有兩種，分別是 input type button 以及 input type submit 這兩種，其中 button 的功能不是用來送出表單，而是用來處發事件，submit 才是用來送出表單，本篇先來研究 button 的用法以及功能，另外會有篇幅介紹 submit 按鈕。

新增補充：關於 submit 的功能請參閱：HTML input type submit 送出表單按鈕。

HTML input type button 按鈕設計語法

HTML 的 button 有幾個基本的重點，其中又以 type="button"、name 以及 value 這三項最為重要，type="button" 也可以用單引號 type='button' 這樣寫，告訴瀏覽器這個按鈕是 button 而不是 submit，name 用來替按鈕命名，value 則是給按鈕值，也就是要呈現在按鈕上的文字。最後有一個 style 屬性是用來設計按鈕樣式用的，例如按鈕的邊框或顏色，有時間再分享給各位。

HTML input type button 按鈕設計範例

範例的實際樣貌（僅供示意，無實際功能）

請輸入 0~9 的數字：

範例看起來可能有一點小複雜，實際上非常的簡單，上半部 JavaScript 的部分只是示意，當網友輸入數字使用卻認數字的按鈕，才會觸發 JavaScript 的 function 去確認數字，由於 JavaScript 的 function 並不是本篇的重點，所以實際的確認語法就沒有特別去寫，我們把重點放在表單 form 裡面的東西，首先有一個讓網友填寫數字的文字欄位（用法請參閱：input type text），以及一個讓網友確認數字用的按鈕，按鈕中的 name 與 value 都可以自己設定，至於 onclick 則是用來處發 JavaScript function 用的功能。

HTML intput type button 不一定要寫在 HTML 表單中，也可以放在網頁的其它地方，用來處發各種事件，非常好用，但若是用來製作送出表單的按鈕，還是要用 submit 比較方便。

想進一步了解 HTML 表單設計規則，請閱讀：HTML Form 表單設計。

更多 HTML 表單設計