HTML/表單
出自六年制學程
很多網站都要填寫基本資料,或是留言板,都是用form(表單)構成的網頁。最大的特色就是可以讓使用者輸入資料,或從預先設定的選項中進行選擇,資料送出之後就會送到伺服器資料庫裡。
目錄
form 的屬性
必要屬性為 action 和 method ,如:<form action=r.php method='post、get'>
- action=程式的位置。程式的路徑可以省略,瀏覽器會把此表單交給提供這個表單的主機。所以我們可以建立一個提交給其他主機的表單,但這樣子做在大部分的瀏覽器會得到警告訊息。
- <form action=程式的位置>
- method=get 或 post。優先用post,不經URL傳遞,不限傳遞資料的長度。get是預設值,將表單資料附在實際程式的URL之後,URL可能太長,超過系統允許的長度,而被截短導致錯誤。
HTML5 完整的 form 屬性列表如下:
屬性名 | 屬性值 | 說明 |
---|---|---|
action | URL | 表單向何處發送數據 |
enctype |
|
發送數據編碼型別 |
method | post、get | 提交的通道 |
target |
|
伺服器的回應將在何處打開 |
autocomplete | on、off | 是否啟用自動完成功能,瀏覽器基於之前鍵入過的值,預測對欄位的輸入值。 |
novalidate | novalidate | 不對表單輸入值進行驗證 |
form 內部的元素
共三種:
- input
- select
- textarea
單行文字表單 input
type 屬性
- text 普通文本框(預設值)
- password 掩碼文本框
- submit 提交按鈕,送出表單資料。可同時後送 name 與 value ,按鈕上顯示 value 屬性的設定值。
- <input type='submit' name='欄位名稱' value='完成' />
- button 普通按鈕
- reset 重置按鈕,重設表單欄位內容
- radio 單選按鈕,一組單選按鈕必須是定義相同的 name 值
- checkbox 複選按鈕,一次可以選擇多個,一組複選按鈕必須是定義相同的 name 值。
- <input type='checkbox' checked />預設該項目被核取
- file 檔案上傳文本框
- hidden 隱藏欄,會被提交
- image 圖片按鈕,需配合src屬性使用
- color 顏色按鈕
- date 日期欄位,帶有calender控制項
- datetime
- datetime-local 日期欄位,time欄位,帶有calender控制項
- week 周,帶有calender控制項
- time 時、分、秒 帶有time控制項
- email 郵件地址
- number 數字輸入文本框
- range s數字輸入文本框,範圍
- tel 電話號碼文本框
- 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>
- 指定多行文字方塊的輸入區列數
- 屬性:rows
- <textarea rows=列數 />
- 指定多行文字方塊的輸入區行數
- 屬性:cols
- <textarea rows=列數 cols=行數/>
- 指定欄位中所輸入文字是否換行
- 屬性:wrap
- <textarea wrap={off,virtual,physical} />
- off代表關閉自動換行功能
- virtual代表自動換行,但輸出時還是一行
- physical代表自動換行,輸出時也是多行
把欄位分組
- 把幾個欄位合成一個群組
- <fieldset>......</fieldset>
- 群組攔位的標題
- <legend>群組標題</legend>
下拉式選單
- 建立下拉式選單欄位
- <select>......</select>
- 指定下拉式選單欄位名稱
- 屬性:name
- <select name='欄位名稱'>.....</select>
- 指定下拉式選單項目內容
- 屬性:option
- <option>項目名稱
- 設定下拉式選單項目的代表值
- 屬性:value
- <option value='項目代表值'>項目名稱
- 預設選取的項目
- 屬性:selected
- <option selected>項目名稱
多選項的清單方塊
- 指定清單方塊中顯示的項目數量
- 屬性
- <select size=清單方塊大小 />
- 指定該清單為可複選
- 屬性:multiple
- <select size=清單方塊大小 multiple />