Question

我已经使用表格制作了一个HTML格式，但是，我的老师告诉我，从表格制作表格不再是正确的方法，而是我应该使用：

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

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

我问的一些原因是：

对于HTML
我只是使用<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的内容来浮动你的元素。

仅此而已：

<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的表格布局功能：设置display: table form上的display: table-row，div元素上的display: table-cell以及input和label元素上的table。根据需要添加填充和水平对齐。不要忘记告知您的老师，这只适用于足够现代的浏览器，而使用HTML {{1}}的逻辑方法适用于所有浏览器。

如何使用<label> <input />和<span>？</span> </label>创建HTML表单

3 个答案: