Моя форма HTML5 отображает в строке и без разрывов строк

Question

Я делаю эту форму HTML5, но когда я проверяю ее в браузере (запускаю локально), она отображает метку рядом с полем ввода рядом с меткой файла и так далее. вот код:

<form>      
    <label for="name">Nombre:</label>
    <input type="text" id="name" placeholder="Ingresa tu Nombre" required />
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="Ingresa tu e-mail " required  />
    <label for="message">Mensage:</label>
    <textarea id="message" placeholder="Ingresa tu Mensaje" required></textarea>
    <input type="submit" value="Envia tu mensage" >
</form>

я должен использовать <br />? Я уже проверил на других веб-страницах, и они не используют его спасибо.

Answer 1

Как указал Колинк, форма отображает inline , поскольку все элементы внутри нее inline .

Вы не должны использовать <br/> или <p>, поскольку они не предназначены для этой цели ( Вы не должны использовать зубную щетку для чистки туалета ).Лучше использовать <ul> с <li> для каждого поля.Это имеет смысл, поскольку форма - это не что иное, как список полей.

Разметка будет выглядеть следующим образом:

<form>
 <ul>
   <li>
     <label for="something">some label</label>
     <input id="something" />
   </li>
 </ul>
</form>

В качестве альтернативы, вы можете пойти дальше.и используйте также <div> (но не <p>).

Answer 2

Ну, <label> встроен, <input> встроен, <textarea> встроен ...

Если все ваши элементы встроены, конечно, ваша общая форма будет.

Попробуйте использовать тег <br /> или, возможно, <p>...</p>.

Answer 3

Колинк правильный.Еще один способ решить эту проблему - добавить

display: block;

ко всем элементам ввода и надписи, используя CSS.