2

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

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

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

我问的几个原因是：

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

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

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

我希望我的表格布局对你们中的大多数人有意义！

4

3 回答 3

2

尝试这样的事情：

<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;
}
于 2013-09-27T22:53:05.630 回答
0

尽管您可以在技术上使用 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>
于 2013-09-27T22:58:12.247 回答
0

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

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

于 2013-09-28T05:16:41.090 回答