HTML <input> 元素用法
此篇是在說明 input 用法，由那些組合可以使用
INPUT 組合
下表是說明 input 元素輸入類型有那些
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
各類型使用方式
text 本文
<input type="text"> 定義了一個 單行本文輸入字段
<p>請輸入文字</p>
<input type="text" id="text" name="text">
- 顯示結果
請輸入文字
password 密碼
<input type="password"> 定義了一個密碼字段
<p>請輸入密碼</p>
<input type="password" id="password" name="password">
- 顯示結果
請輸入密碼
在密碼字段中的字符被掩碼（顯示為星號或圓圈）
submit 提交
<input type="submit"> 定義了一個按鈕 提交表單數據以表格處理程序。
的形式處理程序通常是具有用於處理輸入數據的腳本服務器頁面。
表單處理程序是在窗體的指定action 屬性：
<form action="#">
<p>請輸入密碼</p>
<input type="password" id="password" name="password">
<input type="submit" value="送出">
</form>
- 顯示結果
reset 重置
<input type="reset"> 定義了一個復位按鈕 ，將所有表單值重置為默認值
<form action="#">
<p>請輸入密碼</p>
<input type="password" id="password" name="password">
<input type="submit" value="送出">
<input type="reset" value="重置">
</form>
- 顯示結果
如果更改輸入值，然後單擊“重置”按鈕，表格數據將被重置為默認值。
radio 單選
<input type="radio"> 定義了一個單選按鈕
<form action="#">
<p>男生</p>
<input type="radio" id="male" name="gender" value="male">
<p>女生生</p>
<input type="radio" id="female" name="gender" value="female">
</form>
- 顯示結果
checkbox 複選
<input type="checkbox"> 定義了一個複選
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">看書</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">蛋糕</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3">開水</label>
</form>
- 顯示結果
button 按鍵
<input type="button" onclick="alert('Hello World!')" value="按我">
- 顯示結果
color 顏色選擇
<input type="color"> 用於應該包含顏色的輸入字段。
根據瀏覽器的支持，顏色選擇器可以在輸入字段中顯示的。
<form>
<label for="favcolor">選擇您想要的顏色</label>
<input type="color" id="favcolor" name="favcolor">
</form>
- 顯示結果
date 日期選擇
<input type="date"> 用於應該包含日期輸入字段。
根據瀏覽器的支持，日期選擇器可以在輸入字段中顯示的。
<form>
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">
</form>
- 顯示結果
- 您也可以使用
min和max屬性來限制添加日期：
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31">
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
- 顯示結果
DateTime 日期時間
<input type="datetime-local"> 指定的日期和時間輸入欄，沒有時區。
根據瀏覽器的支持，日期選擇器可以在輸入字段中顯示的。
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
- 顯示結果
email 電子郵件
<input type="email"> 用於應該包含一個E-mail地址輸入字段。
根據瀏覽器支持，電子郵件地址，可以自動提交時驗證。
一些智能手機識別出郵件類型，並添加“.COM”的鍵盤相匹配的電子郵件的輸入。
<form>
<label for="email">輸入您的電子郵件</label>
<input type="email" id="email" name="email">
</form>
- 顯示結果
file 檔案上傳
<input type="file"> 定義文件選擇字段和文件上傳一個“瀏覽”按鈕
<form>
<label for="myfile">請選擇要上傳檔</label>
<input type="file" id="myfile" name="myfile">
</form>
- 顯示結果
month 月份
<input type="month"> 允許用戶選擇年份和月份。
根據瀏覽器的支持，日期選擇器可以在輸入字段中顯示的。
<form>
<label for="bdaymonth">選擇 (年和月):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
- 顯示結果
number 數字
<input type="number"> 定義了一個 數字輸入字段。
您還可以設置什麼號碼被接受的限制。
下面的例子顯示一個數字輸入字段，在這裡可以為1至5輸入一個值：
<form>
<label for="quantity">輸入值 (限 1 到 5 之間):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
- 顯示結果
輸入限制
下面是一些常見的輸入限制列表：
| 屬性 | 說明 |
|---|---|
| checked | 指定在頁面加載時應預先選擇輸入字段（對於type =“ checkbox”或type =“ radio”） |
| disabled | 指定應禁用輸入字段 |
| max | 指定輸入字段的最大值 |
| maxlength | 指定輸入字段的最大字符數 |
| min | 指定輸入字段的最小值 |
| pattern | 指定用於檢查輸入值的正則表達式 |
| readonly | 指定輸入字段為只讀（無法更改） |
| required | 指定輸入字段為必填字段（必須填寫） |
| size | 指定輸入字段的寬度（以字符為單位） |
| step | 指定輸入字段的合法編號間隔 |
| value | 指定輸入字段的默認值 |
您將了解更多關於在下一章中輸入的限制。
下面的例子顯示一個數字輸入字段，可在其中輸入一個值從0到100，以10步的默認值是30：
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
- 顯示結果
range 範圍
<input type="range"> 限定用於輸入數字，其確切值（像滑塊控制）並不重要的控制。默認範圍是0到100。但是，您可以設置被接受什麼數字與限制 min ， max 以及 step 屬性：
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
- 顯示結果
search 搜索
<input type="search"> 於搜索字段（搜索字段的行為像一個普通的文本字段）
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
- 顯示結果
tel 電話
<input type="tel"> 用於應該包含電話號碼輸入字段
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
- 顯示結果
time 時間
<input type="tel"> 允許用戶選擇時間（無時區）。
根據瀏覽器的支持，一時間選擇器可以在輸入字段中顯示的。
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
- 顯示結果
url 連接
<input type="url"> 用於應該包含URL地址的輸入域。
根據瀏覽器支持，URL字段可以自動提交時驗證。
一些智能手機識別URL類型，並增加了“.COM”的鍵盤相匹配的網址輸入。
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
- 顯示結果
week 週
<input type="week"> 允許用戶選擇一個星期的一年。
根據瀏覽器的支持，日期選擇器可以在輸入字段中顯示的。
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
- 顯示結果