Text in Border of input textbox

Question

Please click here for imageI would like to see something like text name on the border for input box.

The HTML is -

<input type="text"
       id="text creator"
       class="form-control" placeholder="text creator"
       name="object-creator"/> 

"text creator" should appear on the border.

Answer 1

我不确定你在边境＆＃34;的意思是什么，所以这里有两个我认为你可能会追求的选择。

使用字段集/图例，图例放置在＆＃34;边框＆＃34;该字段集。

<fieldset>
<legend>text creator</legend>

<input type="text"
   id="text creator"
   class="form-control"
   name="object-creator"/> 
</fieldset>

https://jsfiddle.net/jafarian/n5ocxpod/

或者，如果您只是在输入字段上方，请使用标签：

<label for="text creator">text creator</label><br>
<input type="text"
   id="text creator"
   class="form-control"
   name="object-creator"/> 

http://jsfiddle.net/jafarian/hjv74tdw/106/

基于注释进行编辑：这个仍然使用标签（而不是占位符），但是将标签对齐以重叠输入字段的边框，并将其z-index设置为显示在输入字段的顶部。确保您的背景颜色与您的标签背景相符！： https://jsfiddle.net/jafarian/04493rbu/