HTML button 按鈕基本語法
<button type="button">我是按鈕</button>
另外一種常見於表單的寫法是透過 <input> 標籤來寫
<input type="button" value="我是按鈕">
這兩種寫法看似結果相同,但用起來可不一樣,在 HTML 中要做出圖片式按鈕的特效,就必須使用 <button> 標籤,在 CSS 中就不一定。製作圖片型按鈕需先了解圖片的用法,請參考:HTML 圖片插入或加入連結語法。
HTML button 圖片型按鈕範例
<button type="button"><img src="圖片網址"></button>
HTML button 超連結按鈕範例
<input type="button" value="連結名稱" onclick="location.href='要前往的網頁連結'">
這裡用到的 onclick 語法是 JavaScript 的功能,意思是當滑鼠按下按鈕的時候,會做什麼樣的動作,在這裡我們就將 local.href='要連結的網址' 加入事件中,讓用戶觸發按鈕的功能後,前往要去的目標網頁,請注意單引號與雙引號的應用,避免瀏覽器判讀錯誤。
HTML button 的大小設計
設定 button 按鈕寬度、高度與文字大小
<input type="button" value="我是按鈕" style="width:120px;height:40px;font-size:20px;">
這個範例採用了 CSS 語法中的寬度(width)、高度(height)以及文字大小(font-size)來設定按鈕的規格,除此之外 CSS 還有很多規則可以讓你美化按鈕,例如背景色(background-color)、邊框(border)、漸層、文字字型(font-family)... 等。
用 css 技巧修改按鈕的邊框也有很好的效果,請參閱:HTML button 按鈕邊框樣式與顏色。
HTML button 有可能的値與屬性
- disabled - 不能夠動作的按鈕,僅能看不能按。
- name - 按鈕的名稱
- type - 按鈕的類型,有 button(單純按鈕)、reset(清空表單)、submit(送出表單)
- value - 就是按鈕的値