HTML/表單:修訂版本之間的差異
出自六年制學程
(→form 的屬性) |
|||
(未顯示2位用戶所作出之77次版本) | |||
第 1 行: | 第 1 行: | ||
[[分類:HTML]] | [[分類:HTML]] | ||
很多網站都要填寫基本資料,或是留言板,都是用form(表單)構成的網頁。最大的特色就是可以讓使用者輸入資料,或從預先設定的選項中進行選擇,資料送出之後就會送到伺服器資料庫裡。 | 很多網站都要填寫基本資料,或是留言板,都是用form(表單)構成的網頁。最大的特色就是可以讓使用者輸入資料,或從預先設定的選項中進行選擇,資料送出之後就會送到伺服器資料庫裡。 | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | === | + | [http://jendo.org/study/testForm.html 本頁的測試實作程式]<br/> |
− | # | + | [http://jendo.org/study/testForm.html 及其響應程式] |
− | #* | + | ===form 的屬性=== |
− | #*<input type=' | + | 必要屬性為 action 和 method ,如:<form action=r.php method='post、get'> |
+ | #action=程式的位置。程式的路徑可以省略,瀏覽器會把此表單交給提供這個表單的主機。所以我們可以建立一個提交給其他主機的表單,但這樣子做在大部分的瀏覽器會得到警告訊息。 | ||
+ | #*<form action=程式的位置> | ||
+ | #method=get 或 post。優先用post,不經URL傳遞,不限傳遞資料的長度。get是預設值,將表單資料附在實際程式的URL之後,URL可能太長,超過系統允許的長度,而被截短導致錯誤。 | ||
+ | |||
+ | HTML5 完整的 form 屬性列表如下(拉斜為屬性值說明,不拉斜為屬性值用字): | ||
+ | <table class=nicetable> | ||
+ | <tr><th>屬性名</th><th>屬性值</th><th>說明</th></tr> | ||
+ | <tr><td>name</td><td>''form_name''</td><td>表單的名稱</td> | ||
+ | </tr><tr><td>action</td><td>''URL''</td><td>表單向何處發送數據</td> | ||
+ | </tr><tr> | ||
+ | <td>accept-charset</td> | ||
+ | <td>''Charset_list''</td> | ||
+ | <td>伺服器可以處理的表單數據字符集</td> | ||
+ | </tr><tr> | ||
+ | <td>accept</td> | ||
+ | <td>''Mime_Type''</td> | ||
+ | <td style='color:red'>HTML 5 不支持</td> | ||
+ | </tr><tr> | ||
+ | <td>enctype</td> | ||
+ | <td> | ||
+ | #application/x-www-form-urlencoded:傳送前編碼所有字元(預設)。 | ||
+ | #multipart/form-data:傳送複數個資料格式,用於檔案上傳時。 | ||
+ | #text/plain:以純文字形式進行編碼,不含任何控制元件或格式字元。<br/>空格轉換為加號,但不對特殊字元編碼。 | ||
+ | </td> | ||
+ | <td>發送表單數據前如何對其編碼</td> | ||
+ | </tr> | ||
+ | <tr><td>method</td><td>post、get</td><td>HTTP 提交的通道</td></tr> | ||
+ | <tr><td>target</td> | ||
+ | <td> | ||
+ | #_self:回應在同一 frame 打開(預設) | ||
+ | #_blank:回應在新視窗或新分頁中打開 | ||
+ | #_parent:回應在父 frame 中打開 | ||
+ | #_top:回應在整個視窗中打開 | ||
+ | #<i>framename</i>:回應在指定的 iframe 中打開 | ||
+ | </td> | ||
+ | <td>伺服器的回應將在何處打開</td> | ||
+ | </tr> | ||
+ | <tr><td>autocomplete<img src='https://upload.wikimedia.org/wikipedia/commons/8/82/Devicon-html5-plain.svg' width=12 height=12 /></td><td>on、off</td><td>是否啟用自動完成功能。瀏覽器基於之<br/>前鍵入過的值,預測對欄位的輸入值。</td></tr> | ||
+ | <tr><td>novalidate<img src='https://upload.wikimedia.org/wikipedia/commons/8/82/Devicon-html5-plain.svg' width=12 height=12 /></td><td>novalidate</td><td>不對表單輸入值進行驗證</td></tr> | ||
+ | </table> | ||
+ | |||
+ | ===form 內部的輸入元素=== | ||
+ | 共四種: | ||
+ | #input | ||
+ | #textarea | ||
+ | #select | ||
+ | #button:如 <button name='test[butt]' value='不一樣'>提交</button>,就是後送按鈕,但 | ||
+ | #*<button> 與 </button> 之間既可以放文字,也可以放圖照。但不能放圖像映射:即在一幅圖中定義若干個區域,每個區域中指定一個不同的超鏈接,當單擊不同的區域時便可以跳轉到相應的目標頁面。 | ||
+ | #*type 屬性有三種值: | ||
+ | #*#button:IE 的預設值 | ||
+ | #*#submit:W3C規範與其他瀏覽器的預設值 | ||
+ | #*#reset | ||
+ | #*IE 將提交 <button> 與 </button> 之間的文本;其他瀏覽器將提交value屬性的內容,所以顯示的字和後送值可以不一樣。 | ||
+ | |||
+ | 且可以 label 標籤指示觸動範圍 | ||
+ | |||
+ | ===一、input 單行文字表單=== | ||
+ | ====type 屬性==== | ||
+ | :-----傳統十種 input----- | ||
+ | #text 普通文本框(預設值) | ||
+ | #password 掩碼文本框 | ||
+ | #button 普通按鈕,不後送,給 javascript 或 DOM 使用。 | ||
+ | #reset 重置按鈕,重設表單欄位內容,不後送 | ||
+ | #submit 提交按鈕,送出表單資料。可同時後送 name 與 value ,按鈕上顯示 value 屬性的設定值,firefox 預設 value 為「送出查詢」,chrome 預設 value 為「提交」。 | ||
+ | #:<input type='submit' name='欄位名稱' value='完成' /> | ||
+ | #image 圖片提交,作用同 submit ,需配合src屬性使用,後送值隨瀏覽器不同而不同。且 image 後送, submit 就不後送;submit 後送, image 就不後送。 | ||
+ | #radio 單選按鈕,一組單選按鈕必須是定義相同的 name 值 | ||
+ | #checkbox 複選按鈕,一次可以選擇多個,一組複選按鈕必須是定義不同的 name 值,如相同陣列元素的 index。 | ||
+ | #:<input type='checkbox' checked />預設該項目被核取 | ||
+ | #file 檔案上傳文本框,後送值為檔名 | ||
+ | #hidden 隱藏欄,會被提交<br/>-----HTML5 新增十種 input----- | ||
+ | #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>來仿做按鈕。 | ||
− | === | + | ====可複選的核取方塊補充說明==== |
#設定可供複選的核取方塊欄位 | #設定可供複選的核取方塊欄位 | ||
#*屬性:type | #*屬性:type | ||
第 36 行: | 第 126 行: | ||
#*<input type='checkbox' value='欄位值' /> | #*<input type='checkbox' value='欄位值' /> | ||
− | === | + | ===二、textarea 多行文字方塊=== |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
#建立一個可以輸入多行文字的表單欄位 | #建立一個可以輸入多行文字的表單欄位 | ||
#*<textarea>......</textarea> | #*<textarea>......</textarea> | ||
第 57 行: | 第 142 行: | ||
#*physical代表自動換行,輸出時也是多行 | #*physical代表自動換行,輸出時也是多行 | ||
− | === | + | ===三、select 下拉式選單=== |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
#建立下拉式選單欄位 | #建立下拉式選單欄位 | ||
#*<select>......</select> | #*<select>......</select> | ||
第 69 行: | 第 148 行: | ||
#*屬性:name | #*屬性:name | ||
#*<select name='欄位名稱'>.....</select> | #*<select name='欄位名稱'>.....</select> | ||
+ | #指定清單方塊中顯示的項目數量 | ||
+ | #*屬性:size | ||
+ | #*<select size=清單方塊大小 /> | ||
+ | #指定該清單為可複選 | ||
+ | #*屬性:multiple | ||
+ | #*<select size=清單方塊大小 multiple /> | ||
#指定下拉式選單項目內容 | #指定下拉式選單項目內容 | ||
− | #* | + | #*項目標籤:option |
− | #*<option>項目名稱 | + | #*<option>項目名稱</option> |
#設定下拉式選單項目的代表值 | #設定下拉式選單項目的代表值 | ||
#*屬性:value | #*屬性:value | ||
− | #*<option value='項目代表值'>項目名稱 | + | #*<option value='項目代表值'>項目名稱</option> |
#預設選取的項目 | #預設選取的項目 | ||
#*屬性:selected | #*屬性:selected | ||
− | #*<option selected>項目名稱 | + | #*<option value='項目代表值' selected>項目名稱</option> |
+ | #將項目分組,當項目太多時,可以改善 select 選單的可讀性。 | ||
+ | #*如下:以 optgroup 標籤,將項目分為兩組 | ||
+ | <pre> <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></pre> | ||
− | === | + | ===四、Lable 指定某個表單元素的觸動範圍=== |
− | + | ====(一)讓範圍包住該元素==== | |
− | + | :如 <label><input type='checkbox' name='fruit' id='' value='0'>蘋果</label> | |
− | + | :label 同時包住了 fruit 核取方塊和「蘋果」,此時點擊「蘋果」二字,等同點擊核取方塊。 | |
− | + | ====(二)讓範圍指示該元素的 id==== | |
− | + | <pre><input type='checkbox' name='fruit' id='xigua' value='1' /> | |
− | + | <label for='xigua'>西瓜</label></pre> | |
+ | :label 包住了「西瓜」二字,同時以 for 屬性指示 id 為 xigua 的核取方塊,此時點擊「西瓜」二字,等同點擊核取方塊。 | ||
− | === | + | ===五、把欄位分組=== |
+ | #把幾個欄位合成一個群組 | ||
+ | #*<fieldset>......</fieldset> | ||
+ | #群組攔位的標題 | ||
+ | #*<legend>群組標題</legend> |
2022年7月10日 (日) 21:01的最新修訂版本
很多網站都要填寫基本資料,或是留言板,都是用form(表單)構成的網頁。最大的特色就是可以讓使用者輸入資料,或從預先設定的選項中進行選擇,資料送出之後就會送到伺服器資料庫裡。
目錄
form 的屬性
必要屬性為 action 和 method ,如:<form action=r.php method='post、get'>
- action=程式的位置。程式的路徑可以省略,瀏覽器會把此表單交給提供這個表單的主機。所以我們可以建立一個提交給其他主機的表單,但這樣子做在大部分的瀏覽器會得到警告訊息。
- <form action=程式的位置>
- 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 |
|
發送表單數據前如何對其編碼 |
method | post、get | HTTP 提交的通道 |
target |
|
伺服器的回應將在何處打開 |
autocomplete | on、off | 是否啟用自動完成功能。瀏覽器基於之 前鍵入過的值,預測對欄位的輸入值。 |
novalidate | novalidate | 不對表單輸入值進行驗證 |
form 內部的輸入元素
共四種:
- input
- textarea
- select
- button:如 <button name='test[butt]' value='不一樣'>提交</button>,就是後送按鈕,但
- <button> 與 </button> 之間既可以放文字,也可以放圖照。但不能放圖像映射:即在一幅圖中定義若干個區域,每個區域中指定一個不同的超鏈接,當單擊不同的區域時便可以跳轉到相應的目標頁面。
- type 屬性有三種值:
- button:IE 的預設值
- submit:W3C規範與其他瀏覽器的預設值
- reset
- IE 將提交 <button> 與 </button> 之間的文本;其他瀏覽器將提交value屬性的內容,所以顯示的字和後送值可以不一樣。
且可以 label 標籤指示觸動範圍
一、input 單行文字表單
type 屬性
- -----傳統十種 input-----
- text 普通文本框(預設值)
- password 掩碼文本框
- button 普通按鈕,不後送,給 javascript 或 DOM 使用。
- reset 重置按鈕,重設表單欄位內容,不後送
- submit 提交按鈕,送出表單資料。可同時後送 name 與 value ,按鈕上顯示 value 屬性的設定值,firefox 預設 value 為「送出查詢」,chrome 預設 value 為「提交」。
- <input type='submit' name='欄位名稱' value='完成' />
- image 圖片提交,作用同 submit ,需配合src屬性使用,後送值隨瀏覽器不同而不同。且 image 後送, submit 就不後送;submit 後送, image 就不後送。
- radio 單選按鈕,一組單選按鈕必須是定義相同的 name 值
- checkbox 複選按鈕,一次可以選擇多個,一組複選按鈕必須是定義不同的 name 值,如相同陣列元素的 index。
- <input type='checkbox' checked />預設該項目被核取
- file 檔案上傳文本框,後送值為檔名
- hidden 隱藏欄,會被提交
-----HTML5 新增十種 input----- - 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>來仿做按鈕。
可複選的核取方塊補充說明
- 設定可供複選的核取方塊欄位
- 屬性:type
- <input type='checkbox' />方塊欄位文字
- 預設該項目被核取
- 屬性:checked
- <input type='checkbox' checked />
- 設定該項目被核取時的代表值
- 屬性:value
- <input type='checkbox' value='欄位值' />
二、textarea 多行文字方塊
- 建立一個可以輸入多行文字的表單欄位
- <textarea>......</textarea>
- 指定多行文字方塊的輸入區列數
- 屬性:rows
- <textarea rows=列數 />
- 指定多行文字方塊的輸入區行數
- 屬性:cols
- <textarea rows=列數 cols=行數/>
- 指定欄位中所輸入文字是否換行
- 屬性:wrap
- <textarea wrap={off,virtual,physical} />
- off代表關閉自動換行功能
- virtual代表自動換行,但輸出時還是一行
- physical代表自動換行,輸出時也是多行
三、select 下拉式選單
- 建立下拉式選單欄位
- <select>......</select>
- 指定下拉式選單欄位名稱
- 屬性:name
- <select name='欄位名稱'>.....</select>
- 指定清單方塊中顯示的項目數量
- 屬性:size
- <select size=清單方塊大小 />
- 指定該清單為可複選
- 屬性:multiple
- <select size=清單方塊大小 multiple />
- 指定下拉式選單項目內容
- 項目標籤:option
- <option>項目名稱</option>
- 設定下拉式選單項目的代表值
- 屬性:value
- <option value='項目代表值'>項目名稱</option>
- 預設選取的項目
- 屬性:selected
- <option value='項目代表值' selected>項目名稱</option>
- 將項目分組,當項目太多時,可以改善 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 的核取方塊,此時點擊「西瓜」二字,等同點擊核取方塊。
五、把欄位分組
- 把幾個欄位合成一個群組
- <fieldset>......</fieldset>
- 群組攔位的標題
- <legend>群組標題</legend>