Forms 如何使用<；标签>&书信电报；输入>；及<；span>；？

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

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

---

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

试试这样的方法：

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

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

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

---

虽然从技术上讲，您可以使用SPAN。。因为它是内联元素，标签和输入也是内联元素，所以它不太适合。内联元素并不是真正设计成容器的，所以使用诸如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>

名字
姓
字段集{
宽度：500px；
溢出：隐藏；
}
现场，左边{
浮动：左；
宽度：50%；
}
现场设置，对{
浮动：对；
宽度：50%；
}
字段集标签{
显示：块；
}
字段集块{
显示：块；
}

您的老师可能是说您应该将每对

输入和
标签
包装在
span
中。您认为应该使用
div
而不是
span
是非常正确的。当样式表被禁用时，只需告诉您的老师查看页面即可。基于类似的理由，你应该向她/他证明，他说不应该使用
表格
是完全错误的

要在不使用
table
标记的情况下编写表单（本质上是表格数据），只需使用
div
方法，并在
form
上使用CSS:set
display:table
，在
div
元素上使用
display:table row
的表格布局功能，和
显示：在
输入
和
标签
元素上的表格单元格
。根据需要添加填充和水平对齐。别忘了告诉你的老师，这只适用于足够现代的浏览器，而使用HTML
表的逻辑方法适用于所有浏览器。
你的例子确实与我自己会做的非常相似，这让我得出结论，我误解了老师告诉我的内容。[引用]你的老师可能是说，你应该把每一对输入和标签都用span[/quote]括起来。是的，我记得，那正是他告诉我的！然而，正如我在我的评论@Ricky S（你上面的帖子）中所写的，这让我得出了一个类似的结论，因此我认为我需要让我的老师再次向我解释，这样我就不会浪费你和其他用户的时间。我的老师还提到，如果表单字段填写正确，可以通过在输入字段后显示绿色的“ok”文本来向用户显示表单字段的功能-可能是在这里，
span
起作用了？@NeoFox1972，你的老师完全错了。你可以从他的错误中吸取教训，但这是要求解释的唯一原因。使用
span
（vs.
div
，或
table
标记）与显示字段是否已正确填写无关–这取决于客户端JavaScript，或者（如果提交表单并报告错误）服务器端表单处理程序。添加错误/正确性信号的方法取决于所使用的标记，但只是以一种微不足道的方式。
@Jukka
我必须承认，当他解释使用
标签制作表单的有用性时，
输入和
span
对我来说很有意义，这让我得出结论，我只是没有完全按照他对我说的话告诉你（我为此道歉）。我一回到学校就会和他谈谈，让他再解释一遍（如果有必要，我会记笔记），然后我会把他说的话发出去。除了教书，我的老师还有一家开发移动应用的小公司，我知道他有网络开发的学士学位，所以他一定知道他在说什么“@Jukka”，我已经和我的老师谈过了，让他解释为什么我们使用而不是。原因是语义更正确，这样做-使用，并将产生一个更干净的形式语义。其优点还在于，使用而不是将使整个表单区域交互，而不仅仅是输入字段，这在空间不大的移动应用程序中非常有用。我希望这个解释对你有帮助-很抱歉没有早点回来。这个解释毫无意义。使用
div
和
label
是独立的选择
div
与分组相关，
label
在功能上将标签与控件连接起来。其余的则更加晦涩难懂，只是试图用“移动应用”之类的流行语说服你。