HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで要素を読み取り専用にする方法｜readonly属性の使い方を解説

HTMLのフォーム要素を読み取り専用（編集不可）に設定するには、readonly 属性を使用します。この属性が指定された入力フィールドは、ユーザーが内容を書き換えることができなくなりますが、値はフォーム送信時にサーバーへ引き続き送信されます。

readonly属性の基本例

以下のコードでは、テキスト入力欄に readonly 属性を設定し、ユーザーが値「Amit」を編集できないようにしています。

<!DOCTYPE html>
<html>
   <body>
      <h2>ログイン</h2>
      <form action = "/new.php">
         <input type = "text" value = "Amit" name = "sname" readonly/><br>
         <input type = "password" name = "password"> <br><br>
         <input type = "submit" value = "送信">
      </form>
   </body>
</html>

readonly属性とdisabled属性の違い

似たような用途で使われる disabled 属性との違いも押さえておきましょう。

  • readonly：ユーザーは編集できないが、値はフォーム送信時にサーバーへ送信される。フォーカスや選択（コピー）も可能。
  • disabled：要素そのものが無効化され、編集・フォーカスともに不可。さらに、フォーム送信時にも値は送信されない。

このため、「表示はしたいが編集させたくないデータ」には readonly を、「操作自体を受け付けたくない場合」には disabled を使うのが適切です。

対応している主な要素

readonly 属性は、<input> 要素（type="text"、"email"、"number" など）および <textarea> 要素で使用できます。チェックボックスやラジオボタン、セレクトボックスには適用できない点に注意してください。

  1. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値

  2. HTMLで要素のタイプを設定するには？type属性の使い方を解説

    HTMLでは、type属性を使用することで要素のタイプを設定できます。ここでは、ユーザーからの入力を受け取るための<input>タグについて解説します。type属性は、テキスト入力（text）、チェックボックス（checkbox）、ラジオボタン（radio）など、さまざまなフォーム要素と組み合わせて使用されます。type属性で指定できる主な値text：1行のテキスト入力欄password：入力内容が隠されるパスワード欄checkbox：複数選択可能なチェックボックスradio：択一選択のラジオボタンsubmit：フォーム送信ボタンサンプルコード以下のコードを実行して、type属性の