網頁

2019/8/6

HTML <input> readonly屬性

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)狀態。。


參考:

沒有留言:

張貼留言