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

2022年7月10日 (日) 21:01的最新修訂版本

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

本頁的測試實作程式
及其響應程式

form 的屬性

必要屬性為 action 和 method ，如：<form action=r.php method='post、get'>

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

HTML5 完整的 form 屬性列表如下(拉斜為屬性值說明，不拉斜為屬性值用字)：

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

form 內部的輸入元素

共四種：

1. input
2. textarea
3. select
4. button：如 <button name='test[butt]' value='不一樣'>提交</button>，就是後送按鈕，但
   • <button> 與 </button> 之間既可以放文字，也可以放圖照。但不能放圖像映射：即在一幅圖中定義若干個區域，每個區域中指定一個不同的超鏈接，當單擊不同的區域時便可以跳轉到相應的目標頁面。
   • type 屬性有三種值：
     1. button：IE 的預設值
     2. submit：W3C規範與其他瀏覽器的預設值
     3. reset
   • IE 將提交 <button> 與 </button> 之間的文本；其他瀏覽器將提交value屬性的內容，所以顯示的字和後送值可以不一樣。

且可以 label 標籤指示觸動範圍

一、input 單行文字表單

type 屬性

-----傳統十種 input-----

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

   <input type='submit' name='欄位名稱' value='完成' />

6. image 圖片提交，作用同 submit ，需配合src屬性使用，後送值隨瀏覽器不同而不同。且 image 後送， submit 就不後送；submit 後送， image 就不後送。
7. radio 單選按鈕，一組單選按鈕必須是定義相同的 name 值
8. checkbox 複選按鈕，一次可以選擇多個，一組複選按鈕必須是定義不同的 name 值，如相同陣列元素的 index。

   <input type='checkbox' checked />預設該項目被核取

9. file 檔案上傳文本框，後送值為檔名
10. hidden 隱藏欄，會被提交
    -----HTML5 新增十種 input-----
11. color 顏色按鈕，後送 7 位色碼
12. date 日期欄位，帶有calender控制項
13. datetime-local 日期欄位，time欄位，帶有calender控制項
14. week 週，帶有calender控制項。僅 Chrome / Opera / Microsoft Edge 支援。若瀏覽器不支援，功能與 <input type='text'> 相同。
15. time 時、分、秒 帶有time控制項
16. email 郵件地址，後送前會檢查是否為合格的 email 字串
17. number 數字輸入文本框
18. range 數字輸入文本框，範圍
19. tel 電話號碼文本框，在手機上誘導出自定義鍵盤
20. url url文本框，後送前會檢查是否為合格的 URL 字串

其他屬性

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

   <input type='text' name='欄位名稱' />

4. 屬性:maxlength，指定欄位可輸入的文字數

   <input type='text' name='欄位名稱' maxlength=12 /> (值設定12則可輸入字元數就是12)

5. 屬性:size，指定欄位寬度

   <input type='text' name='欄位名稱' maxlength=12 size=欄位的字元寬度 />

6. 屬性:readonly，設定欄位唯讀模式

   <input type='text' name='欄位名稱' maxlength=12 size=欄位的字元寬度 readonly={true,false} />

7. 屬性:disabled，禁用屬性，文本框，按鈕，複選框等
8. 屬性:checked：設置預設選中項，只適用於單選按鈕或複選按鈕

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

上傳欄位補充說明

選用檔案以供上傳

1. 屬性:type，<input type='file' />
2. 屬性:name，指定後送的變數名稱，值如：up_file[]後送一系列的檔案；或up_file後送一個檔案。
3. 屬性(HTML5):multiple，允許多值，值如：multiple；或屬性名值合一寫成multiple。選檔時配合按住 Shift 或者 Control 。
4. 屬性:accept，允許上傳的檔案類型，可以用 MIME 也可以用 .xxx ，也可以兩者混用。兩組允許類型之間用「,」間開。一些例子：「image/*」任何圖片；「application/msword」任何微軟word；「application/vnd.openxmlformats-officedocument.wordprocessingml.document」任何微軟文件。
5. 屬性(HTML5):required，必需輸入，值如：required
6. 屬性:draggable，可拖入。值如「true」
7. 屬性 value 對 type=file 不能使用。
8. 如要改變外觀，可先以「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>來仿做按鈕。

可複選的核取方塊補充說明

1. 設定可供複選的核取方塊欄位
   • 屬性:type
   • <input type='checkbox' />方塊欄位文字
2. 預設該項目被核取
   • 屬性:checked
   • <input type='checkbox' checked />
3. 設定該項目被核取時的代表值
   • 屬性:value
   • <input type='checkbox' value='欄位值' />

二、textarea 多行文字方塊

1. 建立一個可以輸入多行文字的表單欄位
   • <textarea>......</textarea>
2. 指定多行文字方塊的輸入區列數
   • 屬性:rows
   • <textarea rows=列數 />
3. 指定多行文字方塊的輸入區行數
   • 屬性:cols
   • <textarea rows=列數 cols=行數/>
4. 指定欄位中所輸入文字是否換行
   • 屬性:wrap
   • <textarea wrap={off,virtual,physical} />
   • off代表關閉自動換行功能
   • virtual代表自動換行，但輸出時還是一行
   • physical代表自動換行，輸出時也是多行

三、select 下拉式選單

1. 建立下拉式選單欄位
   • <select>......</select>
2. 指定下拉式選單欄位名稱
   • 屬性:name
   • <select name='欄位名稱'>.....</select>
3. 指定清單方塊中顯示的項目數量
   • 屬性:size
   • <select size=清單方塊大小 />
4. 指定該清單為可複選
   • 屬性:multiple
   • <select size=清單方塊大小 multiple />
5. 指定下拉式選單項目內容
   • 項目標籤:option
   • <option>項目名稱</option>
6. 設定下拉式選單項目的代表值
   • 屬性:value
   • <option value='項目代表值'>項目名稱</option>
7. 預設選取的項目
   • 屬性:selected
   • <option value='項目代表值' selected>項目名稱</option>
8. 將項目分組，當項目太多時，可以改善 select 選單的可讀性。
   • 如下：以 optgroup 標籤，將項目分為兩組

	<optgroup label='例行會務'>
	<option value='1'>會員大會</option>
	<option value='2'>理監事會</option>
	<option value='3'>會員及會費</option>
	<option value='4'>會計</option>
	</optgroup>
	<optgroup label='業務'>
	<option value='5'>職員教育訓練</option>
	<option value='6'>研習活動</option>
	<option value='7'>網路資源</option>
	<option value='8'>振鐸40週年</option>
	</optgroup>

四、Lable 指定某個表單元素的觸動範圍

(一)讓範圍包住該元素

如 <label><input type='checkbox' name='fruit' id= value='0'>蘋果</label>

label 同時包住了 fruit 核取方塊和「蘋果」，此時點擊「蘋果」二字，等同點擊核取方塊。

(二)讓範圍指示該元素的 id

<input type='checkbox' name='fruit' id='xigua' value='1' />
<label for='xigua'>西瓜</label>

label 包住了「西瓜」二字，同時以 for 屬性指示 id 為 xigua 的核取方塊，此時點擊「西瓜」二字，等同點擊核取方塊。

五、把欄位分組

1. 把幾個欄位合成一個群組
   • <fieldset>......</fieldset>
2. 群組攔位的標題
   • <legend>群組標題</legend>