トップページ  > HTML Living Standard  > <input>  > readonly

★HTML Living Standard リファレンス

<input readonly> …… 読み取り専用にする
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<input readonly>は、 フォームのテキストコントロールを読み取り専用にする際に使用します。

readonly属性は、ユーザーがフォームコントロールを編集できるかどうかを制御します。 input要素にreadonly属性を指定すると、ユーザーはその要素を変更できません。

readonly属性を指定できるのは、テキスト入力のフォームコントロールのみです。 チェックボックスやボタンなどのテキスト入力以外のコントロールには、readonly属性は適用されません。

チェックボックスやボタンなどを無効にするには

チェックボックスやボタンなどは、読み取り専用と無効の区別がつかないため、readonly属性を指定できない仕様になっています。 チェックボックスやボタンなどを無効にする場合は、disabled属性を指定します。

readonly属性とdisabled属性の違い

readonly属性は要素を読み取り専用にするのに対し、disabled属性は要素を無効にします。 readonly属性を指定した読み取り専用コントロールは、引き続き機能します。 disabled属性を指定した無効なコントロールは、有効になるまでコントロールとして機能しません。

■属性

readonly属性
ユーザーによる値の編集を許可するかどうかを指定します。

■使用例

以下のサンプルでは、 1行目と2行目のinput要素にはreadonly属性を指定して読み取り専用にしています。 3行目のinput要素にはdisabled属性を指定して無効にしています。 どちらも入力編集できない点は同じですが、読み取り専用と無効の違いを確認してみてください。

HTMLソース

<form action="products.cgi" method="post" enctype="multipart/form-data">
 <table>
  <tr> <th> 商品ID <th> 商品名 <th> 価格 <th> 操作
  <tr>
   <td> <input readonly="readonly" name="1.pid" value="H412">
   <td> <input required="required" name="1.pname" value="ポータブルランプ">
   <td> $<input required="required" type="number" min="0" step="0.01" name="1.pprice" value="49.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:1">削除</button>
  <tr>
   <td> <input readonly="readonly" name="2.pid" value="FG28">
   <td> <input required="required" name="2.pname" value="テーブルランプ">
   <td> $<input required="required" type="number" min="0" step="0.01" name="2.pprice" value="24.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:2">削除</button>
  <tr>
   <td> <input disabled="disabled" name="3.pid" value="FT12">
   <td> <input required="required" name="3.pname" value="足元ランプ">
   <td> $<input required="required" type="number" min="0" step="0.01" name="3.pprice" value="12.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:3">削除</button>
  <tr>
   <td> <input required="required" name="4.pid" value="" pattern="[A-Z0-9]+">
   <td> <input required="required" name="4.pname" value="">
   <td> $<input required="required" type="number" min="0" step="0.01" name="4.pprice" value="">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:4">削除</button>
 </table>
 <p> <button formnovalidate="formnovalidate" name="action" value="add">追加</button> </p>
 <p> <button name="action" value="update">保存</button> </p>
</form>
↓↓↓

ブラウザ上の表示

商品ID 商品名 価格 操作
$
$
$
$

input要素の終了タグについて

HTMLの仕様では、input要素には終了タグ</input>はありません。

■関連項目

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ