Question

我想在一个段落的中间有一个输入框，标签下面有一个较小的文字。有点像：

Hello [________________], This is to inform you 
       (Customer Name)
that the [____________] you ordered is no longer
          (Item Name)
available.

我认为这样做很容易，但我的大脑今天似乎没有用。是否有可能只使用CSS，并以一种简单的方式，它可以很容易地适应不同的形式？

Answer 1

这就是我的所作所为，它并不完美，但为您指明了一条路。

<html>
<head>
<style>
.input {
    position: relative;
    display: inline-block;
    height: 1.8em;
}
.input label {
    display: block;
    font-size: 60%;
    font-weight: bold;
    position: absolute;
    text-align: center;
    width: 100%;
}
input {
    border: none;
    border-bottom: 1px solid black;
}
</style>
</head>
<body>
<form action="" method="post">
    Hello
    <div class="input">
        <input type="text" name="customer" id="customer" />
        <label for="customer">(Customer name)</label>
    </div>,
    this is to inform you that the
    <div class="input">
        <input type="text" name="item" id="item" />
        <label for="item">(Item name)</label>
    </div>,
    you order is no longer available.
</form>
</body>
</html>

Answer 2

没有什么比我想象的更简单了。

我的另一种方法是将默认输入值分别设置为“客户名称”和“项目名称”。使用一些JavaScript，您可以在用户聚焦时自动清除输入。如果输入在用户模糊时保持为空，则额外的洒水将使用“客户名称”和“项目名称”重新填充输入。

警告：我对JavaScript及其跨浏览器兼容性问题一无所知。例如，我认为在某些版本的IE中没有实现getElementsByClassName。以此代码为例，我的意思是生产代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Inline form</title>
  <script type="text/javascript">
    var valueHints = []
    window.onload = function() {
      var inputs = document.getElementsByClassName("value-hint");
      for (var i = 0; i < inputs.length; ++i) {
        valueHints[inputs[i].id] = inputs[i].value;
        inputs[i].onfocus = function() {
          if (valueHints[this.id] == this.value) {
            this.value = "";
          }
        }
        inputs[i].onblur = function() {
          if (this.value == "") {
            this.value = valueHints[this.id];
          }
        }
      }
    }
  </script>
  <style type="text/css">
    .value-hint {
      color:#999999;
    }
  </style>
</head>
<body>
  <p>Hello <input class="value-hint" id="customer" type="text" value="Customer Name"></span>, This is to inform you that the <input class="value-hint" id="item" type="text" value="Item Name"> you ordered is no longer available.</p>
</body>
</html>

在段落表单字段下面带有标签

2 个答案: