INPUT

用來宣告多種輸入的方式。放在 FORM 元件區塊時，客戶可以輸入資料，然後上傳服務主機。

屬性說明
ACCESSKEY | TABINDEX | ONBLUR | ONFOCUS | ACCEPT | ALIGN | ALT | CHECKED | DISABLED | ISMAP | MAXLENGTH | NAME | ONCHANGE | ONSELECT | READONLY | SIZE | SRC | TYPE | USEMAP | VALUE
通用屬性 此元件可以使用通用屬性，請參考通用屬性的說明。
ACCESSKEY TABINDEX 請參考屬性與事件。
ONBLUR ONFOCUS 請參考屬性與事件。
ACCEPT 可用來指定一個內容格式（content type）表，以便服務主機正確處理輸入表格。表中可列出多種格式，以『,』分隔。此表也可用來檢查用戶上傳的檔案，是否被允許？部份瀏覽器沒有支援此功能。
ALIGN 用在 type=image 時，宣告圖像輸入時的對齊方式。請參考詳細說明與範例。 <input type=image src='xxc' alt='圖像找不到' align=right style='width:150px;height:100px'> 範例： <input type=image src='xxc' alt='圖像找不到'   align=right style='width:150px;height:100px'> 執行結果：
ALT 用在 type=image 時，當圖像不存在時，就會顯示 ALT 設定的文字。有些瀏覽器也會將 value 當 alt。
CHECKED 當 type=radio 或 type=checkbox 時，此屬性指定多個鈕中，哪一個鈕為預選值。例子中name 相同的元件會組成一組。checkbox 與 radio 要分開，不要混在一組。radio 是單選；checkbox 是複選。 <form> <input name='teacher' type=checkbox>英文 <input name='teacher' type=checkbox checked>數學<br /> <input name='student' type=radio checked>男 <input name='student' type=radio>女 </form> 範例： <form> <input name='teacher' type=checkbox>英文 <input name='teacher' type=checkbox checked>數學<br /> <input name='student' type=radio checked>男 <input name='student' type=radio>女 </form> 執行結果： 英文 數學 男 女
DISABLED 取消元件的功能：不能聚焦，不能用 TAB 選取，不能上傳。DISABLED 可用在 BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA。 <input size=20 value='設為不能輸入' disabled> 範例： <input size=20 value='設為不能輸入' disabled> 執行結果：
ISMAP 使用服務主機的圖像地圖時，必須設為 ISMAP。。
MAXLENGTH 文字輸入時，最大的字元數目。
NAME 元件的識別名。當輸入表格上傳服務主機時，會上傳元件的 NAME/VALUE。
ONCHANGE 元件被聚焦後，其值被修改，之後又失去焦點，此時會產生 ONCHANGE 事件，可啟動程序。 <input size=10 maxlength=5 value='123' onchange='alert("值已變更")'> 範例： <input size=10 maxlength=5 value='123'   onchange='alert("值已變更")'> 執行結果：
ONSELECT 當 type=text 或 type=password 時，其文字被選取（壓住滑鼠左鍵，選取文字），會產生 ONSELECT 事件，可啟動程序。 <input size=10 maxlength=5 value='123' onselect='alert("文字被選取")'> 範例： <input size=10 maxlength=5 value='123'   onselect='alert("文字被選取")'> 執行結果：
READONLY 元件設為唯讀，不能改變其值。READONLY 可以聚焦，可用 TAB 選取，可以上傳。 <input size=10 value='123' readonly> 範例： <input size=10 value='123' readonly> 執行結果：
SIZE 設定元件的寬度，單位是像素；但文字輸入時，寬度為字元數。 <input size=8><br /> <input size=20 > 範例： <input size=8><br /> <input size=20 > 執行結果：
SRC 當 type=image 時，用來指定圖像的網址。 <input type='image' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXecGreDjswocAY_ZZCI48qSK4ZgwSNCwfcbNhGwkn0xwZBFd7C6lUFMHWoQ__AlMAlYUWcGq5gJdCuzZXtmyDbz65lmvwH4NzhVSt817LGKUQAcEnkIPE6DHwsq6U9RBNTU_UajsHtk/s200/shape.jpg" /> 範例： <input type='image'   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXecGreDjswocAY_ZZCI48qSK4ZgwSNCwfcbNhGwkn0xwZBFd7C6lUFMHWoQ__AlMAlYUWcGq5gJdCuzZXtmyDbz65lmvwH4NzhVSt817LGKUQAcEnkIPE6DHwsq6U9RBNTU_UajsHtk/s200/shape.jpg" /> 執行結果：
TYPE 宣告多種輸入方法。 一．button：產生一個方鈕，使用 VALUE 屬性的內容作為其標示。 <input type=button value='點擊我' onclick='alert("您好！")'> 範例： <input type=button value='點擊我'   onclick='alert("您好！")'> 執行結果： 二．checkbox：產生一個多選的選項。name 相同的元件為同一組，可多選。 最喜歡的歌星： <form> <input name='singer' type=checkbox value='沛慈' onclick='alert(this.checked)'>曾沛慈 <input name='singer' type=checkbox value='Jolin' onclick='alert(this.checked)' checked>蔡依林 <input name='singer' type=checkbox value='敬騰' onclick='alert(this.checked)'>蕭敬騰 <input name='singer' type=checkbox value='宗緯' onclick='alert(this.checked)'>楊宗緯 </form> 範例： 最喜歡的歌星： <form> <input name='singer' type=checkbox   value='沛慈' onclick='alert(this.checked)'>曾沛慈 <input name='singer' type=checkbox   value='Jolin' onclick='alert(this.checked)' checked>蔡依林 <input name='singer' type=checkbox   value='敬騰' onclick='alert(this.checked)'>蕭敬騰 <input name='singer' type=checkbox   value='宗緯' onclick='alert(this.checked)'>楊宗緯 </form> 執行結果： 最喜歡的歌星： 曾沛慈 蔡依林 蕭敬騰 楊宗緯 三．file：產生一個選擇檔案的元件。可用 VALUE 屬性設定預設檔名。上傳檔案時，FORM 必須設定屬性 ENCTYPE='multipart/form-data' 及 METHOD=post；INPUT 的 ACCEPT 可以指定檔案格式。 <form action='處理程序網址' method=post ENCTYPE='multipart/form-data'> <input type=file accept='text/html'> </form> 範例： <form action='處理程序網址' method=post   ENCTYPE='multipart/form-data'> <input type=file accept='text/html'> </form> 執行結果： 四．hidden：元件設為不展現。服務主機可用此設一些數值，傳給處理程序。 看<input name='weight' type=hidden value='20公斤'>不見 範例： 看<input name='weight' type=hidden value='20公斤'>不見 執行結果： 看不見 五．image：產生一個圖像的輸入區。用 SRC 屬性指到圖像的網址。點擊此圖像後，會上傳點擊的座標（coord.x=X&coord.y=Y）給服務主機。座標以左上方為原點（0,0），"coord" 是用 NAME 屬性設定。 六．password：輸入文字時，會顯示『*』，而不顯示輸入的文字。用在輸入密碼。 密碼：<input type=password size=20> 範例： 密碼：<input type=password size=20> 執行結果： 密碼： 七．radio：產生一個單選鈕。老式收音機都有一個選台鈕，一次只能選一個電台，此為其名稱的由來。使用時可將多個 RADIO 設為相同 NAME，如此成為同一組；同一組的 RADIO 只能單選其中之一。 國別： <form> <input name='country' type=radio value='ROC' onclick='alert(this.value)' checked>中華民國 <input name='country' type=radio value='USA' onclick='alert(this.value)'>美國 <input name='country' type=radio value='NZL' onclick='alert(this.value)'>紐西蘭 <input name='country' type=radio value='FRC' onclick='alert(this.value)'>法國 </form> 範例： 國別： <form> <input name='country' type=radio   value='ROC' onclick='alert(this.value)' checked>中華民國 <input name='country' type=radio   value='USA' onclick='alert(this.value)'>美國 <input name='country' type=radio   value='NZL' onclick='alert(this.value)'>紐西蘭 <input name='country' type=radio   value='FRC' onclick='alert(this.value)'>法國 </form> 執行結果： 國別： 中華民國 美國 紐西蘭 法國 八．reset：產生一個重設鈕，使用 VALUE 屬性的內容作為其標示。點選後，會將輸入表格中的元件重設為初值。 <form name='f3'> <input size=20 value='請輸入'> <input type=reset value='清除'> </form> 範例： <form name='f3'> <input size=20 value='請輸入'> <input type=reset value='清除'> </form> 執行結果： 九．submit：產生一上傳鈕，使用 VALUE 屬性的內容作為其標示。 十．text：產生一行的文字輸入。
USEMAP 宣告客戶端圖形的地圖。用戶可以點擊地圖的不同區域，啟動不同的服務。下面的範例只有在 Firefox 成功運作，建議改用 IMG。請參考 AREA 的說明與範例。 <map name='test1'> <area shape='rect' coords='0, 0, 100, 100' href='javascript:alert("綠色")'> <area shape='rect' coords='100, 0, 200, 100' href='javascript:alert("白色")'> <area shape='rect' coords='0, 100, 100, 200' href='javascript:alert("黃色")'> <area shape='rect' coords='100, 100, 200, 200' href='javascript:alert("藍色")'> </map> <input type='image' usemap='#test1' style="width:200px; height:200px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXecGreDjswocAY_ZZCI48qSK4ZgwSNCwfcbNhGwkn0xwZBFd7C6lUFMHWoQ__AlMAlYUWcGq5gJdCuzZXtmyDbz65lmvwH4NzhVSt817LGKUQAcEnkIPE6DHwsq6U9RBNTU_UajsHtk/s200/shape.jpg" />請點擊 範例： <map name='test1'> <area shape='rect' coords='0, 0, 100, 100'   href='javascript:alert("綠色")'> <area shape='rect' coords='100, 0, 200, 100'   href='javascript:alert("白色")'> <area shape='rect' coords='0, 100, 100, 200'   href='javascript:alert("黃色")'> <area shape='rect' coords='100, 100, 200, 200'   href='javascript:alert("藍色")'> </map> <input type='image' usemap='#test1'   style="width:200px; height:200px"   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXecGreDjswocAY_ZZCI48qSK4ZgwSNCwfcbNhGwkn0xwZBFd7C6lUFMHWoQ__AlMAlYUWcGq5gJdCuzZXtmyDbz65lmvwH4NzhVSt817LGKUQAcEnkIPE6DHwsq6U9RBNTU_UajsHtk/s200/shape.jpg"  />請點擊 執行結果： 請點擊
VALUE 設定控制元件的初值，也可作為方鈕的標示。