4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

セレクトボックスとラジオボタンは、一度選択するとHTMLのみではそれだけを解除できない。

Last updated at Posted at 2015-11-19

結論

<select><input type="radio">は一度どれかを選択状態にすると、
HTMLだけではそこだけを何も選択していない状態に戻せない。

リセットボタンを使えば入力前に戻せるが、他の入力値も戻ってしまう。

value=""の選択肢は、必ずしも未選択とイコールではない。

JavaScriptを使えばもちろん解除できる。

動作


<!DOCTYPE html> 

<html>
<body>
	<form action="">
	<select name="test1" id="">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<input type="submit">
	</form>

	<form action="">
	<select name="test2" id="" size="5">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="">なし</option>
	</select>
	<input type="submit">
	</form>
	
	<form action="">
	<input type="radio" name="test3" value='A'>
	<input type="radio" name="test3" value='B'>
	<input type="radio" name="test3" value=''>
	<input type="submit">
	</form>
</body>
</html>

をサーバーに置いたり、
タグテスト - HTMLタグを入力してブラウザ表示チェック/ホームページマスター
に貼り付けたりしてパラメーターチェック

一度選択すると、初期状態の未選択状態には戻せない。

何も選択しないでsubmitすると、パラメーターは付加されないが、value=''を選択すると空文字が付加される。
required属性的にはvalue=''は未選択とみなされるが、クエリ的にはちょっと違うように見受けられる。

なお、<select>はそのままだとドロップボックスになり最初の項目が選択されているが、sizeを指定するとリストボックスになり、未選択状態を作れる。

調べるきっかけ

フォームをカスタマイズできる所で、必須でないリストやラジオボタンを追加した時、
必須でないので未選択で登録したいときに、誤って選択してしまって戻せなくて泣いた。
リセットボタンも無いし(あっても使わないけど)、更新しても当然選択されたままだしで、
結局他のテキストエリアの入力値などはコピペで退避し、ページを開き直し、
他のラジオボタンなどは選択しなおしてとほぼ全やり直しが必要になってしまった。

ではとvalue=""の項目も追加したが、
これも当然ですが、未選択ではなくvalue=""を選択したものとみなされて登録されてしまった。


他にも、リストの複数選択の上限を決められないなど、HTMLのみではビミョーに手が届かない…

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?