Two of the nice HTML5 attributes for input tags are required and placeholder.

http://www.w3schools.com/html5/att_input_required.asp
http://www.w3schools.com/tags/att_input_placeholder.asp

Unfortunately, IE doesn’t support them. This code snippet allows a the required and placeholder attributes to act the same under IE as they do with browsers that support them. It also allows styling of disabled inputs and textareas under IE.

The only other code is some CSS that defines a class named “required” which is used to highlight the empty inputs.

.invalid {
        color: #800;
}
.required {
        border: 1px solid #800 !important;
}
.ie [placeholder] {
        color: #aaa;
}
.ie [placeholder]:focus {
        color: #000;
}
.ie [disabled]{
        color: #333;
        background-color: #efefef;
}

document.body.className += " ie";

if(!String.prototype.trim) {
        String.prototype.trim = function () {
                return this.replace(/^\s+|\s+$/,'');
        };
}

var form = document.querySelector('form');

if (form !== null) {
        var disabled_inputs = document.querySelectorAll("[disabled]");
        var required_inputs = document.querySelectorAll("[required]");
        var placeholders = document.querySelectorAll("[placeholder]");

        clearPlaceholder = function(evt) {
                var element;
                if (evt.target) {
                        evt.target.value = "";
                        element = document.getElementById(evt.target.id);
                } else if (evt.srcElement) {
                                evt.srcElement.value = "";
                                element = evt.srcElement;
                        } else {
                                return;
                        }
                element.className = element.className.replace(" required", "");
                if (element.removeEventListener) {
                        element.removeEventListener('focus', clearPlaceholder);
                } else if (element.detachEvent) {
                        element.detachEvent('onfocus', clearPlaceholder);
                }
        }

        var e;
        var l = placeholders.length;
        for (var p = 0; p < l; p++) {
                if (typeof placeholders[p].id !== undefined) {
                        e = document.getElementById(placeholders[p].id);
                        if (e !== null) {
                                e.value = e.getAttribute("placeholder");
                                if (e.addEventListener) {
                                        e.addEventListener('focus', clearPlaceholder);
                                } else if (e.attachEvent) {
                                        e.attachEvent('onfocus',clearPlaceholder);
                                }
                        }
                }
        }


        var e;
        var l = disabled_inputs.length;
        for (var d = 0; d < l; d++) {
                if (typeof disabled_inputs[d].id !== undefined) {
                        e = document.getElementById(disabled_inputs[d].id);
                        if (e !== null) {
                                e.removeAttribute("disabled");
                                e.className += " disabled";
                        }
                }
        }

        form.onsubmit = function() {
                var completed = true;
                var value = "";
                var inputs = document.querySelectorAll("input, textarea");
                var e, l = inputs.length;
                var req = /required/;
                var disabled = /disabled/;
                for (var i = 0; i < l; i++) {
                        e = document.getElementById(inputs[i].id);
                        if (e.hasAttribute("required")) {
                                if (!e.hasAttribute("placeholder")) {
                                        e.setAttribute("placeholder", "");
                                }
                                e.value = e.value.trim();
                                if ((e.value === "") || (e.value === e.getAttribute("placeholder"))) {
                                        e.value = e.getAttribute("placeholder");
                                        if (!req.test(e.className)) {
                                                e.className += " required";
                                                if (e.addEventListener) {
                                                        e.addEventListener('focus', clearPlaceholder);
                                                } else if (e.attachEvent) {
                                                        e.attachEvent('onfocus',clearPlaceholder);
                                                }
                                        }
                                        completed = false;
                                }
                        }
                        if (disabled.test(e.className)) {
                                e.setAttribute("disabled");
                                e.className = e.className.replace(" disabled", "");
                        }
                }
                return completed;
        }
}