Как изменить стиль в <form>... </form>

Question

Я не веб-разработчик, но у меня есть задача, связанная с 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>

Теперь он снова нацелится на элементы label, input и button.

Как сказал 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>