Html 将表单元素放入div的目的是什么？_Html_Css

Html 将表单元素放入div的目的是什么？

html css

Html 将表单元素放入div的目的是什么？,html,css,Html,Css,我正在阅读一个HTML文件，我注意到其中一个表单中的表单元素被放置在一个DIV中比如说 <fieldset> <legend>Your Contact Details</legend> <div> <label for="author">Name: <em class="required">(Required)</em></label> <input name=

我正在阅读一个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>


您的联系方式
姓名：（必填）
电邮地址：
网址：

我观察到，无论如何，不把它们放在沙发里是完全可以的

这样做的目的是什么

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>

正文{
字体：62.5%/1“Myriad Pro”，Frutiger，“Lucida Grande”，“Lucida Sans”，“Lucida Sans Unicode”，Verdana，Sans serif；
}
形式{
字号：1.4em；
宽度：30em；
}
/*字段集样式*/
字段集{
边距：1em 0；/*将字段集隔开一点*/
填充：1em；
边框：1px实心#ccc；
}
/*图例样式*/
传奇{
字体大小：粗体；
}
表格组{
填充：0.4em0；
}
/*标签样式*/
标签{
显示：块；
}
/*所需标签的样式*/
标签。必填项{
字体大小：0.75em；
颜色：#760000；
}
输入{
宽度：20em；
}
文本区{
宽度：100%；
高度：10公分；
}
input.radio，input.submit{
宽度：自动；
}
#记得我，收音机{
右边距：1米；
}
/*焦点上的样式形式元素*/
输入[type=“text”]：焦点，文本区域：焦点{
背景：#ffc；
}
-->
您的联系方式
姓名：（必填）
电邮地址：
网址：
评论
信息：（必选）
记得我吗
对
不

通常用于造型。例如，假设您希望标签位于输入上方，如下面的示例所示。你想要一份同样的东西，就在右边：

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

更新

我看到了您的更新，也可能是清除每个“行”，因为默认情况下

标签

s和

输入

s是

内联的

。查看小提琴中的差异：

这可能是因为开发人员认为使用

div

s更具语义，可能是为了以后设置一些东西，以防布局发生变化，并且他们希望像上面的示例那样添加CSS，这可能是因为他/她不知道自己在做什么。除了样式之外，它还取决于标记的doctype。例如，使用XHTML1.0 Strict，像

，

这样的表单元素必须包装在块级元素中，否则它无法通过。但是，其他一些doctype允许这样的标记

几年前，在你的网站上设置一个W3C验证横幅是一种时尚。由于这种时尚，许多人对验证反应过度。就像在这个例子中，使用

字段集

包装是有效的，但是人们仍然可以使用

div

或

，就像人们避免使用

表格

一样，即使显示表格数据。如果您正在查看一些遗留代码，这可能是一个原因。

@Johnsy-Omniscient:是的，有时开发人员会添加额外的标记来更新站点，以适应未来的技术。当响应性设计是新的；我们添加了额外的div等，以帮助在移动时进行转换。在给定的情况下，

div

标记使每个标签/输入对显示在自己的一行上，这通常是一个好主意。有许多替代方法可以实现这一点，但这是最简单的方法之一，对于以后可能要添加的样式也很有用

此外，在本例中有一个使用标记的样式表规则：选择器

form div

匹配这些

div

元素，它的规则在每个

div

的内容上下设置0.4em填充，以使表单更灵活地移动或对整个表单进行任何更改。这是一个测验吗？问别人做了什么有什么意义？从这个问题中，我了解到这不是您正在开发的站点所面临的问题。@TsahiAsher这是一个与代码结构的推理和目的有关的问题。作为一个有抱负的开发人员，我们不一定会毫无目的地创建元素，而这正是我现在正试图在您和其他人的帮助下发现的。但是开发人员没有做到这一点。相反，他所做的几乎与标签输入相似，但他将标签的“显示”设置为块。我将继续假设开发人员出于“语义”和“未来”的原因将其设置为这种方式。即使删除了

div

标记，问题中的代码仍然是有效的XHTML 1.0 Strict。

fieldset

元素是块级的。@JukkaK.Korpela我想说的是，由于这种方式，许多人对验证反应过度。如本例中所示，使用字段集包装是有效的，但人们可能仍然使用div或p标记，就像人们即使显示表格数据也避免使用table一样。

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