샘플

http://jysoft.co.kr/sample/input_text/

HTML

    <h1>input 박스에 안내 문구 넣기</h1>

    <div class="sector">
        <h2>1. 텍스트이용</h2>
        <div class="exam_area1">
            <input type="text" name="input_exam1" id="input_exam1" class="normal_box" />
            <label for="input_exam1"><span>10자</span> 이상 입력하세요.</label>
        </div>
    </div>

    <div class="sector">
        <h2>2.백그라운드이용</h2>
        <input type="text" name="input_exam2" class="normal_box txt_bg" />
    </div>

jQuery

<script type="text/javascript">
$(function() {

    /**** 1. 텍스트이용 ****/
    var input1 = $("input[name=input_exam1]");
    var label1 = $("label[for=input_exam1]");

    input1.focus(function(){
        label1.css("display","none");
    });

    input1.blur( function() {
        if(!$.trim(input1.val())) label1.css("display","block");
        else label1.css("display","none");
    });

    /**** 2. 백그라운드이용 ****/
    var input2 = $("input[name=input_exam2]");

    input2.focus(function(){
        input2.removeClass("txt_bg");
    });

    input2.blur( function() {
        if(!$.trim(input2.val())) input2.addClass("txt_bg");
        else input2.removeClass("txt_bg");
    });

});
</script>

body, input {font-family:dotum; font-size:12px; color:#1c1d24;}

.sector {padding:20px 10px;}
input.normal_box {margin:0; padding:5px 0 4px 5px; width:200px; border:1px solid #cccccc;}
.tip {color:#777777;}

.exam_area1 {position:relative;}
.exam_area1 label {position:absolute; top:6px; left:5px; top:8px\9;}
.exam_area1 label span {color:#f7651e;}
.exam_area1 .normal_box {}

.txt_bg {background:url(http://jysoft.co.kr/sample/input_text/img/txt_notice.gif) no-repeat 5px 6px;}