iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0

今天將延續昨日的學習內容,繼續介紹標籤和其屬性。

<textarea>標籤

功用是設定多行輸入的文字內容,預設值寫在<textarea></textarea>內。

<select>標籤

功用是設定單選的選項,其選項較多、字數也較多。
以下介紹<select>內放置的標籤:

  • <option>寫入顯示在網頁上的選項

小結

與昨日學習到的知識做比較。

  • <textarea>標籤是設定多行輸入的文字內容,而<input type="text">是設定單行輸入的文字內容。
  • <select>標籤其輸入的選項較多、字數也較多,而<input type="radio">用於選項較少、字數也較少。

接下來介紹關於輸入個資的標籤

  • <input type="password">
    設定輸入密碼後,網頁顯示為密碼符號。
  • <input type="hidden">
    設定輸入後的內容在網頁上不會顯示,其變數的值仍會傳送到後端。

關於輸入的資料類型

  1. <input type="file">
    設定可以上傳檔案到網頁上,需要在<from>標籤屬性中加入enctype="multipart/form-data"。
  2. <input type="email">
    功用是判斷輸入的資料是否符合Email格式。
  3. <input type="number">
    功用是設定輸入的資料為數字類型。
  4. <input type="range">
    功用是利用拖曳的方式選取,要搭配<output>輸出標籤與JavaScript程式才會顯示拖曳的數值。
  5. <input type="color">
    功用是輸入色彩。
  6. <input type="date">
    功用是輸入日期格式,也可以將date改成time、month、week等。

上一篇
Day12 表單標籤(上)
下一篇
Day14 表單實作範例
系列文
新手踏入網頁前端的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言