Question

我有一个这样的简单形式：

<form method="post" action="/registration">
    <label for="alias">Alias:</label>    
    <input type="text" name="alias" id="alias">
    <br>
    <label for="email">E-mail:</label>    
    <input type="text" name="email" id="email">
    <br>
    <input type="button" value="registger">
</form>

它工作正常，但我发现BR不应该用于此目的，因为它只是用于文本。

如果我删除BR，那么所有内容都将在一行上呈现，这是我不想要的。

使用CSS在表单中显示名称输入对的正确，最干净的方法是什么，如下所示：

Alias:  [__field__]
E-mail: [__field__]
  [SUBMIT BUTTON]

Answer 1

我使用div，它会将标签和输入放入自己的块中。

<form method="post" action="/registration">
    <div>
        <label for="alias">Alias:</label>    
        <input type="text" name="alias" id="alias">
    </div>
    <div>
        <label for="email">E-mail:</label>    
        <input type="text" name="email" id="email">
    </div>
    <input type="button" value="registger">
</form>

Answer 2

我通常会将输入放在标签内（因此当您单击标签时，它会聚焦输入），然后告诉标签为display: block;。

所以，

<form method="post" action="/registration">
  <label for="alias">
    Alias: <input type="text" name="alias" id="alias">
  </label>    
  <label for="email">
    E-mail: <input type="text" name="email" id="email">
  </label>
  <input type="button" value="registger">
</form>

然后做：

label[for], // just selects labels that have the "for" attribute.
input[type="button"] {
  display: block;
  // And a bottom margin for good measure :)
  margin: 0 0 10px; // shorthand for margin-bottom
}

那应该能得到你想要的东西。

Answer 3

您可以将$与相应的CSS一起使用：

＆＃13;

div

＆＃13;

.myFrm {
  width: 250px;
}

input[type=text] {
  float: right;
}

.form-group {
  margin-bottom: 10px;
}

.form-group::after {
  content: "";
  clear: both;
  display: table;
}

＆＃13;

Answer 4

您可以在标签和输入周围使用容器div来对它们进行分组，或者确保将“display：block”添加到标签和输入元素中。

如果您需要输入左侧的标签，请用容器div包装两者，并为您提供更多的定位控制，您可以将标签浮动并输入到左侧或使用flexbox。

Answer 5

我会用一点css来做这个伎俩。给每个标签一个显示：block;

label {
   display: block;
}

Answer 6

你问：

在a中显示名称输入对的正确，最干净的方法是什么？用CSS形式

我认为您的问题与性能，代码效率和可维护性有关。由于仅改变HTML结构并不能解决不同视口中的响应问题，因此添加CSS可能会具有渲染阻塞功能，但它确实可以使您的应用程序为移动响应做好准备。这就是我的看法：

form {
  display: inline-block;
}

label {
  margin: 10px;
  font-weight: 600;
}

input{
  position: absolute;
  left: 15%;
}

input[type=button]{
  top: 4%;
}

请注意，对于移动视口，您可能希望使用媒体查询调整相对度量。所以这里的问题不是编写更少的代码，而是编写应用程序的主要要求。

Get a plunk for this here

Answer 7

你所拥有的是一份清单。

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists

http://reisio.com/temp/form1.html

使用什么而不是标签？

7 个答案: