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

组合在一起

＆＃13;

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

＆＃13;

<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>

＆＃13;

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 lib并使用bootstrap格式化表单：Bootstrap form inputs

Answer 4

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

您可以使用css样式对它们进行分组。 W3.css 是一个很好的库，比如bootstrap。 W3.css examples

我应该如何分组几个无线电输入？

4 个答案: