Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/HTML/Reference/Attributes/readonly below:

HTML 属性: readonly - HTML

readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。

<label for="firstName">名前:</label>
<input id="firstName" name="firstName" type="text" value="アダム" />

<label for="age">å¹´é½¢:</label>
<input id="age" name="age" type="number" value="42" readonly />

<label for="hobbies">趣味:</label>
<textarea id="hobbies" name="hobbies" readonly>野球</textarea>

label {
  display: block;
  margin-top: 1em;
}

input:read-only,
textarea:read-only {
  background-color: silver;
}

readonly 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。

readonly 属性は、次のようなテキストのフォームコントロールで対応してます。

• <input> 要素の型:
  • text
  • search
  • tel
  • url
  • email
  • password
  • date
  • month
  • week
  • time
  • datetime-local
  • number
• <textarea>

この属性は、 <select> や <button> を含む他のすべての要素には影響しません。また、次のようなテキスト以外の入力要素にも適用されません。

• hidden
• range
• color
• checkbox
• radio
• file
• submit
• image
• reset
• button

readonly 属性に対応しており、この属性が設定されていない入力フィールドは、 :read-write 擬似クラスに一致します。それ以外の要素はすべて、 :read-only 擬似クラスに一致します。

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

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

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

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

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

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

<div class="group">
  <input type="text" value="何らかの値" readonly="readonly" id="text" />
  <label for="text">テキストボックス</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">日付</label>
</div>
<div class="group">
  <input type="email" value="何らかの値" readonly="readonly" id="email" />
  <label for="email">メールドレス</label>
</div>
<div class="group">
  <input type="password" value="何らかの値" readonly="readonly" id="pwd" />
  <label for="pwd">パスワード</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">何らかの値</textarea>
  <label for="ta">メッセージ</label>
</div>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4