網頁

▼

2019/8/7

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGPHXWpC6yYkKZrrIzT2FppJShniKlL8AXJkBtURmz1vsWj520WO1j9i7tqE86HiL4WUdF0WBuzIEpTAsc6eYe_83BmO9SEAMvkumm7LQQM0ddWJts6Te2rWC-8Jj8ZK0aiQDgVkr370/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 普通按鈕

1 則留言: