網頁

2019/8/17

HTML <form> 表單元素

在HTML網頁可使用表單元素<form>來表示表單。

「表單」是指表單控制(form control)元素所組成的元件。使用者能在表單輸入資料並提交給伺服器進行處理,例如註冊,登入,計算數值,查詢,問卷調查等。

下面是一個簡單的表單範例。

<form>
    <label>
        帳號<input type="text">
    </label>
    <input type="submit">
</form>

上面為一個HTML表單,最外層為<form>...</form>,中間有兩個form control,分別是帳號輸入欄位及提交按鈕。


以下是一些<form>的實際應用範例。

Google搜尋,其實也是一個<form>表單。



Facebook登入,也是<form>表單。



Facebook註冊,也是<form>表單。



總之在網頁中如果有出現可讓使用者填寫資料的輸入欄位及提交按鈕,通常背後的HTML就是<form>表單。

可以使用Chrome瀏覽器的[開發人員工具]來查看目前所在網頁的HTML元素的組成。


<form>元素須有開頭標籤及結尾標籤,也就是<form>...</form>。表單控制(form control)元素放在<form>...</form>之間。


<form>元素有下列屬性:

  • accept-charset:Server端可接收的字元編碼。
  • action:表單提交的URI路徑,例如https://myweb/login
  • autocomplete:表單欄位自動填入。
  • enctype:表單提交的編碼類型
  • method:表單提交至action的URL位置時所使用的HTTP Method。
  • name:表單的名稱。
  • novalidate:boolean屬性,設定提交時忽略表單form controls的驗證動作。
  • target:設定表單提交後頁面的開啟位置,與超聯結元素<a>target屬性用法相同。

參考:

沒有留言:

張貼留言