HTML/表單:修訂版本之間的差異
出自六年制學程
第 56 行: | 第 56 行: | ||
#*virtual代表自動換行,但輸出時還是一行 | #*virtual代表自動換行,但輸出時還是一行 | ||
#*physical代表自動換行,輸出時也是多行 | #*physical代表自動換行,輸出時也是多行 | ||
+ | |||
+ | ===把欄位分組=== | ||
+ | #把幾個欄位合成一個群組 | ||
+ | #*<fieldset>......</fieldset> | ||
+ | #群組攔位的標題 | ||
+ | #*<legend>群組標題</legend> | ||
+ | |||
+ | ===下拉式選單=== | ||
+ | #建立下拉式選單欄位 | ||
+ | #*<select>......</select> | ||
+ | #指定下拉式選單欄位名稱 | ||
+ | #*屬性:name | ||
+ | #*<select name='欄位名稱'>.....</select> | ||
+ | #指定下拉式選單項目內容 | ||
+ | #*屬性:option | ||
+ | #*<option>項目名稱 | ||
+ | #設定下拉式選單項目的代表值 | ||
+ | #*屬性:value | ||
+ | #*<option value='項目代表值'>項目名稱 | ||
+ | #預設選取的項目 | ||
+ | #*屬性:selected | ||
+ | #*<option selected>項目名稱 |
2015年12月25日 (五) 15:39的修訂版本
很多網站都要填寫基本資料,或是留言板,都是用form(表單)構成的網頁。最大的特色就是可以讓使用者輸入資料,或從預先設定的選項中進行選擇,資料送出之後就會送到伺服器資料庫裡。
可使用文字輸入的單行文字方塊
- 建立一個表單欄位
- <input>.....</input>
- 建立一個可輸入單行文字的表單欄位
- 屬性:type
- <input type='text' />
- 指定單行文字表單的欄位名稱
- 屬性: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} />
密碼欄位
- 指定欄位內容為密碼格式
- 屬性:type
- <input type='password' />
可複選的核取方塊
- 設定可供複選的核取方塊欄位
- 屬性: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>項目名稱