檢視 HTML/表單的原始碼

[[分類: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 屬性列表如下：
<table class=nicetable>
<tr><th>屬性名</th><th>屬性值</th><th>說明</th></tr>
<tr><td>action</td><td>URL</td><td>表單向何處發送數據</td></tr>
<tr>
<td>enctype</td>
<td>
#application/x-www-form-urlencoded：傳送前編碼所有字元(預設)。
#multipart/form-data：不對字元編碼，用於檔案上傳時。
#text/plain：以純文字形式進行編碼，不含任何控制元件或格式字元。空格轉換為加號，但不對特殊字元編碼。
</td>
<td>發送數據編碼型別</td>
</tr>
<tr><td>method</td><td>post、get</td><td>提交的通道</td></tr>
<tr><td>target</td>
<td>
#_self：回應在同一 frame 打開(預設)
#_blank：回應在新視窗或新分頁中打開
#_parent：回應在父 frame 中打開
#_top：回應在整個視窗中打開
#<i>framename</i>：回應在指定的 iframe 中打開
</td>
<td>伺服器的回應將在何處打開</td>
</tr>
<tr><td>autocomplete</td><td>on、off</td><td>是否啟用自動完成功能，瀏覽器基於之前鍵入過的值，預測對欄位的輸入值。</td></tr>
<tr><td>novalidate</td><td>novalidate</td><td>不對表單輸入值進行驗證</td></tr>
</table>

===form 內部的元素===
共三種：
#input
#select
#textarea

===單行文字表單 input===
====type 屬性====
#text 普通文本框(預設值)
#password 掩碼文本框
#submit 提交按鈕
#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文本框

====其他屬性====
#屬性: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} />

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

===單選鈕===
#設定只可單選的多選一欄位
#*屬性:type
#*<input type='radio' />

===多行文字方塊===
#建立一個可以輸入多行文字的表單欄位
#*<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 />

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

===重設表單欄位內容的按鈕===
#建立一個重設表單欄位的按鈕
#*屬性:type
#*<input type='reset' />