最好的使用方法是什么<input type="radio">在 HTML 中？

我正在寻找语义良好的 HTML，其格式可通过 CSS 配置。

我希望能够设计/渲染它看起来像这样:

    Car: (o) Yes
         (X) No
         (o) Maybe

  Train: (o) Yes
         (o) No
         (X) Maybe

Address: [An input text box     ]

考虑到 CSS，我想我希望左侧的标签(例如“Car”和“Bus”)位于某种 text-align: right 中。阻止？

我不知道右边的单选按钮:在某种 <span> 中也许，用 "display: inline-block" ？或者 "white-space: pre" ？

您会推荐哪种 block 级标签(例如 <p> 或 <div>)和/或其他标签(例如 <span> 或 <br/>)？

编辑:

下面的怎么样。

HTML 使用 <legend> ，就像 HTML 应该和建议的那样 the alistapart article :

<fieldset>
<legend>Car</legend>
<label><input type="radio" name="car" value="yes"/> Yes</label>
<label><input type="radio" name="car" value="no"/> No</label>
<label><input type="radio" name="car" value="maybe"/> Maybe</label>
</fieldset>

使 Firefox 更容易访问/定位 <legend> 的内容, 将其放在 <span> 中:

<fieldset>
<legend><span>Car</span></legend>
<label><input type="radio" name="car" value="yes"/> Yes</label>
<label><input type="radio" name="car" value="no"/> No</label>
<label><input type="radio" name="car" value="maybe"/> Maybe</label>
</fieldset>

然后，使用 Legends of Style Revised 中描述的特定于浏览器的 CSS将 span 的内容定位到字段集的左侧。

CSS 真的必须如此复杂且特定于浏览器吗？理论上应该工作的最简单的 CSS 是什么，而不是实际与那些不完美的浏览器一起工作所需的更复杂的 CSS？如果<legend>很难定位那么好的(语义)替代品是什么？

最佳答案

这就是我通常对单选按钮和复选框所做的事情。它允许关联文本在大多数浏览器中无需执行任何操作即可单击，这使得表单更易于使用。 CSS cursor 更改有助于提醒用户注意此功能。

CSS

label { cursor: pointer; }

HTML

<label><input type="radio" name="option" value="yes"> Yes</label>
<label><input type="radio" name="option" value="no"> No</label>
<label><input type="radio" name="option" value="maybe"> Maybe</label>

或者，对汽车使用 fieldset 图例，对单选按钮列表使用 ul:

<fieldset>
    <legend>Cars</legend>
    <ul class="radio-list">
        <li><label><input type="radio" name="option" value="yes"> Yes</label></li>
        <li><label><input type="radio" name="option" value="no"> No</label></li>
        <li><label><input type="radio" name="option" value="maybe"> Maybe</label></li>
    </ul>
<fieldset>

CSS

.radio-list li { list-style: none; }

将 fieldset/legend 样式化以在浏览器之间保持一致并不难；但是，如果您想要在 legend 周围添加边框，它确实需要一个 IE 条件。唯一需要的额外 HTML 是 legend 中的包装器 span。

CSS

<style>
    fieldset {
        position: relative;
        border: 1px solid #000;
        background: #f8f8f8;
        padding: 1.6em 10px 0px;
        margin: 0;
    }
    legend {
        position: absolute;
        font-weight: bold;
        font-size: 1.2em;
    }
    legend span {
        position: absolute;
        top: -1.1em;
        white-space: nowrap;
    }

    /* This isn't necessary, just here for list aesthetics */
    ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
</style>

<!--[if IE]>
    <style>
    legend {
        border-bottom: 1px solid #000;
    }
    </style>
<![endif]-->

HTML

<fieldset>
    <legend><span>Did you enjoy your SO experience?</span></legend>
    <form>
        <ul>
            <li><label><input type="radio" name="option" value="yes"> Yes</label></li>
            <li><label><input type="radio" name="option" value="no"> No</label></li>
            <li><label><input type="radio" name="option" value="maybe"> Maybe</label></li>
        </ul>
    </form>
</fieldset>

我能做到的就这么简单。 Live example

关于html - 与 <input type ="radio"> 一起使用的良好 HTML 和 CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3133506/