与<input type ="radio">一起使用的HTML和CSS好吗？

Question

什么是<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"？

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

---

编辑:

以下怎么样？

<legend>像HTML一样,HTML使用和alistapart文章中的建议:

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

然后,使用"已修改样式的传奇"中描述的特定于浏览器的CSS将跨度的内容定位到字段集的左侧.

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

Answer 1

这就是我通常使用单选按钮和复选框.它允许相关文本在大多数浏览器中可以点击而无需进行任何工作,这使得表单更容易使用.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一致并不太难; 但是,如果你想要一个边界,它确实需要一个IE条件legend.唯一的额外HTML必要的是一个包装span内legend.

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>

这就像我能得到它一样简单.实例

Answer 2

我会用<fieldset>。

在“ Legends of Style Revished<label> ”一文中描述了在不同浏览器中定位 a 的困难；因此，我可能不会使用 a 并尝试定位它，而是在.<label><span class="label"><fieldset>