按鈕 <button>
<button>
是 HTML 表單裡的按鈕元素,通常會放在表單裡面讓使用者點擊,這篇文章將會介紹 <button>
表單按鈕元素的用法。
認識 <button>
<button>
是 HTML 表單裡的按鈕元素,通常會放在表單裡面讓使用者點擊,隨著 JavaScript 框架的演進,也常會看到 <button>
獨立運作,或用其他的元件代替 <button>
。
<button>
屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,也因為是容器元素,裡頭可以放入其他的子元素。<button>
的顯示類型為「inline-block 行內區塊元素」,預設不會強制換行。<button>
不可以是<a>
或<button>
的子元素。
例如下方的 HTML 開啟後,在網頁中會放入一個 <form>
,當中包含 <textarea>
和 <button>
所組成的表單。
<form action="/test.aspx" method="post">
<textarea cols="20" rows="5" name="content"></textarea>
<button type="submit">送出</button>
</form>
<button>
支援屬性
<button>
除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),也會使用下方的專門屬性:
屬性 | 說明 |
---|---|
name | 按鈕名稱。 |
type | 按鈕類型,可以設定 submit 表單內容送出 ( 預設 )、reset 表單內容重置、button 無功能按鈕 ( 搭配 JavaScript )。 |
value | 隨表單送出的值。 |
disabled | 禁用按鈕。 |
下方的 HTML 開啟後,在 <input>
輸入內容,點擊送出按鈕就會將填入的文字送出,按下清空按鈕就會清空輸入欄位的內容。
<form action="test.aspx" method="get" target="_blank">
<input name="user">
<button type="submit">送出</button>
<button type="reset">清空</button>
</form>
修改 <button>
樣式
由於 <button>
的樣式主要根據瀏覽器而定,W3C 並沒有規範其預設樣式,因此可以透過 CSS 設定 <button>
樣式,需要注意的是,如果設定了邊框或背景色,就會覆寫 <button>
預設樣式 ( 包含邊框、點擊、滑鼠移入...等 ),下方的 HTML 開啟後,會將兩個 <button>
的背景設定為不同顏色。
<form action="test.aspx" method="get" target="_blank">
<input name="user">
<button type="submit" style="background:#f99;">送出</button>
<button type="reset" style="background:#99f;">清空</button>
</form>
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~