iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0
自我挑戰組

網頁前端設計系列 第 14

Day14-HTML(十二):表單-form

  • 分享至 

  • xImage
  •  

這次要來介紹表單,在日常生活中常常會看到不同型式的網路表單,例如連絡表單、活動報名表、會員註冊、登入、購物車等,甚至是社群媒體上分享貼文或回應文章,幾乎都是網頁表單的應用。那麼就開始吧~
(๑•̀ㅂ•́)و✧

<form> 表單

用來建立一個HTML表單,讓使用者輸入資料,而這些資料可以用來和使用者互動。<form>為表單的容器,裡面包含了許多其他不同用途的標籤。

重要的屬性有:

1. action:用來指定一個URL位址,告訴瀏覽器當使用者按下送出表單按鈕後,要將表單的內容送去哪裡,也就是傳送的目的地。

2. method:用來指定資料傳輸時的HTTP協定,最常用的是getpost

  • get:將表單的資料放在form action的URL網址參數上面送出。因為很容易被直接看到資料,所以get通常用在資料量較小或非敏感的資料上。
  • post:將表單的資料放在HTTP傳輸封包的body中送出。post通常用在資料量比較大、有附帶檔案上傳或有隱私性的資料。

3. target:用來指定瀏覽器要在哪裡顯示表單送出後回應的結果。

  • _self:在表單當前視窗顯示,是預設值。
  • _blank:在新視窗顯示。
  • _parent:在上一層父視窗顯示。
  • _top:在最頂層父視窗顯示。

4. autocomplete:指定表單中的欄位是否啟用瀏覽器自動完成的機制。

  • on:是,預設值。
  • off:否。

例如:

<form action="/formprocess.php" method="post">
</form>
  • 意思是建立一個表單,宣告這個表單的資料會用http post的方式送到"/formprocess.php"這隻遠端程式處理。

上一篇
Day13-HTML(十一):表格(下)
下一篇
Day15-HTML(十三):表單-input
系列文
網頁前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言