HTML/表單：修訂版本之間的差異

2022年1月6日 (四) 21:42的修訂版本

很多網站都要填寫基本資料，或是留言板，都是用form(表單)構成的網頁。最大的特色就是可以讓使用者輸入資料，或從預先設定的選項中進行選擇，資料送出之後就會送到伺服器資料庫裡。

action=程式的位置。程式的路徑可以省略，瀏覽器會把此表單交給提供這個表單的主機。所以我們可以建立一個提交給其他主機的表單，但這樣子做在大部分的瀏覽器會得到警告訊息。
- <form action=程式的位置>
method=get 或 post。優先用post，不經URL傳遞，不限傳遞資料的長度。get是預設值，將表單資料附在實際程式的URL之後，URL可能太長，超過系統允許的長度，而被截短導致錯誤。

HTML5 完整的 form 屬性列表如下：

屬性名	屬性值	說明
action	URL	表單向何處發送數據
enctype	application/x-www-form-urlencoded：傳送前編碼所有字元(預設)。 multipart/form-data：不對字元編碼，用於檔案上傳時。 text/plain：以純文字形式進行編碼，不含任何控制元件或格式字元。空格轉換為加號，但不對特殊字元編碼。	發送數據編碼型別
method	post、get	提交的通道
target	_self：回應在同一 frame 打開(預設) _blank：回應在新視窗或新分頁中打開 _parent：回應在父 frame 中打開 _top：回應在整個視窗中打開 framename：回應在指定的 iframe 中打開	伺服器的回應將在何處打開
autocomplete	on、off	是否啟用自動完成功能，瀏覽器基於之前鍵入過的值，預測對欄位的輸入值。
novalidate	novalidate	不對表單輸入值進行驗證

共三種：

-----不後送-----

button 普通按鈕，不後送，給 javascript 或 DOM 使用。
image 圖片按鈕，不後送，需配合src屬性使用
reset 重置按鈕，重設表單欄位內容，不後送
-----後送-----
text 普通文本框(預設值)
password 掩碼文本框
submit 提交按鈕，送出表單資料。可同時後送 name 與 value ，按鈕上顯示 value 屬性的設定值，firefox 預設 value 為「送出查詢」。

<input type='submit' name='欄位名稱' value='完成' />
radio 單選按鈕，一組單選按鈕必須是定義相同的 name 值
checkbox 複選按鈕，一次可以選擇多個，一組複選按鈕必須是定義不同的 name 值，如相同陣列元素的 index。

<input type='checkbox' checked />預設該項目被核取
file 檔案上傳文本框，後送值為檔名
hidden 隱藏欄，會被提交
color 顏色按鈕，後送 7 位色碼
date 日期欄位，帶有calender控制項
datetime-local 日期欄位，time欄位，帶有calender控制項
week 周，帶有calender控制項。僅 Chrome / Opera / Microsoft Edge支援。瀏覽器若不支援的，其功能與 <input type='text'>相同。
time 時、分、秒帶有time控制項
email 郵件地址，後送前會檢查是否為合格的 email 字串
number 數字輸入文本框
range 數字輸入文本框，範圍
tel 電話號碼文本框，在手機上誘導出自定義鍵盤
url url文本框，後送前會檢查是否為合格的 URL 字串

屬性:placeholder，定義文本框提示性的文字
屬性:value，指定欄位值，未指定由使用者輸入
屬性:name，指定欄位名稱

<input type='text' name='欄位名稱' />
屬性:maxlength，指定欄位可輸入的文字數

<input type='text' name='欄位名稱' maxlength=12 /> (值設定12則可輸入字元數就是12)
屬性:size，指定欄位寬度

<input type='text' name='欄位名稱' maxlength=12 size=欄位的字元寬度 />
屬性:readonly，設定欄位唯讀模式

<input type='text' name='欄位名稱' maxlength=12 size=欄位的字元寬度 readonly={true,false} />
屬性:disabled，禁用屬性，文本框，按鈕，複選框等
屬性:checked：設置預設選中項，只適用於單選按鈕或複選按鈕

※以 HTML5 的協定為主，HTML 4.01 廢棄 align 屬性，HTML5 不支援該屬性。請使用 CSS 對 input 元素進行對齊操作。

選用檔案以供上傳

屬性:type，<input type='file' />
屬性:name，指定後送的變數名稱，值如：up_file[]後送一系列的檔案；或up_file後送一個檔案。
屬性(HTML5):multiple，允許多值，值如：multiple；或屬性名值合一寫成multiple。選檔時配合按住 Shift 或者 Control 。
屬性:accept，允許上傳的檔案類型，可以用 MIME 也可以用 .xxx ，也可以兩者混用。兩組允許類型之間用「,」間開。一些例子：「image/*」任何圖片；「application/msword」任何微軟word；「application/vnd.openxmlformats-officedocument.wordprocessingml.document」任何微軟文件。
屬性(HTML5):required，必需輸入，值如：required
屬性:draggable，可拖入。值如「true」
屬性 value 對 type=file 不能使用。
如要改變外觀，可先以「style='position:absolute;clip:rect(0 0 0 0);'」使其不顯示，再以<label for='input的id' style='background:url(/file/button.png) repeat-x left bottom;font-family:標楷體;font-size:small;border:solid 0.1pt;border-radius:2px;padding:2px 8px;'>選檔</label>來仿做按鈕。

@@ 第 105 行： / 第 105 行： @@
 #*<input type='checkbox' value='欄位值' />
-===多行文字方塊===
+===textarea 多行文字方塊===
 #建立一個可以輸入多行文字的表單欄位
 #*<textarea>......</textarea>