如何在<form> ... </form>中更改样式

Question

我不是Web开发人员，但是我有一个与HTML / Javascript有关的任务。请把我当初学者。问题是由于某种原因，我需要将<label ><input ><button >放在<form></form>环境中。但是，它看起来比以前更凌乱。我想知道如何使样式与以前相同。

原始代码：

<div style="display:flex;flex-direction:row">
    <label id="email_label" for="email" style="padding-right:5px">Email:</label>
    <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
    <button id="ack" type="submit">Submit</button>
</div>

看起来像这样：

新代码：

<div style="display:flex;flex-direction:row">
  <form>
    <label id="email_label" for="email" style="padding-right:5px">Email:</label>
    <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
    <button id="ack" type="submit">Submit</button>
  </form>
</div>

如下所示：

当我单击其他一些按钮时，它变为：

我不知道为什么会改变。

Answer 1

这是因为display: flex现在仅定位到form。 像这样更改代码：

<form style="display:flex;flex-direction:row">
    <label id="email_label" for="email" style="padding-right:5px">Email:</label>
    <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
    <button id="ack" type="submit">Submit</button>
</form>

现在它将再次定位标签，输入和按钮元素。

正如Jaromanda所说： 您也可以将div放在这样的表单中：

<form>
  <div style="display:flex;flex-direction:row">
    <label id="email_label" for="email" style="padding-right:5px">Email:</label>
    <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
    <button id="ack" type="submit">Submit</button>
  </div>
</form>

Answer 2

您的样式在元素树层次结构中高一级，并且不会影响label，input和button元素，因为它们的父级不再包含必需的样式。因此，将样式添加到父项。无论如何，您应该在表单设计的顶层添加form标签

<form>
  <div style="display:flex;flex-direction:row">
     <label id="email_label" for="email" style="padding-right:5px">Email:</label>
     <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
     <button id="ack" type="submit">Submit</button>
  </div>
</form>