HTML button 按鈕 | html button size
HTMLbutton按鈕的應用相當的廣泛,除了可以用來做為表單的送出之外,還可以用來做些特效讓網友互動,而很早就出現的HTMLbutton功能,也隨著網路應用的發展,結合JavaScript的事件觸發更多有趣的功能,透過網頁設計師的巧思,讓一個簡單的按鈕變得更不簡單,除此之外,後來流行的CSS語法更讓傳統陽春的按鈕更加美化,以下準備了一些HTMLButton的簡單範例參考。HTMLbutton按鈕基本語法
HTML button 按鈕基本語法
<button type="button">我是按鈕</button>
我是按鈕另外一種常見於表單的寫法是透過 <input> 標籤來寫
<input type="button" value="我是按鈕">
這兩種寫法看似結果相同,但用起來可不一樣,在 HTML 中要做出圖片式按鈕的特效,就必須使用 <button> 標籤,在 CSS[3] 中就不一定。製作圖片型按鈕需先了解圖片的用法,請參考:HTML 圖片插入或加入連結語法[4]。
HTML button 圖片型按鈕範例
<button type="button"><img src="圖片網址"></button>
HTML button 超連結按鈕範例
<input type="button" value="連結名稱" onclick="location.href=要前往的網頁連結">
這裡用到的 onclick[5] 語法是 JavaScript[6] 的功能,意思是當滑鼠按下按鈕的時候,會做什麼樣的動作,在這裡我們就將 local.href=要連結的網址 加入事件中,讓用戶觸發按鈕的功能後,前往要去的目標網頁,請注意單引號與雙引號的應用,避免瀏覽器判讀錯誤。
HTML button 的大小設計設定 button 按鈕寬度、高度與文字大小
<input type="button" value="我是按鈕" style="width:120px;height:40px;font-size:20px;">
這個範例採用...