HTML <input>
元素的readonly
屬性作用如下。
<input>
元素的readonly
屬性是boolean屬性,用來控制使用者是否可修改欄位中的內容。
可使用readonly
屬性的<input>
類型(type
)包含以下:
text
:一般文字輸入欄位search
:搜尋欄位tel
:電話輸入欄位url
:URL輸入欄位email
:Email輸入欄位password
:密碼輸入欄位date
:日期輸入欄位month
:月份輸入欄位week
:星期輸入欄位time
:時間輸入欄位date-time
:日期時間輸入欄位number
:數字輸入欄位
例如下面欄位都使用了readonly
屬性來限制使用者無法修改欄位中的內容。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<label>一般文字輸入欄位:</label>
<input type="text" value="今天天氣真好,可以看旁邊" readonly>
</div>
<div>
<label>日期輸入欄位:</label>
<input type="date" value="2019-08-07" readonly>
</div>
<div>
<label>時間輸入欄位:</label>
<input type="time" value="19:30:10" readonly>
</div>
</body>
</html>
效果如下,欄位中的內容無法被修改,變成唯讀(read only)狀態。。
參考:
沒有留言:
張貼留言