JSFiddle - React, Tailwind, and code Playground

by Zoxon

HTML

<div class="form">
    <form method="post" action="/ru/faq/send">
        <div class="item">
            <div class="for-input">
                <div class="text">
                    <input type="text" value="Ваше имя" id="name" name="name">
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="item">
            <div class="for-input">
                <div class="text">
                    <input type="text" value="Ваш e-mail" id="email" name="email">
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="item">
            <div class="for-input">
                <div class="textarea">
                    <textarea cols="80" rows="24" id="question" name="question">Текст Вашего вопроса</textarea>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="item  captcha">
            <div class="for-input">
                <div class="text-mini"> <a class="captcha-refresh" title="Дайте другой код!" href="#"><img id="captcha_image" alt="Секретный код!" src="/ru/captcha/width/110/height/31/216489102"></a>

                    <input width="110" type="text" height="31" class="text" value="Введите символы с картинки" id="captcha" name="captcha">
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="item">
            <div class="button">
                <input type="submit" value="Отправить">
            </div> <a href="#" class="cancel">Отмена</a>

            <div class="clear"></div>
        </div>
    </form>
</div>

JavaScript

// JQ Simple placeholder function
var placeholder = function (seletor, placeholder) {
    $(seletor).focus(function () {
        if ($(this).val() == placeholder) {
            $(this).val('');
        }
    });
    $(seletor).focusout(function () {
        if ($(this).val() == '') {
            $(this).val(placeholder);
        }
    });
}

placeholder('.form #name', "Ваше имя");
placeholder('.form #email', "Ваш e-mail");
placeholder('.form #question', "Текст Вашего вопроса");
placeholder('.form #captcha', "Введите символы с картинки");