網頁

▼

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


參考：

沒有留言:

張貼留言