Robot/html-tips-tricks
1
0
Fork 0
mirror of https://github.com/atapas/html-tips-tricks.git synced 2024-11-16 00:38:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

Added inputs

Browse source
This commit is contained in:
Tapas Adhikary 2020-08-13 11:03:48 +05:30
parent f4933b9804
commit eb84399668
2 changed files with 61 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -15,6 +15,10 @@
<a href='./details/index.html'>
Details Tag</a> - Specify details that the user can open and close on demand
</li>
<li>
<a href='./inputs/index.html'>
Inputs</a> - Various useful tips
</li>
</ul>
</div>
</body>

57
inputs/index.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>HTML Tips and Tricks - Details Tag</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='../main.css'>
</head>
<body>
<div class="demo">
<h1>All about Inputs</h1>
<h2>Required</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>
<h2>Autofocus</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required autofocus>
<input type="submit">
</form>
<h2>Placeholder</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
<input type="submit">
</form>
<h2>E-mail</h2>
<form>
<label for="username">Username:</label>
<input id="email" name="email" type="email" />
<input type="submit">
</form>
<h2>Regex validations</h2>
<form>
<label for="username">Strong password($Password1234): </label>
<input type="password"
name="password"
id="password"
placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
<button type="submit"> Test </button>
</form>
</div>
</body>
</html>