iT邦幫忙

2025 iThome 鐵人賽

DAY 7
0

為什麼要使用HTML表單?因為要來收集使用者輸入資料,可以和Javascript和Asp來和使用者互動~
一個表單會有<form>...</form>標籤包起來,再配合表單原件來做使用

form屬性

action :指定表單送出後資料要送去哪個網址
method :指定表單送出資料的方式,常見的有GET和POST兩種
GET和POST有什麼差別?
GET:主要設計是取得資料所以網址會變得很長,且包含所有傳送的資料安全性較差
POST:主要設計是傳遞資料且只顯示目標路徑,隱藏了傳送的具體內容所以安全性較好
name :表單名稱,一份 HTML 裡表單名稱不可重複

常用的表單原件有哪些?

1.密碼方塊

<input type="password" id="password" name="password" required>

https://ithelp.ithome.com.tw/upload/images/20250916/201787565cEgOuSI7t.png

2.下拉式清單方塊

 <label for="city">選擇居住城市:</label>
      <select id="city" name="city">
         <option value="Taipei">台北</option>
         <option value="Taichung">台中</option>
         <option value="Kaohsiung" selected>高雄</option>
      </select>

https://ithelp.ithome.com.tw/upload/images/20250916/20178756M15OzqSTKA.png

3.核取方塊

一個框框讓你點~

<input type="checkbox" id="agree" name="agree" value="yes" required>
<label for="agree">我同意會員條款</label>

https://ithelp.ithome.com.tw/upload/images/20250916/20178756K3Uzc9kt4J.png

4.按鈕

一個按鈕

<button type="submit">註冊</button>

https://ithelp.ithome.com.tw/upload/images/20250916/201787562IAtHPi5Xl.png

5.文字輸入框

最常用的輸入框,可以用來輸入姓名

<label for="username">使用者名稱:</label>
<input type="text" id="username" name="username">

https://ithelp.ithome.com.tw/upload/images/20250917/20178756ut2nLieVdX.png


上一篇
DAY06 - HTML表格
下一篇
Day - 08 HTML圖片和超連結
系列文
從骨架到靈魂:網頁構成三部曲8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言