Input標簽是網頁常用的表單元素之一，它可以用于收集用戶的各種輸入信息，包括文本、數字、日期等等。而有時候我們需要將輸入框設置成只讀，讓用戶無法修改內容。這時候就需要用到input標簽的只讀屬性了。
input標簽的只讀屬性是通過設置readonly屬性來實現的。例如，下面的代碼就創建了一個只讀的文本框：
<input type="text" name="username" value="Xiaoming" readonly />
以上代碼將創建一個文本框，其中value屬性設置成了“Xiaoming”，而readonly屬性則將該文本框設置成只讀狀態。用戶無法修改其中的內容。
除了使用readonly屬性，我們也可以使用jQuery來實現只讀的效果。下面是一個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>只讀輸入框</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="username" id="username" value="Xiaoming" />
<button id="readonlyBtn">只讀</button>
<script>
$(function() {
$('#readonlyBtn').click(function() {
$('#username').attr('readonly', 'readonly');
})
})
</script>
</body>
</html>以上代碼首先創建了一個文本框，還有一個按鈕。在按鈕的點擊事件中，我們使用jQuery的attr()函數將文本框的readonly屬性設置成了true，這就將文本框設置成了只讀狀態。
總結：使用input標簽的readonly屬性或者jQuery的attr()函數都可以實現只讀輸入框的功能，具體使用哪種方法取決于開發者的個人喜好和需求。