Question

我想知道用标签和输入构建html表单的最佳解决方案是什么。

我过去常常使用float: left标签和float: right输入。并且每一行都有一个块clear: both。

但我不认为这些CSS属性是为了这样的东西而制作的。

那么其他解决方案是什么？表？

Answer 1

这真的取决于你希望表单看起来像什么。例如，如果您想要一个带边框的清晰网格，我建议使用表格。

要复制你拥有的东西，你可以这样做：

<label for='textbox'>Label</label><input type='text' id='textbox' />

然后这个css：

label { display: inline-block; width: 100px; }

这将使标签与输入元素保持在同一行，但会将其推到适当的距离。

就个人而言，我尽量避免使用浮动来对齐元素。我宁愿使用绝对位置并设置左或右和顶部或底部。对我来说漂浮就像要求浏览器为你做的那样，也许某些浏览器（咳嗽即咳嗽）会决定以不同的方式绘制它。

Answer 2

表单标记和CSS始终是个人选择。当然，从CSS的角度来看，在语义和技术上存在一些权利和错误，但肯定不是一个（甚至几个）＆＃34;对＆＃34;技术。

我个人的偏好是将标签向左浮动并在列表中包含我的输入，我个人认为这些输入比div或p标签更具语义性。

HTML：

<form>
    <fieldset>
        <ol>
            <li>
                <label for="input1">Label 1</label>
                <input type="text" name="input1" id="input1">
            </li>
            <li>
                <label for="input2">Label 2</label>
                <input type="text" name="input2" id="input2">
            </li>
            <li>
                <label for="input3">Label 3</label>
                <input type="text" name="input3" id="input3">
            </li>
        </ol>

        <button type="submit">Submit</button>
    </fieldset>
</form>

CSS：

li {
    clear: left;
    margin-bottom: 10px;    
}

label {
    float: left; /* You could use "display: inline-block;" instead. */
    margin-right: 10px;
    width: 80px;
}

Answer 3

表也是一种解决方案。

另外，Div有2个内部div（左和右）

或1 div，两个元素都有float：左边有margin-left。

在表单中构造html输入和标签的不同方法

3 个答案: