disabled された INPUT 要素は submit 出来ない

投稿日: 2021年 6月 26日

Image

disabled 属性によって無効化された input 要素は、サーバーに投稿(submit)することが出来ません。disabled されているのだから、当たり前だろうと思いますが、初期値が設定されている要素では注意が必要かもしれません。

初期値(value)が設定された input 要素を投稿すると 

例えば、下記の様なフォームがあったとき、灰色の箇所は disabled になっている input 要素で、投稿してもサーバーにその値は渡されません。
PHP の $_POST 変数の中身をページに出力する処理を行うと、disabled が設定されている要素だけ、その値が表示されないことがわかります。
たとえその input 要素に初期値が設定されていたとしても、disabled された要素の値は投稿されないため、気をつける必要があります。

Image

↑のソースコードは↓です。

<html lang="jp">
<head>
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <form action="/index.php" method="POST" class="col-5">
        <div class="mb-3">
          <label for="normal-form" class="form-label">普通のフォーム(normal-form)</label>
          <input type="text" name="normal-form" class="form-control" id="normal-form" value="フォームの文字列">
        </div>
        <div class="mb-3">
          <label for="disabled-form" class="form-label">無効化されたフォーム(disabled-form)</label>
          <input type="text" name="disabled-form" class="form-control" id="disabled-form" value="無効化されたフォームの文字列" disabled>
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" name="normal-checkbox" class="form-check-input" id="normal-checkbox" checked>
          <label class="form-check-label" for="normal-checkbox">普通のチェックボックス(normal-checkbox)</label>
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" name="disabled-checkbox" class="form-check-input" id="disabled-checkbox" checked disabled>
          <label class="form-check-label" for="disabled-checkbox">無効化されたチェックボックス(disabled-checkbox)</label>
        </div>
        <input type="submit" class="btn btn-primary" value="投稿">
      </form>
    </div>
    <ul>
    <li>name="normal-form" => <?= $_POST["normal-form"] ?></li>
    <li>name="disabled-form" => <?= $_POST["disabled-form"] ?></li>
    <li>name="normal-checkbox" => <?= $_POST["normal-checkbox"] ?></li>
    <li>name="disabled-checkbox" => <?= $_POST["disabled-checkbox"] ?></li>
  </ul>
  </div>
</body>
</html>

ユーザーに値を変更されたくない値など、初期値を設定して、さらにそれを disabled してさわれないようにすると、そもそもその値が投稿されなくなります。変更されたくない input 要素を disabled した場合、投稿するタイミングで js を使って disabled を外してから、投稿するような工夫が必要になります。
もしくは、変更されたくない値をそもそも UI に表示しないというのもありでしょうか?🤔

プログラミングに関するオススメ書籍