HTMLフォーム入力フィールドのdisabled =“ disabled”とreadonly =“ readonly”の違いは何ですか?


回答:


727

readonly要素は、単に編集できませんが、とき応じて送信されますform提出します。disabled要素は編集できませんし、提出には送信されません。もう1つの違いは、readonly要素はフォーカスできない(そしてフォームを「タブで移動する」ときはフォーカスを取得disabledできる)一方で、要素はフォーカスできないということです。

詳細については、この素晴らしい記事またはw3cによる定義をご覧ください。重要な部分を引用するには:

主な違い

無効化された属性

  • 無効化されたフォーム要素の値は、プロセッサメソッドに渡されません。W3Cはこれを成功した要素と呼びます(これは、チェックされていないフォームチェックボックスと同様に機能します)。
  • 一部のブラウザは、無効になっているフォーム要素のデフォルトのスタイルをオーバーライドまたは提供する場合があります。(グレー表示またはテキストをエンボス加工)Internet Explorer 5.5はこれに関して特に厄介です。
  • 無効にされたフォーム要素はフォーカスを受け取りません。
  • 無効化されたフォーム要素は、タブナビゲーションではスキップされます。

読み取り専用属性

  • すべてのフォーム要素に読み取り専用属性があるわけではありません。最も注目すべきは、<SELECT><OPTION>、と<BUTTON>要素は読み取り専用属性を持っていません(どちらも無効な属性を持っているが)
  • ブラウザーは、フォーム要素が読み取り専用であるというデフォルトのオーバーライドされた視覚的フィードバックを提供しません。(これは問題になる可能性があります。以下を参照してください。)
  • readonly属性が設定されたフォーム要素は、フォームプロセッサに渡されます。
  • 読み取り専用のフォーム要素がフォーカスを受け取ることができます
  • 読み取り専用のフォーム要素がタブ付きナビゲーションに含まれています。

5
読み取り専用要素ではCTRL + Cは使用できませんが、右クリックして[コピー]を選択できます。
Rumplin 2014年

7
@Rumplinはあなたはそれについて確信していますか?私はテストされ、OS X上でChromeのキーボードショートカットをコピーすることができました
evanrmurphy

5
「すべてのフォーム要素に読み取り専用属性があるわけではありません。最も注目すべきは、<SELECT>、<OPTION>、および<BUTTON>要素に読み取り専用属性がないことです(ただし、両方とも無効な属性があります)。そのため、選択したフォームの非表示の入力フィールドで「無効」属性を使用する必要がある場合があります。
Donato、2015年

Chromeの現在のバージョンでは、読み取り専用要素はフォーカスを受け取ることができません。ユーザーが入力のサイズよりも長い値をスクロールできることを期待している場合、これは問題になります。
Mike Feltman、2015

5
つまり、disabled 意味する readonly意味readonlyしない私の理解ですdisabled。つまり、要素にdisabled属性がある場合、その属性を含める必要はありませんreadonly。正しい?
chharvey、2015

91

要素の属性が無効になっている場合、イベントはトリガーされません。

以下のいずれもトリガーされません。

$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

一方、読み取り専用がトリガーされます。

$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked

34

無効とは、フォームの送信時に、そのフォーム要素からのデータが送信されないことを意味します。読み取り専用とは、要素内のデータが送信されるが、ユーザーが変更できないことを意味します。

例えば:

<input type="text" name="yourname" value="Bob" readonly="readonly" />

これにより、要素「yourname」の値「Bob」が送信されます。

<input type="text" name="yourname" value="Bob" disabled="disabled" />

これは、要素「yourname」に対して何も送信しません。


6
readonlydisabledは両方ともブール値です。のdisabled代わりに使用disabled="disabled"(読み取り専用も同じ)
Raptor

5
どちらも意味的に正しいです。HTML5ではどちらも使用できます。
Michael Irigoyen 2014年

3
値なしで属性名のみを使用するというコンテキストフリーの警告はお勧めできません。コードが有効なXML / XHTMLにならないためです。私は多くの開発者がそれらを気にしないことを知っていますが、彼らは少なくとも落とし穴を知っているべきです。個人的に私はXHTML準拠に努めています-まだ受け取られていない説得力のある理由が与えられない限り-私は長い/重複したフォームを使用しています。
underscore_d

1
@ToolmakerSteve空の文字列が有効なXHTMLであるという仕様の引用がありますか?HTML5で有効であるとコメントしているページしか見つかりません。私がXHTMLについて話しているのを見た誰もが、ブール属性のフォームはである必要があると言っていますattrname="attrname"。どちらにしても、それは特に十分に文書化されているようには見えません、少なくとも私が見つけることはできません。ええと、これがあります-w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2-SGMLとHTMLについてのみ言及し、XHTMLについては言及していません...頭字語が多すぎます:S
underscore_d

1
...しかし、存在/不在が十分であるHTMLのビットをスキップします-これはおそらくXHTMLの省略によって適用されます:Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").空の文字列は有効ではないようです。
underscore_d 2016

4

他の回答と同じです(無効はサーバーに送信されず、読み取り専用は送信されます)。ただし、一部のブラウザーは無効なフォームの強調表示を防ぎますが、読み取り専用は引き続き強調表示(およびコピー)できます。

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

読み取り専用フィールドは変更できません。ただし、ユーザーはタブで移動して強調表示し、そこからテキストをコピーできます。


1

フォームがクリア(リセット)されたときに無効にされたテキストボックスの値を保持する必要がある場合、 disabled = "disabled"読み取り専用のテキストボックスは値を保持しないため、ます。

例えば:

HTML

テキストボックス

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

リセットボタン

<button type="reset" id="clearButton">Clear</button>

上記の例では、[クリア]ボタンを押すと、無効なテキスト値がフォームに保持されます。の場合、値は保持されませんinput type = "text" readonly="readonly"

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.