In Absatz Formularfeld mit dem Label unter

StackOverflow https://stackoverflow.com/questions/2740129

  •  02-10-2019
  •  | 
  •  

Frage

Ich mag ein Eingabefeld in der Mitte eines Absatzes haben, mit dem Etikett im kleineren Text darunter. Art wie: 

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

dachte ich, es wäre ziemlich einfach zu tun, aber mein Gehirn scheint nicht heute zu arbeiten. Ist es möglich, dies mit nur CSS und auf einfache Art und Weise genug zu tun, dass es zu verschiedenen Formen angepasst werden kann leicht?

War es hilfreich?

Lösung

Das ist, was ich tat, es ist nicht perfekt, aber zeigen Ihnen einen Weg zu gehen. 

<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>

Andere Tipps

Im Moment spektakulär einfach kommt mir in den Sinn.

Meine Alternative wäre die Standardeingabewerte auf „Kundenname“ zu setzen und „Item Name“ bezeichnet. Mit einem Hauch von JavaScript können Sie automatisch die Eingabe löschen, wenn der Benutzer aktiviert es. Eine zusätzliche bestreuen wird die Eingabe mit „Kundenname“ und „Item Name“ aufzufüllen, wenn die Eingabe leer gelassen wird, wenn der Benutzer Unschärfen es.

Achtung: Ich habe wenig Ahnung von JavaScript und seinen Cross-Browser-Kompatibilitätsproblemen. Zum Beispiel denke ich getElementsByClassName nicht in einigen Versionen von IE implementiert ist. Nehmen Sie diesen Code als ein Beispiel dafür, was ich meine, anstatt Produktionscode. 

<!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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top