浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【HTML】不思議な連携をするラジオボタン

 input 要素と form 要素はそれだけでいささか奇妙な動作を引き起こせます。
 デモは次です。

 HTMLコードの方も見るのが良いです。同じ name で type=”radio” な input 要素はいずれか一つだけチェックされるのが普通ですが、異常動作の方では二つチェックできます。これは同じ name であっても違うラジオボタンのセットであるとみなされているためです。 input 要素は form 要素と密接な関係にあり、 form 要素内で定義された input 要素はその form 要素に紐づけられます。先の説明は少々不足しており普通な動作とは、同じ form 内で同じ name で type=”radio” な input 要素はいずれか一つだけチェックされる、という動作だったわけです。
 
 この form 要素への紐づけは input 要素のみで制御できます。デモは次です。

 使っているのは input 要素の form 属性です。これを用いると DOM 構造に関係なく input 要素に紐づく form 要素を制御できます。
<input>: 入力欄 (フォーム入力) 要素 – HTML: HyperText Markup Language | MDN#form
 これらの仕組みは安易に用いると混乱を招くだけですが、少々特殊な状況でも対応できるだけの柔軟な仕組みです。適宜適量で活用するのがよいでしょう。

  • この記事いいね! (0)