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

出自六年制學程
跳轉到: 導覽搜尋
第 35 行: 第 35 行:
 
#*屬性:value
 
#*屬性:value
 
#*<input type='checkbox' 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代表自動換行,輸出時也是多行

2015年12月25日 (五) 15:24的修訂版本

很多網站都要填寫基本資料,或是留言板,都是用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代表自動換行,輸出時也是多行