入力できないけど送信はできるフォームコントロールを作る

HTML&CSS

2016.10.28

2年待ちわびたサガ2015もとい『サガスカーレットグレイス』を嬉々として予約した kagata です。

さて、今回は最近身近で話題にのぼった HTML の小技をお送りします。

disabled なフォームコントロールは値を送信しない

あるとき、チームメンバーから「入力できないようにしたフォームコントロールの値が送信されないようだ」という話を聞きました。そのフォームコントロールには、以下のように disabled 属性がつけられていました。

<!-- 入力できないし送信もされないテキスト入力欄 -->
<input type="text" name="character" value="ウルピナ" disabled>

<!-- 入力できないし送信もされないプルダウンメニュー -->
<select name="characters" disabled>
  <option>レオナルド</option>
  <option>タリア</option>
  <option>バルマンテ</option>
</select>

調べてみると、MDN にもその旨の記述がありました。

input 要素 - HTML | MDN

無効状態のコントロールの値はフォームとともに送信しません。

disabled なフォームコントロールの値を送信してゴニョゴニョしようと思ったことが今までなかったもので、そんなことを考えたこともなかったのですが、たしかに disabled というからには値を送信する機能も無効化されてしかるべき、なのかもしれません。

入力できないけど送信はできるフォームコントロールを作る

ではユーザーからの入力は受け付けないけれど、値の送信はできるようなフォームコントロールはどうやって作るのか。調べてみました。

input ないし textarea 要素の場合

input や textarea の場合は簡単で、 disabled 属性でなく readonly 属性をつけてやれば OK です。 “read only” とはいうものの、 POST や GET はできるということですね。

<!-- 入力できないけど送信はできるテキスト入力欄 -->
<input type="text" name="character" value="ウルピナ" readonly>

select 要素の場合

select 要素には readonly 属性がないため、 input 要素と同じようにはいきません。そこで、配下の option 要素のうち選択された状態で固定したいものに selected 属性、それ以外に disabled 属性をつけてやります。

<!-- 入力できないけど送信はできるプルダウンメニュー -->
<select name="characters">
  <option selected>レオナルド</option>
  <option disabled>タリア</option>
  <option disabled>バルマンテ</option>
</select>

コードに若干強引な感じが出ています。また、 select 要素ごと disabled するとメニュー自体開けなくなるのに対してこちらはメニューを開くことができるという違いもありますが、まあこれで OK とします。

出典：HTMLのSelectタグやInputタグのRadioボタンをReadOnlyにする方法