JavaScript で HTML フォーム入力フィールドの状態を動的に変更する
2024-04-02
HTML フォーム入力フィールドにおける disabled と readonly の違い
disabled と readonly は、HTML フォーム入力フィールドの動作を制御する属性です。どちらもユーザーによる入力操作を制限しますが、それぞれ異なる意味と影響を持ちます。
disabled 属性を指定すると、入力フィールドが無効化されます。無効化されたフィールドは、以下のようになります。
- ユーザーによる入力を受け付けない
- フォーム送信時に値が送信されない
- フォーカスを受け付けない
- 見た目がグレーアウトされるなど、無効化されていることが視覚的に示される
- 見た目は通常通り
主な違い
| 項目 | disabled | readonly |
|---|---|---|
| 入力 | 不可 | 可 |
| フォーム送信 | 送信されない | 送信される |
| フォーカス | 不可 | 可 |
| 見た目 | 無効化表示 | 通常表示 |
使用例
- 過去の日付を入力するフィールドには
readonlyを使用します。 - ユーザーが編集できないデフォルト値を設定するフィールドには
readonlyを使用します。 - 一時的にユーザー入力を制限したいフィールドには
disabledを使用します。
注意点
disabled属性とreadonly属性は同時に使用できます。- JavaScript を使用して、
disabled属性とreadonly属性の値を動的に変更できます。
補足
disabled属性は、フォーム全体の送信を無効化するためにも使用できます。readonly属性は、パスワードフィールドに使用すると、パスワードが平文で表示されるのを防ぐことができます。
用語解説
- クロスブラウザ：異なるブラウザで同じように動作すること
disabled と readonly は、HTML フォーム入力フィールドの動作を制御する重要な属性です。それぞれの違いを理解して、適切に使用することが重要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>disabledとreadonlyの違い</title>
</head>
<body>
<h1>disabledとreadonlyの違い</h1>
<form action="#">
<label for="name">名前：</label>
<input type="text" id="name" name="name" required>
<br>
<label for="age">年齢：</label>
<input type="number" id="age" name="age" disabled>
<br>
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" readonly value="[email protected]">
<br>
<br>
<button type="submit">送信</button>
</form>
</body>
</html>
コード解説
nameフィールドは、required属性によって入力必須になっています。ageフィールドはdisabled属性によって無効化されています。emailフィールドはreadonly属性によって読み取り専用になっています。
実行結果
このコードを実行すると、以下のようになります。
nameフィールドは、ユーザーが入力できます。ageフィールドは、グレーアウト表示され、ユーザーによる入力を受け付けません。emailフィールドは、ユーザーによる編集を受け付けません。
HTML フォーム入力フィールドの動作を制御するその他の方法
JavaScript を使用して、入力フィールドの状態を動的に変更できます。例えば、以下のコードは、submit ボタンがクリックされたときに age フィールドを無効化します。
function submitHandler() {
document.getElementById("age").disabled = true;
}
CSS を使用して、入力フィールドの見た目を変更できます。例えば、以下のコードは、readonly フィールドの背景色を変更します。
input[readonly] {
background-color: #f0f0f0;
}
required 属性を指定すると、入力フィールドは必須になります。必須フィールドは、ユーザーが入力するまでフォームを送信できません。
pattern 属性を指定すると、入力フィールドに入力できる値を正規表現で制限できます。
placeholder 属性を指定すると、入力フィールドに表示されるプレースホルダーテキストを設定できます。
disabled 属性と readonly 属性は、HTML フォーム入力フィールドの動作を制御する最も基本的な方法です。その他にも、JavaScript や CSS を使用したり、required 属性や pattern 属性などの属性を使用したりすることで、様々な方法で入力フィールドの動作を制御できます。
html cross-browser
