如何將文本放入文本輸入的背景中？

Question

我有一個輸入，用戶將他們的汽車數量。當有新的動作時，則在輸入一個佔位符文字說「車號」。

但是當用戶編輯車型，那麼就沒有佔位但用戶投入形式的數量。我想提醒他們，此輸入用於設置「車號」，如下圖所示：

但是如何在輸入的背景上放置文本？我知道如何在背景上放置圖像，但是有什麼方法可以放置文字標籤嗎？

感謝

Answer 1

使用價值

<input name="test" value="i am pre entered text"></input> 

希望這有助於:)

Answer 2

您可以通過使用切緣陰性拉標籤到文本框中，但可以變得值繁瑣填充和邊距將根據字符串的長度而改變。

http://jsfiddle.net/T9kpc/

HTML：

<input class="input" type="text"> 
<label class="placeholder">car number</label> 

CSS：

.placeholder { 
    color:#aaa; 
    margin-left:-100px; /*the important part*/ 
    border-left:2px dotted #eee; 
    padding-left:10px 
} 
.input { 
    height:30px; 
    border-radius:4px; 
    width:200px; 
    border:1px solid #ddd; 
    padding:5px 100px 5px 10px; /*the important part*/ 
    font-size:16px; 
    outline:none; 
} 

大多數的上面是風格，但重要的部分是將標籤的負緣和輸入的填充。如果您沒有在輸入上放置足夠大的填充，那麼文本將與標籤重疊。

我也建議不要因爲通常形式，紅色表示現場錯誤和可能混淆用戶使用紅色的標籤顏色。有許多資源可以討論您可以查看的表單的最佳做法，下面是我通過快速搜索找到的一對夫婦。

https://ux.stackexchange.com/questions/9220/on-forms-is-inline-placeholder-text-better-than-a-label-outside-each-field

http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

Answer 3

剛剛與Z-堆疊和對input透明背景假的吧：

<div class="car"> 
    <label for="carnr">Car Number</label> 
    <input id="carnr" name="carnr" type="number"> 
</div> 

CSS：

.car { 
    position:relative; 
} 
.car input { 
    background:transparent; 
    border:1px solid #ccc; 
    border-radius:3px; 
    width:400px; 
    padding:4px 4px; 
} 
.car label { 
    color:red; 
    font-weight:bold; 
    position:absolute; 
    margin-top:3px; 
    width:380px; 
    text-align:right; 
} 

Sample here。

Answer 4

使用HTML佔位符。

<input type="text" placeholder="Car number"/>

這將顯示文本框內的文本。（Fiddle）