If you're using HTML5 the Placeholder attribute is the way to go.
If not just grab one of the many watermark scripts out there for jQuery or Javascript (e.g. jQuery Watermark.
EDIT
One manual way to do what you want with jQuery and CSS:
// CSS
#name{color:#ccc;}
// HTML
// jQuery
$(document).ready(function() {
$('#name').bind('focus', function() {
if ($(this).val() == 'Edit Name') {
$(this).val('John Doe').css('color', '#000');
}
});
});
Put the jQuery section in the code above into the
section of your HTML document and you should be good to go.