JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form_test_default_text">
    <label for="username">1.</label>
    <input type="text" name="username" default_text="Enter a username" readonly/><br/>
    <label for="email">2.</label>
    <input type="text" name="email" default_text="Email" />
    <br />
    <input type="submit" />
</form>

CSS

form {
    margin: 10px 0 0 20px;
}

label:not(:first-child) {
    margin-left: 20px;
}

input[type=text] {
    font-size:12px;
    margin-bottom: 5px;
}

input[default_text].empty {
    color : #ccc;
    font-style : italic;
}

JavaScript

$('input[default_text]').bind('focus', function() {
    // Clear out default message.
    if ($(this).hasClass('empty')) {
        $(this).val('');
        $(this).removeClass('empty');
    }
});

$('input[default_text]').bind('blur', function() {
    // Add back the default message if the value is empty.
    if ($(this).val() === '') {
        $(this).val($(this).attr('default_text'));
        $(this).addClass('empty');
    }
});

// Initialize.
$('input[default_text]').each(function(index, el) {
    $el = $(el);
    $el.val($el.attr('default_text'));
    $el.addClass('empty');
});

// Pre-process form example
$('#form_test_default_text').bind('submit', function() {
    // Clear out default_text values if empty.
    $('input[default_text].empty').val('');    

    return false;
});