iT邦幫忙

2025 iThome 鐵人賽

DAY 23
0
Modern Web

從0到有做出一個商家網頁系列 第 23

Day23:編寫網頁表單的HTML

  • 分享至 

  • xImage
  •  

今天要學習如何編寫網頁表單的HTML

1.<form>~</form>:會傳送在標籤內表單中輸入的值,用<action>屬性設定資料的傳送目的地,以method屬性設定傳送資料的方式

<section>
<h2>RSVP</h2>
<form action="" method="">
<p>選購</p>
</form>
</section>

2.<input>:在type屬性設定輸入欄的種類,在name屬性設定輸入欄的名稱,這個標籤是單獨使用,不需要開始、結束標籤

讓使用者選擇要不要加入

<p>
 <input type="radio" name="attend" value="加入"> 加入
 <input type="radio" name="noattend" value="不加入"> 不加入
</p>

指定選項按鈕的預設狀態:「加入」

<p>
 <input type="radio" name="attend" value="加入" chaecked="checked"> 加入
 <input type="radio" name="noattend" value="不加入"> 不加入
</p>

只要在選項按鈕上用checked屬性設定「checked」,即可設定完成「預設已選取」的狀態

3.name屬性與value屬性的功用
<input>標籤中,name屬性與value屬性可以設定任意值,分別具有以下功能

name屬性
這是用來判斷當程式取得資料時,要輸入在哪一欄的資料,因此必須替輸入欄設定不同名稱,才能讓程式做判斷。
不過如果是「選項按鈕」與「核取方塊」這種包含不同選項的組合,則會故意使用相同名稱,代表這些選項都是同意種問題的答案

value屬性
設定要傳送給程式的資料,如果是type="text"等可以任意輸入的格式,就會直接傳送使用者輸入的資料,所以就不需要再設定value

今天先做到這裡明天接著繼續!


上一篇
Day22:學習編輯「主要區域」與「側邊欄」的CSS語法
下一篇
Day24:繼續學習編寫網頁表單的HTML
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言