HTML

読取専用(readonly)と無効(disabled)

詳細を開く 詳細を閉じる

「disabled」と「readonly」の違い

「disabled」と「readonly」は共に変更できないので似ていますが、注意する点がいくつかあります。

まず、両方の「送信ボタン」をクリックしてみてください。 それぞれ同じようにデータが事前に入力されていますが、「disabled」されたデータは、サーバに「送らない」一方、 「readonly」されたデータは「送られます」。よって、後でサーバに送るつもりのデータは、「disabled」にしません。

加えて、「readonly」の項目はクリックしたり、選択しコピーすることが可能ですが、「disabled」の場合はできません。

また、テキスト系の項目「text, password, number, url, 日付類」は「disabled」/「readonly」の両方に使えますが、 ボタン系の項目「submit, image, checkbox, radio」などは「disabled」のみ使えます。


別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
<input type="text" name="text"
	value="abc" disabled><br>
<input type="password" name="password"
	value="abc" disabled><br>
<input type="number" name="number"
	value="123" disabled><br>	   
<input type="url" name="url"
	value="http://ykato.net/" disabled><br>	   
<input type="email" name="email" 
	value="a@a" disabled><br>	   
<input type="tel" name="tel" 
	value="123" disabled><br>	  

<input type="checkbox" name="c" 
	value="aaa" disabled checked>aaa<br>
<input type="radio" name="s" 
	value="女" disabled>女
<input type="radio" name="s" 
	value="男" disabled checked>男<br>

<input type="submit" value="送信">
<input type="reset" value="リセット" disabled>
</form>

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
<input type="text" name="text"
	value="abc" readonly><br>
<input type="password" name="password"
	value="abc" readonly><br>
<input type="number" name="number"
	value="123" readonly><br>	   
<input type="url" name="url"
	value="http://ykato.net/" readonly><br>	   
<input type="email" name="email" 
	value="a@a" readonly><br>	   
<input type="tel" name="tel" 
	value="123" readonly><br>	   

<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ