iT邦幫忙

2022 iThome 鐵人賽

DAY 5
1
自我挑戰組

商科生初探網頁全端開發系列 第 5

Day5-HTML元素介紹Table、Form。

  • 分享至 

  • xImage
  •  

#Table(表格)
參見下圖說明(圖多)
Ahttps://ithelp.ithome.com.tw/upload/images/20220905/20151031DUIa9keIDy.png

Bhttps://ithelp.ithome.com.tw/upload/images/20220905/20151031Ow88OEi6jE.png

Chttps://ithelp.ithome.com.tw/upload/images/20220905/201510317Cq0SV54SB.png

A:<table>,表示表格數據,包含B:<thead>,表頭 及C:<tbody>,表格內容

Dhttps://ithelp.ithome.com.tw/upload/images/20220905/20151031iTn3VAGdn8.png

Ehttps://ithelp.ithome.com.tw/upload/images/20220905/20151031gcpEPrft4T.png

Fhttps://ithelp.ithome.com.tw/upload/images/20220905/20151031oYZnX3B4fK.png

D:<tr>,定義表格中""的範圍、E:<th>,定義表頭各欄的值、F:<td>,定義一個含數據的表格單元格。


若是想要在表頭中同一性質欄位作分類可以怎麼做?,以下以足球員轉會費金額作解釋。

Ghttps://ithelp.ithome.com.tw/upload/images/20220905/20151031S05kTnPBbt.png

Hhttps://ithelp.ithome.com.tw/upload/images/20220905/201510319tGJVUjnJb.png

Ihttps://ithelp.ithome.com.tw/upload/images/20220905/20151031xthfC0p1Ik.png

G:由於想在轉會費欄位項下區分歐元及英鎊兩種幣值,為保持表格的可視性,先使用屬性rowspan=2,分

別將球員姓名、由、至欄位的行數擴充為2。

H:再使用屬性colspan=2,將轉會費欄位一分為二。

I:後續轉會費即可分別以歐元、英鎊表達。


#Form[表示HTML中的一個區域,主要用於向伺服器提交訊息(Submit)]

參見下圖說明(圖多)

Jhttps://ithelp.ithome.com.tw/upload/images/20220905/201510312fg0vKEj3p.png

Khttps://ithelp.ithome.com.tw/upload/images/20220905/20151031bpT3zgsEV2.png

Lhttps://ithelp.ithome.com.tw/upload/images/20220905/20151031fIPJ0AtjdS.png

Mhttps://ithelp.ithome.com.tw/upload/images/20220905/20151031cOtdBPUXlW.png

J:<form>,目前裡的屬性action=/tacos,僅為示範用途,無實際功能。

K:<label>,用於說明<form>某元素的定義。

L:<input>,用於接受使用者端的各項數據,可使用多種類型,圖中a.type=text為一般字元;b.type=password為密碼形式(以*表示輸入的數據);c.type=color為選擇顏色;d.type=number則為數字。

在這裡可使用多個屬性定義輸入值的限制,比方d.中的數字我設定為最小值1,最大值10000。

M:<button>,a.表達一個可供點擊的按鈕,其樣式後續可用CSS作調整,一般其預設樣式取決於瀏覽器,另外點擊按鈕的動作若無特殊設定,一般是將資料提交到<form>中的action。亦可使用b.<input>形式建立按鈕。c.在<form>區域外建立的按鈕點擊後並不會提交資料(無反應,僅可點擊)

註:Day6預計為HTML的倒數第二天,Day7試作一個簡易報名表單,Day8開始進入CSS。


上一篇
Day4-HTML元素介紹-續
下一篇
Day6-HTML Form-續
系列文
商科生初探網頁全端開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言