From f9ba0f3e4baecc16ce0a6b3c5af4269b11b98bde Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 30 Mar 2021 01:40:35 +0900 Subject: Web/HTML/Attributes/readonly を新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2020/12/30 時点の英語版をもとに新規翻訳 --- files/ja/web/html/attributes/readonly/index.html | 146 +++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 files/ja/web/html/attributes/readonly/index.html (limited to 'files/ja/web/html/attributes') diff --git a/files/ja/web/html/attributes/readonly/index.html b/files/ja/web/html/attributes/readonly/index.html new file mode 100644 index 0000000000..890e01ee38 --- /dev/null +++ b/files/ja/web/html/attributes/readonly/index.html @@ -0,0 +1,146 @@ +--- +title: 'HTML 属性: readonly' +slug: Web/HTML/Attributes/readonly +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/readonly +--- +

{{HTMLSidebar}}{{draft}}

+ +

論理属性の readonly 属性は、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。 readonly 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。

+ +

readonly 属性はフォームコントロールの {{HTMLElement("input/text","text")}}, {{HTMLElement("input/search","search")}}, {{HTMLElement("input/url","url")}}, {{HTMLElement("input/tel","tel")}}, {{HTMLElement("input/email","email")}}, {{HTMLElement("input/password","password")}}, {{HTMLElement("input/date","date")}}, {{HTMLElement("input/month","month")}}, {{HTMLElement("input/week","week")}}, {{HTMLElement("input/time","time")}}, {{HTMLElement("input/datetime-local","datetime-local")}}, {{HTMLElement("input/number","number")}} の {{HTMLElement("input")}} 型と {{HTMLElement("textarea")}} 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、 {{cssxref(':read-only')}} 擬似クラスが一致します。この属性が含まれなかった場合は、 {{cssxref(':read-write')}} 擬似クラスが一致します。

+ +

この属性は {{HTMLElement("select")}} や、 {{HTMLElement("input/checkbox","checkbox")}} や {{HTMLElement("input/radio","radio")}} のように既に変更不可能な入力型、 {{HTMLElement("input/file","file")}}  入力型のように定義上初期状態で値を設定できない入力型は対応していません。 {{HTMLElement("input/range","range")}} や {{HTMLElement("input/color","color")}} は、どちらも既定値があります。 {{HTMLElement("input/hidden","hidden")}} も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、 image を含め、すべて対応していません。

+ +
+

注: テキストコントロールだけが読み取り専用にすることができます。他のコントロール (チェックボックスやボタンなど) は、読み取り専用と無効との間に有用な違いがないため、 readonly 属性は適用されません。

+
+ +

入力に readonly 属性が設定されている場合、 {{cssxref(":read-only")}} 擬似クラスも適用されます。逆に、 readonly 属性をに対応していても、この属性が設定されていない入力欄は、 {{cssxref(":read-write")}} 擬似クラスに一致します。

+ +

属性の相互作用

+ +

disabled と readonly の違いは、読み取り専用 (readonly) のコントロールは機能し、フォーカスを設定することもできるのに対し、無効な (disabled) コントロールはフォーカスを受け取ることができず、フォームで送信されず、一般に有効化されるまでコントロールとしては機能しません。

+ +

読み取り専用のフィールドはユーザーの操作で値を変更することはできないので、 required は readonly 属性が一緒に指定されている入力欄では効果がありません。

+ +

readonly が付いた値を動的に変更できる唯一の方法は、スクリプトを通して行うことです。

+ +
+

注: required 属性は readonly 属性が指定された入力欄では許可されていません。

+
+ +

ユーザビリティ

+ +

ブラウザーは readonly 属性を表示します...

+ +

制約検証

+ +

要素が読取専用である場合、要素の値をユーザーによって更新することができないため、制約検証は行われません。

+ +

例

+ +

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>
+
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

例

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'readonly attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'readonly attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'readonly attribute')}}{{Spec2('HTML5.1')}}
+ +

ブラウザーの互換性

+ +

{{Compat("html.elements.attributes.readonly")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf