From eb8439966846e6922cd4e06931859ca1119a29ac Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Thu, 13 Aug 2020 11:03:48 +0530
Subject: [PATCH] Added inputs

---
 index.html        |  4 ++++
 inputs/index.html | 57 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 inputs/index.html
diff --git a/index.html b/index.html
index 601dcf0..7bc9274 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/inputs/index.html b/inputs/index.html
new file mode 100644
index 0000000..e869f96
--- /dev/null
+++ b/inputs/index.html
@@ -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>
\ No newline at end of file
