【HTML Living Standard】readonly属性の使い方
readonly属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
readonlyプロパティは、HTMLのフォーム要素が読み取り専用の状態であることを示す情報を保持するプロパティです。この属性は、主に<input>要素や<textarea>要素といったフォーム部品に適用されます。readonly属性が指定された要素は、ユーザーがその値を直接編集・変更することを禁止します。
しかし、readonly属性は要素を完全に無効化するdisabled属性とは異なる振る舞いをします。readonlyが設定された要素は、依然としてフォーカスを受け取ることができ、その中のテキストを選択してコピーすることも可能です。また、フォームが送信される際には、readonly属性が指定された要素の現在の値も他のフォームデータと一緒にサーバーに送信されます。
この属性は、ユーザーには表示したいが変更は許可しない情報（例：ユーザーID、計算結果など）に対して特に有用です。入力値の編集を制限するユーザーインターフェース上の要件を満たすために使用され、セキュリティ目的ではなく、ユーザーが誤ってデータを変更することを防ぎ、必要な情報を提供する際に活用されます。
構文(syntax)
1<input type="text" readonly>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML readonlyとdisabledの違いを比較する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML readonly と disabled の違い</title> 7 <style> 8 /* スタイリングは理解を助けるためのもので、必須ではありません */ 9 body { font-family: sans-serif; margin: 20px; line-height: 1.6; } 10 div { margin-bottom: 15px; } 11 label { display: block; margin-bottom: 5px; font-weight: bold; } 12 input[type="text"], textarea { 13 width: 300px; 14 padding: 8px; 15 border: 1px solid #ccc; 16 border-radius: 4px; 17 box-sizing: border-box; 18 } 19 /* disabled 要素は通常、背景色が変わったり操作が無効になります */ 20 input[disabled], textarea[disabled] { 21 background-color: #e9e9e9; 22 cursor: not-allowed; 23 } 24 /* readonly 要素は通常、背景色が変わることはあまりありませんが、今回は視覚的な区別のために設定 */ 25 input[readonly], textarea[readonly] { 26 background-color: #f5f5f5; 27 } 28 button { 29 padding: 10px 20px; 30 background-color: #007bff; 31 color: white; 32 border: none; 33 border-radius: 4px; 34 cursor: pointer; 35 margin-top: 10px; 36 } 37 p.note { font-size: 0.9em; color: #555; margin-top: 20px; } 38 </style> 39</head> 40<body> 41 <h1>readonly と disabled 属性の比較</h1> 42 43 <form action="#" method="get"> 44 <div> 45 <label for="editableInput">編集可能な入力フィールド:</label> 46 <input type="text" id="editableInput" name="editableInput" value="この値は変更可能です。"> 47 <!-- ユーザーが値を変更でき、フォーム送信時に値が含まれます。 --> 48 </div> 49 50 <div> 51 <label for="readonlyInput">読み取り専用の入力フィールド (readonly):</label> 52 <input type="text" id="readonlyInput" name="readonlyInput" value="この値は読み取り専用です。" readonly> 53 <!-- ユーザーは値を変更できませんが、フォーム送信時には値が含まれます。 --> 54 </div> 55 56 <div> 57 <label for="disabledInput">無効化された入力フィールド (disabled):</label> 58 <input type="text" id="disabledInput" name="disabledInput" value="この値は無効化されています。" disabled> 59 <!-- ユーザーは値を変更できず、フォーム送信時にも値は含まれません。 --> 60 </div> 61 62 <div> 63 <label for="editableTextarea">編集可能なテキストエリア:</label> 64 <textarea id="editableTextarea" name="editableTextarea" rows="3">このテキストエリアは変更可能です。</textarea> 65 <!-- ユーザーが値を変更でき、フォーム送信時に値が含まれます。 --> 66 </div> 67 68 <div> 69 <label for="readonlyTextarea">読み取り専用のテキストエリア (readonly):</label> 70 <textarea id="readonlyTextarea" name="readonlyTextarea" rows="3" readonly>このテキストエリアは読み取り専用です。</textarea> 71 <!-- ユーザーは値を変更できませんが、フォーム送信時には値が含まれます。 --> 72 </div> 73 74 <div> 75 <label for="disabledTextarea">無効化されたテキストエリア (disabled):</label> 76 <textarea id="disabledTextarea" name="disabledTextarea" rows="3" disabled>このテキストエリアは無効化されています。</textarea> 77 <!-- ユーザーは値を変更できず、フォーム送信時にも値は含まれません。 --> 78 </div> 79 80 <button type="submit">フォームを送信</button> 81 <p class="note"> 82 （注: フォーム送信ボタンをクリックすると、ブラウザのアドレスバーのURLにフォームのデータが表示されます。<br> 83 `readonly`属性のフィールドの値は含まれますが、`disabled`属性のフィールドの値は含まれないことを確認できます。） 84 </p> 85 </form> 86</body> 87</html>
HTMLのreadonly属性は、<input>や<textarea>などの入力フィールドに設定することで、ユーザーがその値を変更できないようにする属性です。これは真偽値属性であるため、属性が存在すれば「読み取り専用」の状態となり、特定の引数や戻り値は持ちません。
サンプルコードでは、readonly属性が適用された入力フィールドと、disabled属性が適用された入力フィールド、そして通常の編集可能なフィールドの挙動を比較しています。
readonly属性が設定された入力フィールドやテキストエリアは、ユーザーがキーボード入力で直接値を編集することはできません。しかし、このフィールドにフォーカスを当てたり、表示されている値をコピーしたりすることは可能です。また、フォームが送信された際には、readonly属性のフィールドの値も、他の編集可能なフィールドの値と同様にサーバーへ送られます。
これに対し、disabled属性が設定された入力フィールドやテキストエリアは、完全に無効化されます。ユーザーは値を変更できないだけでなく、フィールドにフォーカスを当てることも、値をコピーすることもできません。さらに重要な点として、disabled属性のフィールドの値は、フォーム送信時にサーバーへは一切送信されません。
このように、readonlyは「ユーザーによる編集はさせないが、データとして送信はしたい」場合に、disabledは「ユーザーによる操作を完全に無効にし、データ送信からも除外したい」場合に使い分けます。この違いを理解することは、Webフォーム設計において非常に役立ちます。
readonly属性は、ユーザーが入力フィールドの値を変更できないようにしますが、その値はフォーム送信時にサーバーへ送られます。一方、disabled属性はフィールドを完全に無効化し、ユーザーは値を変更できず、フォーカスも当たらず、フォーム送信時にも値は送られません。このフォーム送信時の挙動の違いが最も重要なポイントですので、どちらを使うか慎重に判断してください。また、readonly属性はテキスト入力系の要素にのみ適用可能で、ボタンなどには適用できません。JavaScriptを使えばこれらの属性は後から変更や削除ができるため、ユーザーインターフェース上の制限に過ぎません。セキュリティ上、サーバー側での入力値検証は必ず行うようにしてください。
HTML readonly属性で見た目も制御する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML readonly属性のサンプル</title> 7 <style> 8 /* 9 * readonly属性を持つ入力フィールドの見た目を調整するCSSの例です。 10 * ブラウザのデフォルトスタイルは異なる場合がありますが、 11 * ここでは読み取り専用であることを視覚的に示しやすくしています。 12 */ 13 input[readonly] { 14 background-color: #e9e9e9; /* 薄いグレーの背景 */ 15 border: 1px solid #ccc; /* 控えめな枠線 */ 16 cursor: default; /* マウスカーソルを矢印にする */ 17 } 18 19 /* フォーム要素の一般的なスタイル設定 */ 20 body { 21 font-family: Arial, sans-serif; 22 margin: 20px; 23 padding: 0; 24 background-color: #f4f4f4; 25 } 26 h1 { 27 color: #333; 28 } 29 form div { 30 margin-bottom: 15px; 31 } 32 label { 33 display: block; 34 margin-bottom: 5px; 35 font-weight: bold; 36 color: #555; 37 } 38 input[type="text"] { 39 width: 300px; 40 padding: 8px; 41 border: 1px solid #ddd; 42 border-radius: 4px; 43 box-sizing: border-box; 44 } 45 input[type="submit"] { 46 padding: 10px 20px; 47 background-color: #007bff; 48 color: white; 49 border: none; 50 border-radius: 4px; 51 cursor: pointer; 52 font-size: 16px; 53 } 54 input[type="submit"]:hover { 55 background-color: #0056b3; 56 } 57 </style> 58</head> 59<body> 60 61 <h1>readonly属性の動作例</h1> 62 63 <form action="#" method="get"> 64 <div> 65 <label for="editableField">編集可能なフィールド:</label> 66 <!-- ユーザーが値を自由に変更できる通常のテキスト入力フィールドです。 --> 67 <input type="text" id="editableField" name="editableField" value="このテキストは編集できます。"> 68 </div> 69 70 <div> 71 <label for="readonlyField">読み取り専用フィールド:</label> 72 <!-- 73 `readonly`属性は、ユーザーがこのフィールドの値を変更できないようにします。 74 しかし、フィールドは選択可能で、テキストをコピーすることもできます。 75 フォームを送信すると、このフィールドの値もサーバーに送信されます。 76 見た目上は編集不可能であることが示され、入力カーソルは表示されません。 77 --> 78 <input type="text" id="readonlyField" name="readonlyField" value="このテキストは読み取り専用です。" readonly> 79 </div> 80 81 <div> 82 <label for="disabledField">無効なフィールド (比較用):</label> 83 <!-- 84 `disabled`属性は、フィールドを完全に無効にします。 85 フィールドは選択も、コピーもできません。 86 フォームを送信しても、このフィールドの値はサーバーに送信されません。 87 見た目は通常、グレーアウトされ、操作できないことが明確に示されます。 88 --> 89 <input type="text" id="disabledField" name="disabledField" value="このフィールドは無効です。" disabled> 90 </div> 91 92 <input type="submit" value="フォーム送信を試す"> 93 </form> 94 95</body> 96</html>
HTMLのreadonly属性は、<input>や<textarea>といったフォームの入力フィールドに適用することで、ユーザーがそのフィールドの値を直接変更できないように設定する属性です。この属性は引数を持たず、値を指定する必要もありません。フィールドにreadonly属性が存在するだけで、読み取り専用として扱われます。
サンプルコードでは、「読み取り専用フィールド」としてreadonly属性が適用された入力フィールドが示されています。ユーザーはこのフィールドの値をキーボード入力などで変更することはできませんが、フィールドを選択したり、表示されているテキストをコピーしたりすることは可能です。また、フォームが送信された際には、readonly属性が設定されたフィールドの値もサーバーへ送信されます。
比較のために用意された「無効なフィールド」のdisabled属性とは異なり、readonly属性はフィールドを完全に無効化するわけではありません。disabled属性はフィールドの選択やコピーも不可にし、フォーム送信時にその値はサーバーに送られません。つまり、readonlyは「ユーザーによる変更はさせないが、情報としては有効」な場合に、disabledは「そのフィールド自体を無効化する」場合に利用されます。
引数や戻り値は存在せず、単純に属性の有無で機能が切り替わります。サンプルコードのCSSでは、input[readonly]というセレクタを使って、readonly属性を持つ入力フィールドの背景色を薄いグレーにするなど、読み取り専用であることが「見た目」で分かりやすいようにスタイルを調整しています。これにより、ユーザーは一目でそのフィールドが編集不可能であることを判断できます。
readonly属性は、ユーザーが入力フィールドの値を変更できないようにしますが、フィールドの選択やテキストのコピーは可能です。また、フォームを送信すると、readonlyフィールドの値もサーバーに送信されます。
混同しやすいdisabled属性は、フィールドを完全に無効化し、選択やコピーもできず、値もサーバーに送信されない点でreadonlyと大きく異なります。
ブラウザのデフォルトではreadonlyフィールドの見た目が編集可能フィールドとあまり変わらないことが多いため、サンプルコードのようにCSSを使い、背景色やカーソルを変更して、ユーザーに読み取り専用であることを視覚的に伝える工夫が重要です。
readonlyはあくまでクライアントサイドでの入力制限ですので、セキュリティ上重要なデータの場合は、サーバー側でも必ず入力値の検証を行うようにしてください。