1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: 'HTML 属性: readonly'
slug: Web/HTML/Attributes/readonly
tags:
- Attribute
- Attributes
- Constraint validation
- Forms
- required
translation_of: Web/HTML/Attributes/readonly
---
<p>{{HTMLSidebar}}{{draft}}</p>
<p><span class="seoSummary">論理属性の <code><strong>readonly</strong></code> 属性は、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。</span> <code>readonly</code> 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。</p>
<p><code>readonly</code> 属性はフォームコントロールの <code>{{HTMLElement("input/text","text")}}</code>, <code>{{HTMLElement("input/search","search")}}</code>, <code>{{HTMLElement("input/url","url")}}</code>, <code>{{HTMLElement("input/tel","tel")}}</code>, <code>{{HTMLElement("input/email","email")}}</code>, <code>{{HTMLElement("input/password","password")}}</code>, <code>{{HTMLElement("input/date","date")}}</code>, <code>{{HTMLElement("input/month","month")}}</code>, <code>{{HTMLElement("input/week","week")}}</code>, <code>{{HTMLElement("input/time","time")}}</code>, <code>{{HTMLElement("input/datetime-local","datetime-local")}}</code>, <code>{{HTMLElement("input/number","number")}}</code> の <code>{{HTMLElement("input")}}</code> 型と <code>{{HTMLElement("textarea")}}</code> 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、 <code>{{cssxref(':read-only')}}</code> 擬似クラスが一致します。この属性が含まれなかった場合は、 <code>{{cssxref(':read-write')}}</code> 擬似クラスが一致します。</p>
<p>この属性は <code>{{HTMLElement("select")}}</code> や、 {{HTMLElement("input/checkbox","checkbox")}} や {{HTMLElement("input/radio","radio")}} のように既に変更不可能な入力型、 {{HTMLElement("input/file","file")}} 入力型のように定義上初期状態で値を設定できない入力型は対応していません。 {{HTMLElement("input/range","range")}} や {{HTMLElement("input/color","color")}} は、どちらも既定値があります。 {{HTMLElement("input/hidden","hidden")}} も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、 <code>image</code> を含め、すべて対応していません。</p>
<div class="notecard note">
<p><strong>注:</strong> テキストコントロールだけが読み取り専用にすることができます。他のコントロール (チェックボックスやボタンなど) は、読み取り専用と無効との間に有用な違いがないため、 <code>readonly</code> 属性は適用されません。</p>
</div>
<p>入力に <code>readonly</code> 属性が設定されている場合、 {{cssxref(":read-only")}} 擬似クラスも適用されます。逆に、 <code>readonly</code> 属性に対応していても、この属性が設定されていない入力欄は、 {{cssxref(":read-write")}} 擬似クラスに一致します。</p>
<h3 id="Attribute_interactions">属性の相互作用</h3>
<p><code><a href="/ja/docs/Web/HTML/Attributes/disabled">disabled</a></code> と <code>readonly</code> の違いは、読み取り専用 (readonly) のコントロールは機能し、フォーカスを設定することもできるのに対し、無効な (disabled) コントロールはフォーカスを受け取ることができず、フォームで送信されず、一般に有効化されるまでコントロールとしては機能しません。</p>
<p>読み取り専用のフィールドはユーザーの操作で値を変更することはできないので、 <code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code> は <code>readonly</code> 属性が一緒に指定されている入力欄では効果がありません。</p>
<p>readonly が付いた値を動的に変更できる唯一の方法は、スクリプトを通して行うことです。</p>
<div class="notecard note">
<p><strong>注:</strong> <code>required</code> 属性は <code>readonly</code> 属性が指定された入力欄では許可されていません。</p>
</div>
<h3 id="Usability">ユーザビリティ</h3>
<p>ブラウザーは <code>readonly</code> 属性を表示します...</p>
<h3 id="Constraint_validation">制約検証</h3>
<p>要素が読取専用である場合、要素の値をユーザーによって更新することができないため、制約検証は行われません。</p>
<h2 id="Example">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="group">
<input type="textbox" value="Some value" readonly="readonly"/>
<label>Textbox</label>
</div>
<div class="group">
<input type="date" value="2020-01-01" readonly="readonly"/>
<label>Date</label>
</div>
<div class="group">
<input type="email" value="Some value" readonly="readonly"/>
<label>Email</label>
</div>
<div class="group">
<input type="password" value="Some value" readonly="readonly"/>
<label>Password</label>
</div>
<div class="group">
<textarea readonly="readonly">Some value</textarea>
<label>Message</label>
</div>
</pre>
<h3 id="Result">結果</h3>
<p>{{EmbedLiveSample('Example')}}</p>
<h2 id="Examples">例</h2>
<div class="hidden">
<pre class="brush: html"><fieldset>
<legend>Checkboxes buttons</legend>
<p><label>
<input type="checkbox" name="chbox" value="regular"> Regular
</label></p>
<p><label>
<input type="checkbox" name="chbox" value="readonly" readonly> readonly
</label></p>
<p><label>
<input type="checkbox" name="chbox" value="disabled" disabled> disabled
</label></p>
</fieldset>
<fieldset>
<legend>Radio buttons</legend>
<p><label>
<input type="radio" name="radio" value="regular"> Regular
</label></p>
<p><label>
<input type="radio" name="radio" value="readonly" readonly> readonly
</label></p>
<p><label>
<input type="radio" name="radio" value="disabled" disabled> disabled
</label></p>
</fieldset></pre>
<p>{{EmbedLiveSample('Examples', 500, 200)}}</p>
</div>
<h2 id="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'readonly attribute')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'readonly attribute')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'readonly attribute')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.attributes.readonly")}}</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li>{{cssxref(':read-only')}} および {{cssxref(':read-write')}}</li>
<li>{{htmlelement('input')}}</li>
<li>{{htmlelement('select')}}</li>
</ul>
|
