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

出自六年制學程
跳轉到： 導覽、 搜尋
（→‎form屬性）
（→‎可使用文字輸入的單行文字方塊）
第 41 行： 第 41 行：
 
#textarea
 
#textarea
  
−
===可使用文字輸入的單行文字方塊===
+
===單行文字表單 input===
−
#建立一個表單欄位
+
====type 屬性====
−
#*<input>.....</input>
+
#text 普通文本框(預設值)
−
#建立一個可輸入單行文字的表單欄位
+
#password 掩碼文本框
−
#*屬性:type
+
#submit 提交按鈕
−
#*<input type='text' />
+
#button 普通按鈕
−
#指定單行文字表單的欄位名稱
+
#reset 重置按鈕
−
#*屬性:name
+
#radio 單選按鈕，一組單選按鈕必須是定義相同的 name 值
−
#*<input type='text' name='欄位名稱' />
+
#checkbox 複選按鈕，一次可以選擇多個，一組複選按鈕必須是定義相同的 name 值，方便取值
−
#指定單行文字方塊欄位可輸入的文字數
+
#file 文件上傳文本框
−
#*屬性:maxlength
+
#hidden 隱藏欄，會被提交
−
#*<input type='text' name='欄位名稱' maxlength=12 /> (值設定12則可輸入字元數就是12)
+
#image 圖片按鈕，需配合src屬性使用
−
#指定單行文字表單的欄位寬度
+
#color 顏色按鈕
−
#*屬性:size
+
#date 日期欄位，帶有calender控制項
−
#*<input type='text' name='欄位名稱' maxlength=12 size=欄位的字元寬度 />  
+
#datetime
−
#設定欄位唯讀模式
+
#datetime-local 日期欄位，time欄位，帶有calender控制項
−
#*屬性:readonly
+
#week 周，帶有calender控制項
−
#*<input type='text' name='欄位名稱' maxlength=12 size=欄位的字元寬度 readonly={true,false} />
+
#time 時、分、秒 帶有time控制項
 +
#email 郵件地址
 +
#number 數字輸入文本框
 +
#range s數字輸入文本框，範圍
 +
#tel 電話號碼文本框
 +
#url url文本框
 +
 
 +
====其他屬性====
 +
#屬性: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} />
  
 
===密碼欄位===
 
===密碼欄位===

2022年1月5日 (三) 22:42的修訂版本

很多網站都要填寫基本資料，或是留言板，都是用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 屬性列表如下：

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

form 內部的元素

共三種：

  1. input
  2. select
  3. textarea

單行文字表單 input

type 屬性

  1. text 普通文本框(預設值)
  2. password 掩碼文本框
  3. submit 提交按鈕
  4. button 普通按鈕
  5. reset 重置按鈕
  6. radio 單選按鈕，一組單選按鈕必須是定義相同的 name 值
  7. checkbox 複選按鈕，一次可以選擇多個，一組複選按鈕必須是定義相同的 name 值，方便取值
  8. file 文件上傳文本框
  9. hidden 隱藏欄，會被提交
  10. image 圖片按鈕，需配合src屬性使用
  11. color 顏色按鈕
  12. date 日期欄位，帶有calender控制項
  13. datetime
  14. datetime-local 日期欄位，time欄位，帶有calender控制項
  15. week 周，帶有calender控制項
  16. time 時、分、秒 帶有time控制項
  17. email 郵件地址
  18. number 數字輸入文本框
  19. range s數字輸入文本框，範圍
  20. tel 電話號碼文本框
  21. url url文本框

其他屬性

  1. 屬性:name，指定欄位名稱
    <input type='text' name='欄位名稱' />
  2. 屬性:maxlength，指定欄位可輸入的文字數
    <input type='text' name='欄位名稱' maxlength=12 /> (值設定12則可輸入字元數就是12)
  3. 屬性:size，指定欄位寬度
    <input type='text' name='欄位名稱' maxlength=12 size=欄位的字元寬度 />
  4. 屬性:readonly，設定欄位唯讀模式
    • <input type='text' name='欄位名稱' maxlength=12 size=欄位的字元寬度 readonly={true,false} />

密碼欄位

  1. 指定欄位內容為密碼格式
    • 屬性:type
    • <input type='password' />

上傳欄位

※以 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='欄位值' />

單選鈕

  1. 設定只可單選的多選一欄位
    • 屬性:type
    • <input type='radio' />

多行文字方塊

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

把欄位分組

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

下拉式選單

  1. 建立下拉式選單欄位
    • <select>......</select>
  2. 指定下拉式選單欄位名稱
    • 屬性:name
    • <select name='欄位名稱'>.....</select>
  3. 指定下拉式選單項目內容
    • 屬性:option
    • <option>項目名稱
  4. 設定下拉式選單項目的代表值
    • 屬性:value
    • <option value='項目代表值'>項目名稱
  5. 預設選取的項目
    • 屬性:selected
    • <option selected>項目名稱

多選項的清單方塊

  1. 指定清單方塊中顯示的項目數量
    • 屬性
    • <select size=清單方塊大小 />
  2. 指定該清單為可複選
    • 屬性:multiple
    • <select size=清單方塊大小 multiple />

送出表單資料的按鈕

  1. 建立一個送出表單欄位內容的按鈕
    • 屬性:type
    • <input type='submit' />
  2. 指定按鈕欄位的名稱
    • 屬性:name
    • <input type='submit' name='欄位名稱' />
  3. 設定按鈕上顯示的文字
    • 屬性:value
    • <input type='submit' name='欄位名稱' value='完成' />

重設表單欄位內容的按鈕

  1. 建立一個重設表單欄位的按鈕
    • 屬性:type
    • <input type='reset' />
取自「http://well-being-ng.net/wiki1231/index.php?title=HTML/表單&oldid=56557」