HTML5 Forms with Pattern Attribute

Using the Pattern Attribute for Form Validation.

by Raj Shekhar

HTML

<html !doctype>
    <head><title>HTML5 Form Pattern</title></head>
    
    <body>
        <form action="" method="post">  
            <label for="username">Create a Username: </label>  
            <input type="text"  
               name="username"  
               id="username"  
               placeholder="4 <> 10"  
               pattern="[A-Za-z]{4,10}"  
               autofocus  
               required>  
            <button type="submit">Go </button>  
        </form> 
    </body>
</html>

JavaScript

var a= document.querySelector('#username');
console.log(a.pattern)