Question

我正在做这个HTML5表单，但当我在浏览器上检查它（在本地运行它）时，它会显示le标签旁边的输入空间旁边的标签。继承人代码：

<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

正如Kolink指出的那样，表单显示内嵌，因为其中的所有元素都是 inline 。

您不应该使用<br/>或<p>，因为它们并非用于此目的（您不应该使用牙刷清洁马桶）。每个字段最好使用<ul> <li> <form> <ul> <li> <label for="something">some label</label> <input id="something" /> </li> </ul> </form>。这是有道理的，因为表单只是一个列表字段。

加价将是这样的：

<div>

或者，您可以继续使用<p>（但不是{{1}}）。

Answer 2

好吧，<label>是内联的，<input>是内联的，<textarea>是内联的...

如果您的所有元素都是内联的，那么您的整体形式当然是。

尝试使用<br />标记，或者<p>...</p>。

Answer 3

Kolink是对的。另一种解决方法是添加

display: block;

使用CSS

到所有输入和标签元素。

我的HTML5表单显示内联且没有换行符

3 个答案: