今天我們繼續來介紹input的type屬性吧～
(๑•̀ㅂ•́)و✧

1. <input type="search"> 搜尋

搜尋的文字輸入框，和type="text"的差別在語意上更明確，預設樣式是輸入內容的時候，框框右邊會自動出現一個小叉叉，點選可以清除輸入的內容，有些瀏覽器可能有不同的樣式。

• 例如：
  <input type="search">
  
  -> 結果(輸入內容時，右邊會出現小叉叉)：
  
  -> 點按可清除輸入的內容，再重新輸入
  

2. <input type="tel"> 輸入電話號碼

和type="text"的差別在語意上更明確，而且特別的地方是，在手機上會出現輸入電話號碼的鍵盤。

• 例如：

<input type="tel">

3. <input type="url"> 輸入網址

和type="text"的差別在語意上更明確，而且在送出表單之前，有些有支援的瀏覽器會自動檢驗輸入的內容是不是合法的URL。

• 例如：

<input type="url">

4. <input type="email"> 輸入電子郵件

和type="text"的差別在語意上更明確，而且在送出表單之前，有些有支援的瀏覽器會自動檢驗輸入的內容是不是合法的email。

• 例如：

<input type="email">

multiple屬性用來定義此欄位可以用逗號分開輸入多組email：

• 例如：

<input type="email" multiple>

5. <input type="date"> 輸入日期

用來建立一個輸入日期的欄位，日期的格式為"yyyy-mm-dd"。

可以搭配這些屬性：

• max：可以輸入的最晚日期
• min：可以輸入的最早日期
• step：設定一個數字，用來控制日期元件一次跳動的間隔，而且在送出表單之前，瀏覽器會對日期欄位做檢驗，日期需要符合step設定的跳動區間

• 例如：
  <input
type="date"
value="2022-09-17"
min="2022-01-01"
max="2022-12-31"
step="5"
/>
  
  -> 結果(預設出現日期格式的框框)：
  
  -> 點選右邊的日曆符號，會出現可選擇日期的框框，如果有設定step間隔，那麼就只能選擇間隔的日期(黑色字可選，灰色字就不能選)
  

6. <input type="time"> 輸入時間

用來建立一個輸入時間的欄位，時間的格式為24小時制的"hh:mm"。

可以搭配這些屬性：

• max：可以輸入的最晚時間
• min：可以輸入的最早時間
• step：設定一個數字，用來控制時間元件一次跳動的間隔，而且在送出表單之前，瀏覽器會對時間欄位做檢驗，時間需要符合step設定的跳動區間

• 例如：
  <input type="time" value="12:00" min="06:00" max="22:00">
  
  -> 結果(預設出現時間格式的框框)：
  
  -> 點選右邊的時鐘符號，會出現可選擇時間的框框
  

7. <input type="number"> 輸入數字

只允許輸入數字。

可以搭配這些屬性：

• max：可以輸入的最大值
• min：可以輸入的最小值
• step：設定一個數字，用來控制數字元件一次跳動的間隔，而且在送出表單之前，瀏覽器會對數字欄位做檢驗，數字需要符合step設定的跳動區間

• 例如：
  <input type="number" step="10" min="0" max="1000" />
  
  -> 結果(預設出現可上下調動間隔的格式框框)：
  
  -> 如果設定step間隔是10，那麼按一次上或下箭頭就會跳10
  

• number欄位預設只能輸入整數，如果想要輸入小數點需要調整step的屬性值，例如設定step="0.1"表示能輸入到小數點第一位，step="0.01"表示能輸入到小數點第二位，而step="any"則是用來表示可以輸入任何數字。