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

2015年12月26日 (六) 14:26的修訂版本

很多網站都要填寫基本資料，或是留言板，都是用form(表單)構成的網頁。最大的特色就是可以讓使用者輸入資料，或從預先設定的選項中進行選擇，資料送出之後就會送到伺服器資料庫裡。

可使用文字輸入的單行文字方塊

1. 建立一個表單欄位
   • <input>.....</input>
2. 建立一個可輸入單行文字的表單欄位
   • 屬性:type
   • <input type='text' />
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} />

密碼欄位

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

可複選的核取方塊

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='完成' />