Patterns attributes
1) Number Type
<input type="number"> <input>
elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries
Number type Example
<! Doctype html>
<html>
<body>
<h2>Number Type</h2>
<form>
Enter any number:
<input type="text" name="numbers"
pattern="[0-9]*" title="numbers only">
<input type="submit">
</form>
</body>
</html>
Number type output
2) Date type
<time>: The (Date) Time element
The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
Date type Example
<! Doctype html>
<html>
<body>
<h2>Date type</h2>
<form>
Enter any Date Format: DD.MM.YYYY: <br><br>
<input type="text" name="numbers"
pattern="(0[1-9]1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" title="Enter valid date"> <br><br>
<input type="submit">
</form>
</body>
</html>
Date type output
3)date type (2)
<time>: The (Date) Time element.
The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
Date type Example
<! Doctype html>
<html>
<body>
<h2>date type</h2>
<form>
Enter any Date Format YYYY MM DD <br><br>
<input type="text" name="numbers"
patterns (0-9)(4)-(0[1-01/012])-(0[1-910-920-9301])" title="Enter valid date"> <br> <br
<input type="submit">
</form>
</body>
</html>
Date type output
4) Range type
<input type="range">
The defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below. max - specifies the maximum value allowed.
Range type Example
<! Doctype html>
<html>
<body>
<h2>Range type</h2>
Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>
Satisfaction: <input type="range" size="2" name="satisfaction min="1" max="5" value="3">
</Body>
</html>
Range type output
5) iframe Tag
iframe Tag Example
iframe Tag output
