我正在阅读HTML文件，我注意到其中一个表单中的表单元素放在DIV中。
例如。
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div>
<label for="email">Email Address:</label>
<input name="email" id="email" type="text" />
</div>
<div>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</div>
</fieldset>
我发现无论如何都不要将它们放在DIV中是完全没法的。
这是为了什么目的？
PS：CSS中没有涉及DIV的样式，所有样式都专门针对“标签”，“输入”等等。但没有一个针对DIV。
老实说，它对布局的唯一影响是一些微小的填充，也可以通过为元素指定一个特殊的类来设置，这就是全部。
如果它是造型，那么无论如何都没有设置相关的样式，那么为什么要把它放在第一位呢？
任何人都可以破解这背后的推理吗？
这是整个文件。
body {
font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
form {
font-size: 1.4em;
width: 30em;
}
/* fieldset styling */
fieldset {
margin: 1em 0; /* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
}
/* legend styling */
legend {
font-weight: bold;
}
form div {
padding: 0.4em 0;
}
/* style for labels */
label {
display: block;
}
/* style for required labels */
label .required {
font-size: 0.75em;
color:#760000;
}
input {
width: 20em;
}
textarea {
width: 100%;
height: 10em;
}
input.radio, input.submit {
width: auto;
}
#remember-me .radio {
margin-right: 1em;
}
/* style form elements on focus */
input[type="text"]:focus, textarea:focus {
background: #ffc;
}
-->
</style>
</head>
<body>
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div>
<label for="email">Email Address:</label>
<input name="email" id="email" type="text" />
</div>
<div>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</div>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text">Message: <em class="required">(Required)</em></label>
<textarea name="text" id="text" cols="20" rows="10"></textarea>
</div>
</fieldset>
<fieldset id="remember-me">
<legend>Remember Me</legend>
<div>
<label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
</div>
<div>
<label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
</div>
</fieldset>
<div>
<input id="submit" class="submit" name="submit" type="submit"/>
</div>
</form>
</body>
</html>
答案 0 :(得分：3)
除了样式之外，它还取决于标记的 doctype 。例如，使用 XHTML 1.0严格，<label>，<input>等表单元素必须包含在块级元素中，否则无法传递W3C Markup Validation Service 。但是，其他一些doctypes允许这样的标记。
多年前，在您的网站上拥有 W3C验证横幅是一种时尚。由于这种方式，许多人对验证反应过度。与此示例中一样，使用fieldset换行是有效的，但人们可能仍然使用div或p，就像人们避免使用table一样，即使提供表格数据也是如此。如果您正在查看一些遗留代码，这可能是一个可能的原因。
答案 1 :(得分：3)
在给定的情况下，div标记会使每个标签/输入对出现在自己的一行上，这通常是一个好主意。有许多替代方法可以实现这一点，但这是最简单的方法之一，也可以用于以后可能要添加的样式。
此外，在这种情况下，是使用标记的样式表规则：选择器form div匹配这些div元素，其规则设置为0.4em在每个div的内容之上和之下填充。
答案 2 :(得分：2)
目的通常是造型。例如，假设您希望标签位于输入上方，如下例所示。你想在右边找到同样的东西：
Label Here Label Here
Input Here Input Here
使用以下
来完成此操作非常困难<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
现在添加div s，你可以浮动div代替（以及添加其他CSS，如margin来分隔两列）：
<div> <-----Add styles to parent
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div> <-----Add styles to parent
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<强>更新
我看到了您的更新，也可以清除每个“行”，因为label和input默认为inline。看看小提琴的区别：
可能是开发人员认为它与div更加语义，可能是为了稍后设置布局更改并且他们想要像上面的示例那样添加CSS，它可能是他/她并不真正知道他们在做什么。这可能是一些事情
答案 3 :(得分：1)