gpt4 book ai didi

html - 将表单元素放入 DIV 的目的是什么?

转载 作者:太空宇宙 更新时间:2023-11-04 13:52:55 25 4
gpt4 key购买 nike

我正在阅读一个 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:针对 DIV 的 CSS 中没有涉及任何样式,所有样式都专门针对“标签”、“输入”等。但没有针对 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>

最佳答案

在给定的情况下,div 标记使每个标签/输入对出现在它自己的一行上,这通常是个好主意。有许多替代方法可以实现这一点,但这是最简单的方法之一,而且对于您以后可能要添加的样式也很有用。

此外,在这种情况下,一个使用标记的样式表规则:选择器 form div 匹配这些 div 元素,并且它的规则在每个 div 的内容上方和下方设置 0.4em 的填充。

关于html - 将表单元素放入 DIV 的目的是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27645028/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com