フォーム開発のベストプラクティス：readonly 属性と JavaScript

2024-04-05

HTML フォームにおける readonly 属性と JavaScript の活用

HTML フォームの SELECT タグや input 要素に readonly 属性を指定すると、ユーザーはこれらの要素を編集できなくなります。しかし、この属性は見た目だけの制限であり、JavaScript を使用すれば値を変更できてしまう場合があります。

readonly 属性の役割

readonly 属性は、フォーム要素を 読み取り専用 に設定するために使用されます。ユーザーはこれらの要素を選択したり、値を入力したりすることができなくなります。

JavaScript による値の変更

readonly 属性を設定しても、JavaScript を使用すれば値を変更できてしまう場合があります。以下に、いくつかの例を示します。

option 要素の selected プロパティの変更

<select id="my-select">
  <option value="1">選択 1</option>
  <option value="2">選択 2</option>
</select>

const select = document.getElementById('my-select');
select.options[1].selected = true; // 選択 2 を選択状態にする

input 要素の value プロパティの変更

<input type="text" id="my-input" readonly>

const input = document.getElementById('my-input');
input.value = '新しい値'; // 値を "新しい値" に変更

disabled 属性の併用

readonly 属性と disabled 属性を併用することで、JavaScript による値の変更も制限できます。

<select id="my-select" disabled>
  <option value="1">選択 1</option>
  <option value="2">選択 2</option>
</select>

const select = document.getElementById('my-select');
select.options[1].selected = true; // 無効なので変更されない

注意事項

readonly 属性は、ユーザーによる編集を制限する目的で使用されます。しかし、JavaScript を使用すれば値を変更できてしまうため、セキュリティ対策が必要な場合は注意が必要です。

補足

上記の例は基本的な方法を示しており、実際の使用状況に合わせてカスタマイズする必要があります。
JavaScript のバージョンやブラウザによって、動作が異なる場合があります。

SELECT タグの option 要素を選択状態にする

<select id="my-select" readonly>
  <option value="1">選択 1</option>
  <option value="2">選択 2</option>
</select>

<button onclick="changeSelection()">選択を変更</button>

<script>
function changeSelection() {
  const select = document.getElementById('my-select');
  select.options[1].selected = true; // 選択 2 を選択状態にする
}
</script>

input 要素の値を変更する

<input type="text" id="my-input" readonly>

<button onclick="changeValue()">値を変更</button>

<script>
function changeValue() {
  const input = document.getElementById('my-input');
  input.value = '新しい値'; // 値を "新しい値" に変更
}
</script>

disabled 属性を併用する

<select id="my-select" disabled>
  <option value="1">選択 1</option>
  <option value="2">選択 2</option>
</select>

<button onclick="changeSelection()">選択を変更</button>

<script>
function changeSelection() {
  const select = document.getElementById('my-select');
  select.options[1].selected = true; // 無効なので変更されない
}
</script>

上記のコードを HTML ファイルに保存し、ブラウザで開いてください。

ボタンをクリックすると、SELECT タグの選択状態が変更されたり、input 要素の値が変更されたりすることを確認できます。
disabled 属性を併用した場合は、ボタンをクリックしても選択状態が変更されないことを確認できます。

HTML フォームの readonly 属性と JavaScript の活用：その他の方法

pointer-events: none スタイルの適用

<select id="my-select" readonly>
  <option value="1">選択 1</option>
  <option value="2">選択 2</option>
</select>

<script>
const select = document.getElementById('my-select');
select.style.pointerEvents = 'none'; // ポインターイベントを無効にする
</script>

<select id="my-select" aria-readonly="true">
  <option value="1">選択 1</option>
  <option value="2">選択 2</option>
</select>

<script>
const select = document.getElementById('my-select');
// JavaScript による値の変更を制限するコード
</script>

カスタム属性の利用

<select id="my-select" data-readonly="true">
  <option value="1">選択 1</option>
  <option value="2">選択 2</option>
</select>

<script>
const select = document.getElementById('my-select');
// JavaScript による値の変更を制限するコード
</script>