将textarea包装在HTML元素周围

Question

有什么办法可以在HTML元素周围包装textarea HTML元素吗？在我的情况下,我想将textarea包裹在标签周围.

这是我试图实现的目标:

Label name: *********
*********************
*********************

其中*是文本区域.

Answer 1

您不能在内部使用HTML标记，<textarea>但可以使用绝对定位将标签放置在所需位置。

然后，您可以使用CSS text-indent属性（有关MDN的更多信息）来偏移textarea的第一行，以使标签不与之重叠。

div {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  width: 115px;
  line-height: 1em;
}

textarea {
  text-indent: 120px;
  margin: 0;
  line-height: 1.2em;
}

<div>
  <label>This is the label :</label>
  <textarea cols="30" rows="10"></textarea>
</div>