iT邦幫忙

2024 iThome 鐵人賽

DAY 19
0
自我挑戰組

從零開始的HTML系列 第 19

Day 19 HTML的表單製作

  • 分享至 

  • xImage
  •  

回顧之前HTML的內容,表單製作是個相當重要的環節,在許多網頁中都可以見到它的身影。
HTML 中的表單 (Form) 是網頁中用來讓使用者輸入資料的區域,常見於註冊、登入或搜尋等頁面。表單通常由 標籤包裹著一系列的輸入元件,例如文字框、按鈕、下拉選單等,這些元件幫助使用者填寫資訊。當使用者完成填寫並提交表單後,資料會被送到指定的伺服器進行處理。

表單的基本架構包括以下幾個部分:

  1. 標籤:用來接收使用者的輸入,例如文字、密碼、選項等。type 屬性決定了輸入框的類型,比如 text 是單行文字輸入框,password 是密碼輸入框,radio 是單選按鈕等。

  2. 標籤:用來描述各個輸入框的用途,例如「使用者名稱」、「密碼」等。這個標籤能讓網頁更加容易使用,尤其是對於使用輔助工具的人。

  3. <input type="submit">:這些元素生成提交按鈕,當使用者點擊後,表單中的資料就會按照設定送出。

範例:

<form action="/submit_form" method="POST">
  <label for="username">使用者名稱:</label><br>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">密碼:</label><br>
  <input type="password" id="password" name="password"><br><br>
  
  <label for="gender">性別:</label><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br><br>
  
  <input type="submit" value="提交">
</form>

上一篇
Day 18 重置網頁的CSS設定
下一篇
Day 20 HTML的常用標籤
系列文
從零開始的HTML30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言