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

出自六年制學程
跳轉到: 導覽搜尋
form 的屬性
 
(未顯示2位用戶所作出之89次版本)
第 1 行: 第 1 行:
 
[[分類:HTML]]
 
[[分類:HTML]]
用form(表單)開始、結束。form用來通知後端伺服器。很多網站要填寫基本資料的表單就用這個。
+
很多網站都要填寫基本資料,或是留言板,都是用form(表單)構成的網頁。最大的特色就是可以讓使用者輸入資料,或從預先設定的選項中進行選擇,資料送出之後就會送到伺服器資料庫裡。
*input 包含開始、結束
+
 
*文字框
+
[http://jendo.org/study/testForm.html 本頁的測試實作程式]<br/>
**文字框:<input type=text />
+
[http://jendo.org/study/testForm.html 及其響應程式]
*選項
+
===form 的屬性===
**選項:<input type=radio />
+
必要屬性為 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,&lt;input type='file' /&gt;
 +
#屬性: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);'」使其不顯示,再以&lt;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;'&gt;選檔&lt;/label&gt;來仿做按鈕。
 +
 
 +
====可複選的核取方塊補充說明====
 +
#設定可供複選的核取方塊欄位
 +
#*屬性: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 標籤,將項目分為兩組
 +
<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'>

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

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

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

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>