如何以更好的方式编写和设置HTML样式?

Question

满足新手编码员理解水平的解决这个问题的合理策略是什么？

以下是我到目前为止尝试编写简单表单的方法：1(完整编写html 2(设置样式3(尝试更改html以适应我尝试应用的样式方法

它不起作用，因为我对如何构建 html 层次结构以适应我在纸上的设计参数感到困惑。

这就是我所在的地方：https://codepen.io/tapzx2/pen/wvMgGGY

<div class="baby-form">
<h2>Class Signup</h2>
<form action="#" method="post">
<ul>
<li>
<input type="text" name="first-name" id="first-name">
<label for="first-name">First Name</label>
</li>
<li>
<input type="text" name="last-name" id="last-name">
<label for="last-name">Last Name</label>
</li>
<li>
<input type="email" name="email" id="email">
<label for"email">Email</label>
</li>
<li>
<button type="submit">Register</button>
</li>
</ul>
</form>

这就是我想去的地方：https://codepen.io/tapzx2/pen/qBbqxjX

<div class="content-container">
<h2>Class Signup</h2>
<div class="form-container">
<form>
<div class="question-container">
<div class="question">
<label for="first">First Name</label>
<input type="text" id="first" name="first">
</div>
<div class="question">
<label for="last">Last Name</label>
<input type="text" id="last" name="last">
</div>
<div class="question">
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
</div>
</div>
<button type="submit">Register</button>
</form>
</div>
</div>

Answer 1

我也为此挣扎了很长时间。我的CSS从来没有达到我想要的效果。实践是关键，但我发现在开始时，更容易采取"一般到具体"或方法和风格。

一旦你熟悉了CSS，你就可以在开始样式之前完成所有的HTML。同时，我建议您使用每个图层进行样式设置(见下文(。

例如，如果我想构建您给出的最终结果，我会做类似的事情......

1. 创建一个包含所有内容的包装器，因为所有内容都将居中。设置包装器的宽度、显示等。
2. 在包装器内，添加一个<form>。根据需要设置表单样式。
3. 在窗体内，添加一个<header>，在标题内添加一个<h_>标记。标题不是必需的，但它可以更轻松地在将来将其他元素添加到窗体顶部。
4. 在窗体内，创建一个后跟一个按钮<fieldset>。设置按钮样式。如果需要，您可以将按钮放在页脚中。
5. 在字段集中，创建 3 个输入包装器。每个都将包含一个标签和一个输入。设置包装器的样式。
6. 在每个包装器中添加标签和输入。根据需要设置这些字段集的样式并设置字段集的样式。

我喜欢分层向下工作，在层完成之前不要开始处理新的子元素。我从"一般"元素(例如主包装器(开始，然后朝着"细节"(例如标签、输入、按钮(努力。当您设置每个图层的样式时，请注意下一个图层中的内容。最终，您将了解需要哪些元素，以便您可以正确设置样式。

Answer 2

这样：

请参阅JS代码：访问每个表单元素只需要一个const(myForm(。

表单元素必然需要一个 name 属性(在提交中使用(，并且在 JS 中很容易匹配它们的使用来识别表单的每个元素

const myForm = document.getElementById('my-form')
myForm.onsubmit=e=>
{
e.preventDefault()
console.log(  'first-name = ', myForm['first-name'].value )
console.log(  'last-name = ', myForm['last-name'].value )
console.log(  'email = ', myForm.email.value )
}

#my-form {
width: 14em;
margin: 1em auto;
}
fieldset {
border: 1px solid lightblue;
padding: 1em .6em 0em .6em;
}
label {
display: block;
float: left;
clear: both;
min-width: 12em;
margin-bottom: 1em
}
button {
margin-top: 1em;
float: right;
}

<form action="#" method="post" id="my-form">
<fieldset>
<legend>Class Signup</legend>
<label>
First Name
<input type="text" name="first-name" >
</label>
<label>
Last Name 
<input type="text" name="last-name" >
</label>
<label>
Email Address
<input type="text" name="email" >
</label>
</fieldset>
<button type="submit">Register</button>
</form>