我应该如何对多个无线电输入进行分组？

Question

当我在一个表单中有多个单选输入构成一个控件时（下面的示例），将它们组合在一起的最语义化的方式是什么？

<form>
  <!-- Single radio control made of 3 radio inputs -->
  <input type="radio" name="X" value="A" />
  <input type="radio" name="X" value="B" />
  <input type="radio" name="X" value="C" />

  <!-- Some other control -->
  <input type="text" name="Y" value="D" />
</form>

我知道我可以将它们放在一个段落中 (<p>..</p>)，但我想知道列表 (<ul>..</ul>) 是否会更语义化？

Answer 1

您可以使用 fieldset

组合在一起

.radio_button{
  list-style-type: none;
  }

<form>
  <h1>Testing Form Radio buttons</h1>
    <fieldset>
      <legend>Title</legend>
      <ul>
        <li class="radio_button">
          <label for="title_1">
            <input type="radio" id="title_1" name="title" value="M." />
            Mister
          </label>
        </li>
        <li class="radio_button">
          <label for="title_2">
            <input type="radio" id="title_2" name="title" value="Ms." />
            Miss
          </label>
        </li>
      </ul>
    </fieldset>
    </section>
    
   </form>

Answer 2

试试这个：

<form>
<!-- Single radio control made of 3 radio inputs -->
<ul>
<li>
  <input type="radio" name="X" value="A" />A
</li>
<li>
  <input type="radio" name="X" value="B" />B
</li>
<li>
  <input type="radio" name="X" value="C" />C
</li>
</ul>
  <input type="text" name="Y" value="D" />

</form>

Answer 3

一个好方法是使用 bootstrap 库并使用 bootstrap 格式化您的表单 : Bootstrap form inputs

Answer 4

如果您只想选择 1 个值，您可以使用相同的名称字段，并且只会提交选定字段的值（值 = "A"）。

您可以使用 css 样式对它们进行分组。 W3.css 是一个像 bootstrap 一样不错的库。 W3.css examples

我应该如何对多个无线电输入进行分组？

How should I group several radio inputs?

html

forms

radio-group

radio-button