<!DOCTYPE html>
<html>
<head>
<title>html5 patterns val</title>
</head>
<body>
<form action="">
Email :
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
Min Char:
<input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
Search:
<input type="search" name="search" pattern="[^'\x22]+" title="Invalid input" required>
Password:
<input type="password" name="pw" pattern=".{6,}" title="Six or more characters" required>
Country code:
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" required>
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include http://" required>
Telephone numbers:
<input id="phone" placeholder="000-000-0000" title="XXX-XXX-XXXX" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
Telephone numbers:
<input type="tel" pattern="^\d{4}-\d{3}-\d{4}$" >
Alpha-Numeric Values without space:
<input type="text" pattern="[a-zA-Z0-9]+" >
Alpha-Numeric Values with space:
<input type="text" pattern="[a-zA-Z0-9\s]+" >
Alpha-Numeric Values with .net, C++ , C# :
<input type="text" pattern="[a-zA-Z0-9\s.,#+]+" >
@ sign:
<input type="text" pattern="^@[A-Za-z0-9_]{1,15}$" >
Hex Color number:
<input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" >
validate email :
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
readonly email :
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" readonly = "readonly" value="ramesh@example.com" />
autofocus
<input type="text" id="partNum" pattern="[A-Z]{3}[0-9]{4}" autofocus />
Your favorite bike:
<datalist id="bike">
<select name="bike">
<option value="pulser">black</option>
<option value="dio">red</option>
<option value="activa">white</option>
<option value="fz">black</option>
<!-- … -->
</select>
please specify your bike:
</datalist>
<input type="text" name="bike" list="bike">
Address:
<input type="text" name="Address" size="25" pattern="[a-zA-Z0-9 ]{2,35}]" title="Title" required/>
<input type="text" name="email" placeholder="ramesh@example.com" disabled = "disabled">
Number:
<input type= "number" name= "five_steps" max= "30" min= "0" step= "5" value= "10" /> step:5
Area Code:
<input type= "text" name= "area_code" pattern= "[0-9] {3}" title= "Three digit area code."/>
custom message
<input type="email" required oninvalid="this.setCustomValidity('custom message')"/>
accepts document files
<input type="file" name="file" accept=".doc,.docx,.pdf,.txt" Required>
Select option validate
<select name="select" required>
<option value="">-select-</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<input type="submit">
</form>
</body>
</html>
<html>
<head>
<title>html5 patterns val</title>
</head>
<body>
<form action="">
Email :
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
Min Char:
<input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
Search:
<input type="search" name="search" pattern="[^'\x22]+" title="Invalid input" required>
Password:
<input type="password" name="pw" pattern=".{6,}" title="Six or more characters" required>
Country code:
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" required>
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include http://" required>
Telephone numbers:
<input id="phone" placeholder="000-000-0000" title="XXX-XXX-XXXX" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
Telephone numbers:
<input type="tel" pattern="^\d{4}-\d{3}-\d{4}$" >
Alpha-Numeric Values without space:
<input type="text" pattern="[a-zA-Z0-9]+" >
Alpha-Numeric Values with space:
<input type="text" pattern="[a-zA-Z0-9\s]+" >
Alpha-Numeric Values with .net, C++ , C# :
<input type="text" pattern="[a-zA-Z0-9\s.,#+]+" >
@ sign:
<input type="text" pattern="^@[A-Za-z0-9_]{1,15}$" >
Hex Color number:
<input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" >
validate email :
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
readonly email :
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" readonly = "readonly" value="ramesh@example.com" />
autofocus
<input type="text" id="partNum" pattern="[A-Z]{3}[0-9]{4}" autofocus />
Your favorite bike:
<datalist id="bike">
<select name="bike">
<option value="pulser">black</option>
<option value="dio">red</option>
<option value="activa">white</option>
<option value="fz">black</option>
<!-- … -->
</select>
please specify your bike:
</datalist>
<input type="text" name="bike" list="bike">
Address:
<input type="text" name="Address" size="25" pattern="[a-zA-Z0-9 ]{2,35}]" title="Title" required/>
<input type="text" name="email" placeholder="ramesh@example.com" disabled = "disabled">
Number:
<input type= "number" name= "five_steps" max= "30" min= "0" step= "5" value= "10" /> step:5
Area Code:
<input type= "text" name= "area_code" pattern= "[0-9] {3}" title= "Three digit area code."/>
custom message
<input type="email" required oninvalid="this.setCustomValidity('custom message')"/>
accepts document files
<input type="file" name="file" accept=".doc,.docx,.pdf,.txt" Required>
Select option validate
<select name="select" required>
<option value="">-select-</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<input type="submit">
</form>
</body>
</html>
This comment has been removed by the author.
ReplyDelete