我們繼續來介紹input的type屬性，這次會介紹表單送出按鈕，和一些其他的特殊元件，那麼就開始吧～
(๑•̀ㅂ•́)و✧

1. <input type="button"> 表單按鈕

通常用來搭配後端程式操作表單的內容。

• 例如：
  <input type="button" value="點我">
  
  -> 結果：
  

2. <input type="submit"> 送出按鈕

當使用者按下送出按鈕，就會提交表單給遠端伺服器，value屬性可以設定按鈕的名稱。

• 例如：
  <input type="submit" value="送出表單">
  
  -> 結果：
  

3. <input type="reset"> 重設按鈕

當讓使用者按下重設按鈕，就可以清除重設表單內容回到初始狀態，value屬性可以設定按鈕的名稱。

• 例如：
  <form action="">
<input type="text" />
<input type="reset" value="重設" />
</form>
  
  -> 結果：
  
  -> 輸入內容
  
  -> 按下重設按鈕，內容會回到初始狀態
  

4. <input type="hidden"> 隱藏資料欄位

用來儲存一些表單資訊、傳送一些值回遠端伺服器，但不想直接顯示在表單上。

• 例如：
  <form action="">
<input type="hidden" name="age" value="50" />
<input type="submit" value="送出表單" />
</form>
  
  -> 結果(隱藏的欄位不會在前端顯示，所以結果只看到一個按鈕，但是當表單送出後，後端可以接收到兩個值)：
  

5. <input type="image"> 圖片送出按鈕

送出按鈕除了文字按鈕，也可以用圖片來當按鈕。

可以搭配這些屬性：

• src：指定圖片的位址
• alt：指定圖片的替代文字
• width：指定圖片顯示的寬度
• height：指定圖片顯示的高度

• 例如：
  <input
type="image"
src="/image/iThome.png"
alt="Submit"
width="120"
height="60"
/>
  
  -> 結果：
  

6. <input type="file"> 檔案上傳

用來讓使用者可以從本機端選擇檔案上傳。

1. 搭配accept屬性可以限制上傳的檔案類型，也可以用逗號分隔開多種類型，可以設定的值有：

• .檔案類型：如 .jpg, .pdf, .doc
• image/*：任何圖檔
• video/*：任何影片檔
• audio/*：任何聲音檔
• 明確指定MIME類型：如 image/jpeg, image/png
• multiple屬性：一次可選擇多個檔案上傳

• 例如：
  <input type="file" accept="image/*,.doc" multiple>
  
  -> 結果：
  
  -> 選擇檔案後，旁邊會顯示檔案名稱
  
  -> 也可一次選擇多個檔案
  

2. 搭配capture屬性，可以用來開啟手機的照相機鏡頭：

• 例如：

<input type="file" capture>

3. 再搭配accept屬性：

• 例如：

拍照上傳

<input type="file" accept="image/*" capture>

拍影片上傳

<input type="file" accept="video/*" capture>

用麥克風錄音上傳

<input type="file" accept="audio/*" capture>

4. 還可以指定要開啟手機的前鏡頭還是後鏡頭，搭配capture屬性：

• user：指定要開啟前鏡頭
• environment：指定要開啟後鏡頭

• 例如：

前鏡頭

<input type="file" accept="video/*" capture="user">

後鏡頭

<input type="file" accept="video/*" capture="environment">

7. <input type="range"> 數字範圍滑動選取

用滑動的方式在一個數字區間內選擇出一個值，可以應用在對數字精準度要求不高的地方，如調整音量大小。

搭配屬性：

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

• 例如：
  <input type="range" min="0" max="100">
  
  -> 結果：
  
  -> 可滑動設定值
  
  

8. <input type="color"> 顏色選擇器

用來挑選顏色，顏色的格式為"#rrggbb"。

• 例如：
  <input type="color" value="#ff0000">
  
  -> 結果：
  
  -> 點按會出現色彩選擇框～
  
  -> 還可以用不同方式選擇顏色～