使用背景图像来渲染文本:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

然后你所要做的就是检测value == 0并应用正确的类:

 <input class="foo fooempty" value="" type="text" name="bar" />

jQuery JavaScript代码如下所示:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

你可以添加和删除一个特殊的CSS类，用JavaScript修改输入值onfocus/onblur:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

然后在CSS中指定一个样式提示类，例如:

input.hint {
    color: grey;
}

使用jQuery Form Notifier -它是最流行的jQuery插件之一，并且不会遭受其他jQuery建议的错误(例如，你可以自由地设置水印样式，而不用担心它会被保存到数据库中)。

jQuery水印直接在表单元素上使用单一的CSS样式(我注意到应用于水印的CSS字体大小属性也会影响文本框——这不是我想要的)。加上jQuery水印是你可以拖拽文本到字段(jQuery表单通知不允许这一点)。

另一个由其他人建议(在digitalbrush.com)，会意外地提交水印值到您的表单，所以我强烈建议反对它。

最好的方法是使用某种JavaScript库(如jQuery或YUI)将JavaScript事件连接起来，并将代码放在外部的.js文件中。

但如果你想要一个快速的解决方案，这是你的内联html解决方案:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

更新:增加了要求的着色材料。

你可以很容易地有一个框读“搜索”，然后当焦点改变到它有文本被删除。就像这样:

< onfocus =“这个输入。价值=“类型”=“文本”=“搜索”/>

当然，如果你这样做，用户自己的文本将消失时，他们点击。所以你可能想要使用更健壮的东西:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

简单的Html 'required'标签是有用的。

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

它指定在提交表单或按submit按钮之前必须填写输入字段。 这里有一个例子