iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
Modern Web

跟著 OXXO 一起學 HTML系列 第 55

( Day 21.1 ) HTML 按鈕 <button>

  • 分享至 

  • xImage
  •  

<button> 是 HTML 表單裡的按鈕元素,通常會放在表單裡面讓使用者點擊,這篇文章將會介紹 <button> 表單按鈕元素的用法。

原文參考:按鈕 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>

HTML 教學 - 按鈕  - 認識

<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>

HTML 教學 - 按鈕  - 支援屬性

修改 <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>

HTML 教學 - 按鈕  - 修改樣式

更多教學

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,我有個超過一千篇教學的 STEAM 教育學習網,有興趣可以參考下方連結呦~ ^_^


上一篇
( Day 20.3 ) HTML 行文字輸入 <textarea>
下一篇
( Day 21.2 ) HTML 下拉選單 <select>、<option>、<optgroup>
系列文
跟著 OXXO 一起學 HTML90
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言