<!DOCTYPE html> <html lang="en"> <head> <title>The Pattern Attribute</title> </head> <body> <form action="examples/resources/submit.aspx"> Enter your phone number: <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="###-###-####" required /><br /><br /> Enter your credit card number: <input type="text" name="credit-card" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}" placeholder="####-####-####-####" required /><br /><br /> Enter a custom code (4 letters followed by 4 digits): <input type="text" name="custom-input" pattern="[a-zA-Z]{4}[0-9]{4}" required /><br /><br /> Enter a unique code (6 alphanumeric characters): <input type="text" name="custom-input" pattern="[a-zA-Z0-9]{6}" title="Please enter a valid 6-character code" required /><br /><br /> Enter your order number (starts with ORD-###): <input type="text" name="order-number" pattern="ORD-[0-9]{3}" title="Please enter a valid order number in the format ORD-###." required /><br /><br /> Enter a date in the format MM/DD/YYYY: <input type="text" name="custom-date" pattern="(0[1-9]|1[0-2])/(0[1-9]|[12]\d|3[01])/\d{4}" required /><br /><br /> Enter international phone number (with country code): (+##-##########) <input type="tel" name="phone2" pattern="\+\d{1,3}-\d{6,14}" title="Please enter a valid phone number with the country code" required /><br /><br /> Create a username (letters, digits, and underscores, 5 to 15 characters): <input type="text" name="username" pattern="[A-Za-z0-9_]{5,15}" title="Please enter a valid username with 5 to 15 characters, using letters, digits, and underscores." required /><br /><br /> Enter your email address: <input type="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}" required /><br /><br /> Enter a strong password (8 characters minimum, including atleast a upper and lower case letters and digits): <input type="password" name="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$" required /><br /><br /> <input type="submit" value="Submit" /> </form> </body> </html>