顯示表單按鈕 button

HTML 的按鈕有分為顯示用的以及送出表單用的，本篇介紹的是顯示用的按鈕，語法重點在於『input='button'』這個部分，這樣的表單可以加入一些美化或是 JavaScript 的語法，來設計互動特效，雖然無法用來送出表單，但還是有他存在的必要，尤其透過 button 搭配上 AJAX 的許多應用，可以相當有變化，也可以讓單純的 Form 功能變得更強大。

若您要尋找的是送出表單功能的按鈕，請參閱：送出表單按鈕 submit。

顯示表單按鈕 button 語法
<input type="button" name="按鈕名稱" value="按鈕值" style="按鈕樣式">
基本語法中最重要的 button 一定要有，再來是 name 設定按鈕名稱、value 設定按鈕的值，若在一個網頁內，有許多的不同的 button，就要靠 name 與 value 來分辨網友所選擇的是哪個 button，最後的 style 是透過 css 美化 button 用的，不一定要使用。

顯示表單按鈕 button 範例
<form action="" method="">
<input type="button" value="說您好" onclick="javascript:getElementById('Box').value='您好';">:
<input type="text" id="Box">
</form>
範例呈現效果
:
我們在 HTML Form 表單內使用了兩個 input 欄位，第一個欄位是 button，當網友選擇這個 button，會在第二個 input 文字輸入欄位內，自動插入＂您好＂這樣的字串，觸發 button 的事件為 JavaScript onclick event，而 getElementById 代表的是鎖定表單內的第二個 input 欄位，當網友按下按鈕，就立即在第二個 input 欄位內插入文字。這僅是一個簡單的範例，button 還有許多種不同的應用方式，完全看網頁設計師如何去變化。

延伸閱讀參考資料
  1. JavaScript onclick 事件
  2. document.getElementById()
© Copyright webtech.tw Since 2010