Question

我在解决这个问题时遇到了问题。

这是我的HTML

<form>
    <p><label for="comp-name">Name:</label>
        <input type="text" name="comp-name"></input>
    </p>
    <p>
        <label for="company-address">Address:</label>
        <textarea name="company-address"></textarea>
    </p>
    <p>
        <label for="postcode">Postcode:</label>
        <input type="text" name="postcode"></input>
    </p>
    <p>
        <label for="phone">Phone Number:</label>
        <input type="text" name="phone"></input>
    </p>
    <p>
        <label for="email">Email:</label>
        <input type="text" name="email"></input>
    </p>
</form>

这是我希望表单看起来像： enter image description here

here is the jsfiddle link.

很难弄清楚如何将标签放在输入/文本区域的左上角。

Answer 1

如果我理解正确，那就简单了：

label {
    vertical-align: top;
}

应该给你想要的结果。

小提琴：http://jsfiddle.net/N7e67/2/

Answer 2

您可以将标签放在表格的左栏中，将字段放在右侧，然后将它们放在单元格中

<table>
    <tr>
        <td>(label)</td>
        <td>(input)</td>
    </tr>
    ...
</table>

Answer 3

您可以使用此代码来定位对象： style =“z-index：1; left：-3px; top：202px; position：absolute; height：132px; width：494px”

根据表单设计更改左侧，顶部，高度和宽度。

<label for="comp-name" style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px>Company Name:</label>

Answer 4

您可以尝试使用此样板http://www.csskarma.com/lab/contactForm/或本教程http://designfestival.com/position-text-labels-on-forms-using%C2%A0css/

PS：为了您的信息，标签for属性应引用输入的id。
PPS：你可能会发现这篇文章很有意思http://www.lukew.com/ff/entry.asp?1502

Answer 5

尝试将标签和输入类型放在div标签

中

<p><div><label for="comp-name">Company Name:</label></div>
    <div> <input type="text" name="comp-name"></input></div>
 </p>

这应该对你有所帮助。如果这不符合您的期望，请详细说明您想看到的内容。

Answer 6

最简单的方法是将<input>放在<label>

内

<div>
  <label for="comp-name">Company Name: <input type="text" name="comp-name" />
  </label>
</div>

Answer 7

您有两个用于放置标签和输入的选项。

1）。您可以将标签和输入作为兄弟姐妹彼此相邻放置。

<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">

2）您可以将input元素放置在标签内，以便标签成为标签的父元素，输入成为标签的子元素。

<label>Do you like cheese?
  <input type="checkbox" name="cheese">
</label>

两个解决方案都是有效的HTML according to MDN，但是当您寻求解决方案时，您需要通过在输入元素和id上添加for来显式地将标签链接到输入元素标签元素的属性。
当您选择第二个选项时，您不需要这样做，因为DOM自动（由于父子关系）知道标签和元素彼此相关。 我将考虑第二种解决方案的明显优势。

注意。 使用CSS可以为这些解决方案之一获得所需的样式结果，因此我不会将其用作在1和2之间进行选择的参数。

如何定位与输入字段相关的标签标签

7 个答案: