HTML 輸入型別
本章介紹 HTML <input> 元素的不同型別。
HTML 輸入型別
以下是您可以在 HTML 中使用的不同輸入型別
<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">
提示： type 屬性的預設值是 "text"。
輸入型別文字
<input type="text"> 定義一個單行文字輸入欄位
示例
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname">
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
姓姓氏
輸入型別密碼
<input type="password"> 定義一個密碼欄位
示例
<form>
<label for="username">使用者名稱:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">密碼:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
使用者名稱密碼
密碼欄位中的字元會被遮蓋（顯示為星號或圓點）。
輸入型別提交
<input type="submit"> 定義一個用於將表單資料提交到表單處理程式的按鈕。
表單處理程式通常是一個帶有處理輸入資料指令碼的伺服器頁面。
表單處理程式在表單的 action 屬性中指定
示例
<form action="/action_page.php">
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
如果您省略提交按鈕的 value 屬性，該按鈕將獲得一個預設文字
示例
<form action="/action_page.php">
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
自己動手試一試 »
輸入型別重置
<input type="reset"> 定義一個重置按鈕，該按鈕將所有表單值重置為預設值
示例
<form action="/action_page.php">
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
如果您更改輸入值，然後點選“重置”按鈕，表單資料將被重置為預設值。
輸入型別單選
<input type="radio"> 定義一個單選按鈕。
單選按鈕允許使用者在有限數量的選項中僅選擇一個
示例
<p>選擇您最喜歡的 Web 語言:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
輸入型別複選框
<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>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
輸入型別按鈕
<input type="button"> 定義一個按鈕
以上 HTML 程式碼在瀏覽器中的顯示效果如下
輸入型別顏色
<input type="color"> 用於應包含顏色的輸入欄位。
根據瀏覽器支援情況，輸入欄位中可能會出現一個顏色選擇器。
示例
<form>
<label for="favcolor">選擇您喜歡的顏色:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
自己動手試一試 »
輸入型別日期
<input type="date"> 用於應包含日期的輸入欄位。
根據瀏覽器支援情況，輸入欄位中可能會出現一個日期選擇器。
示例
<form>
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">
</form>
自己動手試一試 »
您還可以使用 min 和 max 屬性來限制日期
示例
<form>
<label for="datemax">輸入 1980-01-01 之前的日期:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">輸入 2000-01-01 之後的日期:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
自己動手試一試 »
輸入型別 datetime-local
<input type="datetime-local"> 指定一個日期和時間輸入欄位，不含時區。
根據瀏覽器支援情況，輸入欄位中可能會出現一個日期選擇器。
示例
<form>
<label for="birthdaytime">生日 (日期和時間):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
自己動手試一試 »
輸入型別 Email
<input type="email"> 用於應包含電子郵件地址的輸入欄位。
根據瀏覽器支援情況，提交時電子郵件地址可以自動驗證。
某些智慧手機會識別電子郵件型別，並在鍵盤上新增“.com”以匹配電子郵件輸入。
示例
<form>
<label for="email">輸入您的電子郵件:</label>
<input type="email" id="email" name="email">
</form>
自己動手試一試 »
輸入型別 Image
<input type="image"> 定義一個影像作為提交按鈕。
影像的路徑在 src 屬性中指定。
輸入型別檔案
<input type="file"> 定義一個檔案選擇欄位和一個用於檔案上傳的“瀏覽”按鈕。
示例
<form>
<label for="myfile">選擇一個檔案:</label>
<input type="file" id="myfile" name="myfile">
</form>
自己動手試一試 »
輸入型別隱藏
<input type="hidden"> 定義一個隱藏的輸入欄位（使用者不可見）。
隱藏欄位允許網頁開發者包含使用者提交表單時無法看到或修改的資料。
隱藏欄位通常儲存提交表單時需要更新的資料庫記錄。
注意： 雖然值不會在頁面內容中顯示給使用者，但使用任何瀏覽器的開發者工具或“檢視原始碼”功能都可以看到（並可以編輯）。不要將隱藏輸入作為一種安全形式！
示例
<form>
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="提交">
</form>
自己動手試一試 »
輸入型別月份
<input type="month"> 允許使用者選擇月份和年份。
根據瀏覽器支援情況，輸入欄位中可能會出現一個日期選擇器。
示例
<form>
<label for="bdaymonth">生日 (月份和年份):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
自己動手試一試 »
輸入型別數字
<input type="number"> 定義一個數字輸入欄位。
您還可以設定接受數字的限制。
以下示例顯示一個數字輸入欄位，您可以在其中輸入 1 到 5 之間的值
示例
<form>
<label for="quantity">數量 (1 到 5 之間):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
自己動手試一試 »
輸入限制
以下是一些常見的輸入限制列表
| Attribute | 描述 |
|---|---|
| checked | 指定頁面載入時應預先選擇輸入欄位（用於 type="checkbox" 或 type="radio"） |
| disabled | 指定應停用輸入欄位 |
| max | 指定輸入欄位的最大值 |
| maxlength | 指定輸入欄位的最大字元數 |
| 分鐘 | 指定輸入欄位的最小值 |
| pattern | 指定用於檢查輸入值的正則表示式 |
| readonly | 指定輸入欄位為只讀（不能更改） |
| required | 指定輸入欄位為必填（必須填寫） |
| 大小 | 指定輸入欄位的寬度（以字元為單位） |
| step | 指定輸入欄位的合法數字間隔 |
| value | 指定輸入欄位的預設值 |
您將在下一章中瞭解更多關於輸入限制的資訊。
以下示例顯示一個數字輸入欄位，您可以在其中輸入 0 到 100 之間的值，步長為 10。預設值為 30
示例
<form>
<label for="quantity">數量:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
自己動手試一試 »
輸入類型範圍
<input type="range"> 定義一個用於輸入不重要精確值的數字的控制元件（如滑塊控制元件）。預設範圍是 0 到 100。但是，您可以使用 min、max 和 step 屬性設定接受數字的限制
示例
<form>
<label for="vol">音量 (0 到 50 之間):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
自己動手試一試 »
輸入型別搜尋
<input type="search"> 用於搜尋欄位（搜尋欄位的行為與常規文字欄位相同）。
示例
<form>
<label for="gsearch">搜尋 Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
自己動手試一試 »
輸入型別電話
<input type="tel"> 用於應包含電話號碼的輸入欄位。
示例
<form>
<label for="phone">輸入您的電話號碼:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
自己動手試一試 »
輸入型別時間
<input type="time"> 允許使用者選擇時間（無時區）。
根據瀏覽器支援情況，輸入欄位中可能會出現一個時間選擇器。
示例
<form>
<label for="appt">選擇一個時間:</label>
<input type="time" id="appt" name="appt">
</form>
自己動手試一試 »
輸入型別 URL
<input type="url"> 用於應包含 URL 地址的輸入欄位。
根據瀏覽器支援情況，提交時 URL 欄位可以自動驗證。
某些智慧手機會識別 URL 型別，並在鍵盤上新增“.com”以匹配 URL 輸入。
示例
<form>
<label for="homepage">新增您的主頁:</label>
<input type="url" id="homepage" name="homepage">
</form>
自己動手試一試 »
輸入型別周
<input type="week"> 允許使用者選擇周和年份。
根據瀏覽器支援情況，輸入欄位中可能會出現一個日期選擇器。
示例
<form>
<label for="week">選擇一週:</label>
<input type="week" id="week" name="week">
</form>
自己動手試一試 »
HTML 輸入型別屬性
| 標籤 | 描述 |
|---|---|
| <input type=""> | 指定要顯示的輸入型別 |
