JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<h2>異なるformと連動するラジオボタン</h2>
<div class="border">
  <form id="up">
    <div>
      <input type="radio" id="hueyu" name="drone" value="huey">
      <label for="hueyu">Huey</label>
    </div>
    <div>
      <input type="radio" id="deweyd"u name="drone" value="dewey" form="down">
      <label for="deweyd">Dewey</label>
    </div>
  </form>
  <form id="down">
    <div>
      <input type="radio" id="hueyd" name="drone" value="huey">
      <label for="hueyd">Huey2</label>
    </div>
    <div>
      <input type="radio" id="deweyu" name="drone" value="dewey" form="up">
      <label for="deweyu">Dewey2</label>
    </div>
  </form>
</div>
<h2>正常動作</h2>
<div class="border">
  <form>
    <div>
      <input type="radio" id="hueyu2" name="drone" value="huey">
      <label for="hueyu2">Huey</label>
    </div>
    <div>
      <input type="radio" id="deweyd2"u name="drone" value="dewey">
      <label for="deweyd2">Dewey</label>
    </div>
  </form>
  <form>
    <div>
      <input type="radio" id="hueyd2" name="drone" value="huey">
      <label for="hueyd2">Huey2</label>
    </div>
    <div>
      <input type="radio" id="deweyu2" name="drone" value="dewey">
      <label for="deweyu2">Dewey2</label>
    </div>
  </form></div>

CSS

form {
  border: solid
}