等号预期的弹簧形式 - Html

如果你有一些 HTML 表单的经验，你就应该知道，它们通常采用以下的形式：

<form>
  <label>
    Name:
    <input type="text" name="name">
  </label>
  <br>
  <label>
    Email:
    <input type="email" name="email">
  </label>
  <br>
  <label>
    Message:
    <textarea name="message"></textarea>
  </label>
  <br>
  <button type="submit">Send</button>
</form>

在表单的每个输入项后面，我们通常会有多余的 <br> 标签来创建一个换行符。

但是，这种方式并不优雅。它产生了许多多余的标签，这些标签只是为了使表单看起来像表格一样平坦。而且，由于我们使用了不必要的标签和样式，我们可能会遇到不必要的布局和间距问题。

相反，我们可以使用 "等号预期的弹簧" 方法，它的原理是在输入项之间使用 Flexbox 属性来创建一个更具灵活性的表单。

以下是一个例子：

<form class="form">
  <label>
    Name:
    <input type="text" name="name">
  </label>
  <label>
    Email:
    <input type="email" name="email">
  </label>
  <label>
    Message:
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>

<style>
  .form {
    display: flex;
    flex-direction: column;
  }
  label {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
  }
  input,
  textarea {
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #ccc;
  }
  button[type="submit"] {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
  }
</style>

我们使用 display: flex 和 flex-direction: column 属性来创建一个垂直排列的输入项组。我们还使用 display: flex 和 flex-direction: column 属性来在每个输入项的标签和表单控件之间创建一个垂直排列。

由于每个输入项都是 Flex 容器，我们可以很容易地对它们进行扩展和灵活排列，而不用担心其布局和样式的破坏。这使得我们可以更方便地修改表单的样式和布局。

此外，由于我们没有使用多余的标签和样式，我们的 HTML 代码看起来更加简洁和干净，不会出现布局和间距问题。

总之，采用 "等号预期的弹簧" 方法，可以为我们的表单带来很多便利性和灵活性。