搜尋

表單 <form>

<form> 表單元素是 HTML 裡讓使用者輸入資料,並且讓這些資料傳遞到後端伺服器的元素,雖然隨著 JavaScript 框架的興起,很多功能都已經不需要直接使用 <form>,但許多網站仍然會以 <form> 作為表單的核心元素,這篇文章將會介紹 <form> 表單元素的用法。

HTML 教學 - 表單 <form>

認識 <form>

<form> 主要的作用為「建立一個 HTML 表單容器」,因為是表單的容器,裡面會放入各種不同用途的表單元素,才能建構出完整的表單內容。

  • <form> 屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,也因為是容器元素,裡頭可以放入其他的子元素。
  • <form> 的顯示類型為「block 塊級元素」,預設會強制換行。
  • <form> 不可以作為另外一個 <form> 的子元素

例如下方的 HTML 開啟後,在網頁中會放入一個 <form>,當中包含 <textarea><button> 所組成的表單。

<form action="/test.aspx" method="post">
  <textarea cols="20" rows="5" name="content"></textarea>
  <button type="submit">送出</button>
</form>

HTML 教學 - 表單 <form> - 認識 <form>

<form> 支援屬性

<form> 除了支援「全域屬性」以及「可見元素的事件屬性」 ( 參考「HTML 元素屬性」),也會使用下方的專門屬性 ( 通常使用 action、method、target):

屬性 說明
action 目標網址,要將資料發送到的位置。
method 資料傳輸的 HTTP 協議,通常使用 get 或 post。
name 表單名稱,一份 HTML 裡表單名稱不可重複。
target 伺服器處理資料回傳後,顯示資料的位置。
autocomplete 表單欄位是否會自動輸入 ( 在有輸入過的狀態下 ),可設定 on 或 off。
novalidate 傳送資料時不對輸入資料進行驗證。
enctype 設定表單傳送到伺服器的編碼方式。
accept-charset 設定表單文字編碼。

<form> action 屬性

action 的內容是一個「網址」,表示要將輸入的資料發送到的位置,但如果表單內的元素例如 <input><button> 也有設定這個屬性,則以內容元素為主,下方的 HTML 執行後,送出資料後就會將資料傳送到 test.aspx 的網頁去進行處理。

<form action="/test.aspx" method="post">
  ......
</form>

<form> method 屬性

method 的內容是資料傳輸的 HTTP 協議,通常使用 get 或 post,兩者的差異如下:

HTTP 協議 說明
get 將資料放在請求網址的網址參數列 ( URL GET parameters ) 送出,例如 name=oxxo&data=123,因為資料會被放在網址中直接傳出,通常用在資料量較小或非敏感的資料。
post 將資料放在 HTTP 傳輸封包的 body 中送出。通常用在資料量較大或有隱私性考量的資料。

下方的 HTML 執行後,會使用 post 的協議,將資料傳送到 test.aspx 的網頁去進行處理。

<form action="/test.aspx" method="post">
  ......
</form>

<form> name 屬性

name 的內容是表單名稱,在一份 HTML 裡如果有多個表單元素,每個表單的名稱不可重複。

<form action="/test1.aspx" method="post" name="f1">
  ......
</form>

<form action="/test2.aspx" method="post" name="f2">
  ......
</form>

<form> target 屬性

target 的內容是伺服器處理資料回傳後,顯示資料的位置,功能和超連結 <a> 的 target 屬性完全相同。

說明
_self 表單所在視窗。
_blank 新頁籤或新視窗。
_parent 上一層視窗 ( 如果表單放在 <iframe> 中 )。
_top 最頂層視窗。

下方的 HTML 執行後,點擊按鈕,就會向 test.aspx 使用 get 的傳輸協定發送資料,伺服器收到資料回傳後,會開新視窗顯示結果。

<form action="/test.aspx" method="get" target="_blank">
  <input name="user">
  <button type="submit">送出</button>
</form>

<form> autocomplete 屬性

autocomplete 的內容是表單欄位是否會自動輸入 ( 有輸入過、瀏覽器該功能有開啟的狀態下 ),預設為 on 可設定 off,但如果表單內的元素例如 <input> 也有設定這個屬性,則以內容元素為主。

<form> novalidate 屬性

如果有設定 novalidate 屬性 ( 有該屬性就是不驗證,沒有該屬性就是要驗證 ),可以設定傳送資料時,不要針對輸入資料進行驗證,例如下方的 HTML 執行後,如果沒有設定 novalidate 屬性,因為 <input> 的 type 屬性為 email,當輸入的內容不是 email 時,就會出現警告訊息。

<form action="/test.aspx" method="post" target="_blank">
  <input name="email" type="email">
  <button type="submit">送出</button>
</form>

HTML 教學 - 表單 <form> - novalidate 屬性

如果有設定 novalidate 屬性,就可以直接送出。

<form action="/test.aspx" method="post" target="_blank" novalidate>
  <input name="email" type="email">
  <button type="submit">送出</button>
</form>

<form> enctype 屬性

enctype 的內容是設定表單傳送到伺服器的編碼方式,編碼方式有下列三種選項:

編碼方式 說明
application/x-www-form-urlencoded 預設選項。
multipart/form-data 如果有附加檔案。
text/plain 純文字。

<form> accept-charset 屬性

accept-charset 的內容是設定表單文字編碼,可以設定 UTF-8、ASCII 或 ISO-8859-1。

<form> 預設樣式

下方列出 <form> 的預設樣式:

詳細樣式教學可參考:CSS 教學

form {
  display: block;
  margin-top: 0em;
}

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

彈出視窗

alert() 警告視窗 confirm() 確認視窗 prompt() 輸入視窗

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片 嵌入 Canva 簡報 嵌入 Scratch 創作