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' />