如何使用 <label> <input> 和 <span> 制作 HTML 表单？

Question

我使用表格在 HTML 中制作了一个表格，效果很好，但是，我的老师告诉我，从表格制作表格不再是正确的方法，我应该使用：

<form>
 <label></label>
 <input>
</form>

但他也提到了一些关于使用<span></span> 的事情，我猜这正是我有点困惑的地方，因为我应该在哪里使用它 - 即。我应该把<label> 和<input> 放在<span></span> 之间吗？

我问的几个原因是：

1. 我认为自己在 HTML 方面不是很精通
2. 我会使用<div></div> 包裹<label> 和<input>，然后使用css 将其放在我希望它出现在网页上的位置。

关于我要创建的表单，我希望它看起来像这样：

[Firstname] [lastname]
[textfield] [textfield]
[Street]    [zip-code]  [city]
[textfield] [textfield] [textfield]
[E-mail]    [Phone]
[textfield] [textfield]
[message]
[textarea]

我希望我的表单布局对你们大多数人来说都有意义！

Answer 1

试试这样的：

<form action="action.php">
  <label for="firstName">First Name</label>
  <input type="text" name="fname" id="firstName"><br>

  <label for="lastName">First Name</label>
  <input type="text" name="lname" id="lastName"><br>
  ....
</form>

你可以使用一些像这样的css来排列它：

label{
      width: 100px;
      text-align:left;
}

Answer 2

虽然从技术上讲您可以使用 SPAN.. 因为它是一个内联元素，LABEL 和 INPUT 也是如此，但它不太适合。内联元素并不是真正设计为容器，因此使用块级元素（如 DIV）将是一种更好的结构化方式。

除此之外，为了使其对齐，您将进入 CSS 的 relms 以浮动您的元素。

所以只有以下几行：

<form action="">
    <fieldset>
        <div class="left">
            <label for="FirstName">First Name</label>
            <input type="text" name="FirstName" id="FirstName">
        </div>
        <div class="right">
            <label for="LastName">Last Name</label>
            <input type="text" name="LastName" id="LastName">
        </div>
    </fieldset>
</form>

<style type="text/css">

fieldset {
    width:500px;
    overflow:hidden;
}

fieldset .left {
    float:left;
    width:50%;
}
fieldset .right {
    float:right;
    width:50%;
}
fieldset label {
    display:block;
}
fieldset block {
    display:block;
}
</style>

Answer 3

您的老师可能的意思是您应该将每对input 和label 包装在span 中。您认为应该使用 div 而不是 span 是完全正确的。只需告诉您的老师在禁用样式表时查看页面即可。基于类似的理由，你应该证明他/她说不应该使用 table 是完全错误的。

要在不使用table 标记的情况下编写表单（本质上是表格数据），只需使用div 方法并使用CSS 的表格布局功能：在form 上设置display: table， display: table-row 在 div 元素上，display: table-cell 在 input 和 label 元素上。根据需要添加填充和水平对齐。不要忘记告诉您的老师，这仅适用于足够现代的浏览器，而使用 HTML table 的逻辑方法适用于所有浏览器。