Simple HTML5 Form Hacks

Tuesday 10th, Apr, 2018 | #

This is a guide to the best HTML5 form input hacks.

Allow enter only number

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

showing placeholder for input type=“date” field

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

Force Require two form fields to match with HTML5?

<p>Password:</p>
<input name="password" required="required" type="password" id="password"/>
<p>Confirm Password:</p>
<input
    name="password_confirm"
    required="required"
    type="password"
    id="password_confirm"
    oninput="check(this)"/>
<script language='javascript' type='text/javascript'>
    function check(input) {
        if (input.value != document.getElementById('password').value) {
            input.setCustomValidity('Password Must be Matching.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>
<br/><br/>
<input type="submit"/>