HTML <input> value屬性

HTML <input>元素的value屬性作用如下。

<input>元素的value屬性代表元素的值。

大部分的<input>類型(type)都可以使用value屬性來設定元素的值，除了type="file"（檔案上傳）。

而不同type的value用法不同。輸入類型的value代表欄位中的內容。按鈕類型的value代表按鈕的顯示文字。

輸入欄位類型的<input>的value若沒設定預設為空，當使用者或程式改變欄位的內容時，則value值為修改後的內容。例如下面是一個空的文字輸入欄位<input type="text">。如果在欄位中鍵入"abc"則此欄位的的value值即為"abc"。

下面為各種類型的<input>的value設定。

<!-- 隱藏欄位 -->
<input type="hidden" value="123">
<!-- 文字輸入欄位 -->
<input type="text" value="你好">
<!-- 搜尋欄位 -->
<input type="search" value="天氣預報">
<!-- 電話輸入欄位 -->
<input type="tel" value="0932-333-333">
<!-- URL輸入欄位 -->
<input type="url" value="https://www.google.com.tw/">
<!-- Email輸入欄位 -->
<input type="email" value="someone@abc.com">
<!-- 密碼輸入欄位 -->
<input type="password" value="12345">
<!-- 日期輸入欄位 -->
<input type="date" value="2019-08-08">
<!-- 月份輸入欄位 -->
<input type="month" value="2019-08">
<!-- 星期輸入欄位 -->
<input type="week" value="2019-W32">
<!-- 時間輸入欄位 -->
<input type="time" value="09:10:15">
<!-- 日期時間輸入欄位 -->
<input type="datetime-local" value="2019-08-08T09:20">
<!-- 數字輸入欄位 -->
<input type="number" value="999">
<!-- 範圍輸入滑桿 -->
<input type="range" value="90">
<!-- 顏色輸入，色環表 -->
<input type="color" value="#ffff00">
<!-- 複選框 -->
<input type="checkbox" value="1">
<!-- 選擇按鈕，單選框 -->
<input type="radio" value="yellow">
<!-- 提交按鈕 -->
<input type="submit" value="這是提交按鈕">
<!-- 圖片按鈕 -->
<input type="image" value="" src="https://lh3.googleusercontent.com/K9B0ocaZvhCU3j6PJLyTXngvZRDzAQQI-IeKv7O2IxyG63AHC0agRQp3lO-FFqgW4sdYqnBA9VKoBQowCDW39pjOIk30Q8HtXBNyTwvc6XsaZFUf2VkzmH-pAhZBFxoIEji6ZqTNnHJEPMQSNcjuUMr32AsGQge-_C0TV90tXfny66DCQ4YcNw9wAOIq21zlZftAO1oil213E0vjDwHoJsFILepHZ1dbP6qyJOD5gqCWCa174j_SAmGLA8LI96V1OmKzBveDgrNC4JSkYe3Eb4h0oML4aj9CpgMsDBmAwQBUnnik9aMAZBGz7lcGdv9AHKBWm30QKa7GuNfT2ZmojUpQS6x6SB8DZBECCNOMi-dhTfPx5_6cuSZ4UdKk-1jnyVdNQOWfhwEvBUfj26tXfrzqoQOqdLWBDNBxc82rdCzLu8zDz6W593l20t3BBR9rdXB2sILN-6zOxCAZf6ZjjDFEz2RtVMnx7oXgfV7RUoozEC-UAquC-o2nhoy4MhZ-7hdQf23DyhWrM7D-DkcHC8m8hiE9N4JNn7P_H9IHNaetpEwjv2q4_fyJFvdJYPeLHmVztBsYMv_a30FqE3sz3e3EiVJQ6zMLDvdNtWR_favW0HfumRfQ0y983fnqR2UxCcJ21EWuoSkIUMm90gBz27xZgMofigE=w119-h24-no">
<!-- 重置按鈕 -->
<input type="reset" value="這是重置按鈕">
<!-- 普通按鈕 -->
<input type="button" value="這是普通按鈕">

效果如下

type值	控制類型	顯示效果
hidden	隱藏欄位
text(default)	文字輸入欄位
search	搜尋欄位
tel	電話輸入欄位
url	URL輸入欄位（URL）
email	Email輸入欄位（E-mail）
password	密碼輸入欄位
date	日期輸入欄位
month	月份輸入欄位
week	星期輸入欄位
time	時間輸入欄位
datetime-local	日期時間輸入欄位
number	數字輸入欄位
range	範圍輸入滑桿
color	顏色輸入，色環表
checkbox	複選框
radio	選擇按鈕，單選框
submit	提交按鈕
image	圖片按鈕
reset	重置按鈕
button	普通按鈕

• Common input element APIs
• HTML <input> 輸入元素 Input element 簡介