輸入 input

提供表單輸入介面，透過屬性表示不同用途

文字

<input type="text" name="account">

type="text" 表示文字類型

name="account" 表示送出時，欄位名稱為 account

密碼

<input type="password" name="pwd">

type="password" 表示密碼類型

該類型會將輸入的內容使用 * 來表示，無法看到真實的內容

密碼類型使用 * 表示內容，感覺很安全，真的嗎？

demo

數字

<input type="number" name="money">

type="number" 代表數字類型

e 為數學符號，可以輸入是正常的

電話

<input type="tel" name="phone">

type="tel" 代表電話類型

手機介面時，只會出現單純數字鍵

顏色

<input type="color" name="bg-color">

type="color" 代表顏色類型

不同瀏覽器顯示的介面會有所不同

日期

<input type="date" name="schedule-date">

type="date" 代表日期類型

不同瀏覽器顯示的介面會有所不同

時間

<input type="time" name="schedule-time">

type="time" 代表日期類型

不同瀏覽器顯示的介面會有所不同

提交

<input type="submit">

type="submit" 代表提交類型

該類型外觀會長得跟按鈕一樣，預設文字為『提交』

建議使用 <button type="submit">提交</button> 來表示更為適合

form demo

檔案

<input type="file" name="my-pic">

type="file" 代表檔案類型

該類型外觀由各瀏覽器定義，提供選取本地檔案功能

如要上傳檔案，form 須滿足一定條件

form 須設定屬性 enctype="multipart/form-data"
form 必須為 POST 方法

測試 API: https://book.niceinfos.com/frontend/assets/html_file_upload/response.php

demo

單選

<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="female" /> 女

demo

使用 name 屬性為分類群組

<input type="radio" name="male" value="male" /> 男
<input type="radio" name="female" value="female" /> 女

demo

多選

<input type="checkbox" name="music" value="a1" /> A1
<input type="checkbox" name="music" value="a2" /> A2
<input type="checkbox" name="music" value="a3" /> A3

demo

提交後發現，music 只有一個數值，但是我明明勾選兩個以上

使用『陣列』([])儲存多數值

<input type="checkbox" name="music[]" value="a1" /> A1
<input type="checkbox" name="music[]" value="a2" /> A2
<input type="checkbox" name="music[]" value="a3" /> A3

demo

前端開發