1. 程式人生 > 其它 >html表單的應用(除input元素及屬性)

html表單的應用(除input元素及屬性)

建立表單

在html5中<form></form>標記被用於定義表單域,即建立一個表單 以實現使用者資訊收集和傳遞

建立表單的基本語句格式如下

<form action="url地址" method="提交方式" name="表單名稱">
    各種表單控制元件
</form>

  

  

表單屬性

1.action 該屬性用於指定接收並處理資料的伺服器的url地址

<form action="url地址" >
    各種表單控制元件
</form>

  action的屬性值可以是相對路徑還可以是接受資料的E-mail郵箱地址

2.method屬性

設定資料的提交方式 其取值為get或post 可以通過form標記的method屬性指明表單處理伺服器處理資料的方式

<form action="url地址" method="get/post" 
    各種表單控制元件
</form>

  採用get方法 瀏覽器會與表單處理伺服器建立連結 然後在一個傳輸步驟中傳送所有表單資料 提交的資料將會在出現在位址列裡

 採用post方法瀏覽器會採用兩步進行操作 1.瀏覽器與action屬性中指定的表單表單處理器建立聯絡 2.瀏覽器分段傳輸資料給伺服器 無資料量的限制

3.name屬性

用於指定表單的名稱 以區分同一個網頁中的多個表單

4.autocomplete屬性

用於指定表單是否有自動完成功能即輸入的內容是否記錄下來

其屬性值有 on 有該功能 off 無該功能

<form action="url地址" method="get/post autocomplete="on/off" 
    各種表單控制元件
</form>

5.novalidate屬性

該屬性是在提交表單時取消對於表單資料的有效的檢查 為表單設定該資料時 可以關閉整個表單的驗證

true代表不進行檢查

<form action="url地址" method="get/post" novalidate="true">
    各種表單控制元件
</form>

  

其他表單元素

1.textarea元素

在input控制元件中輸入大量資料時單行輸入框將不再適用 textarea為解決辦法

<textarea name="" id="" cols="每行中的字元數" rows="顯示的行數"></textarea>

  cols與rows的取值都為整數此為必選項

可選項 name 自定義 控制元件的名稱

     readonly readonly 該控制元件內容為只讀

     disabled disabled 第一次載入頁面時禁用該外掛 顯示為灰色

2.select元素

用於製作下拉選單

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

  將option巢狀在select之間option中的內容為下拉框中顯示的內容 每對select中至少含有一對option元素

  select 屬性的定義 size 下拉選單中可見的選項數 multiple 按住Ctrl可以進行多選

  option也可以進行樣式定義 selected 即當前選項為預設選項

  也可以使用optgroup元素進行分組必須要用 label命名組名

3.datelist 元素

用於使用者如果不想在已經存在的選項中選擇也可以自己輸入 並且給輸入的內容賦值id

4.keygen元素

用於表單的金鑰生成

autofocus 使keygen欄位在頁面載入時獲得焦點

challenge 在keygen的值設定限定相對應的時間

disabled 禁用keygen

form 所屬的一個或多個表單

keytype 定義keygen rse生成RSA金鑰

name 定義名稱 在提交表單時蒐集欄位的值

5.output元素

用於不同屬性的輸出 在瀏覽器中顯示計算結果或指令碼輸出

for 定義輸出域相關的一個或多個元素

form 定義輸入欄位所屬的一個或多個表單

name 定義物件的唯一名稱