Add validations for the form fields

index.html

@@ -36,23 +36,23 @@
             <form id="form">
                 <div>
                     <label for="first-name" aria-label="first name">First name <span aria-label="required">*</span></label>
-                    <input type="text" id="first-name" name="first-name" required />
+                    <input type="text" id="first-name" name="first-name" maxlength="256" required />
 
                     <label for="email" aria-label="email">Email <span aria-label="required">*</span></label>
-                    <input type="email" id="email" name="email" required />
+                    <input type="email" id="email" name="email" maxlength="254" placeholder="cheese@inc.com" required />
 
                     <label for="password" aria-label="password">Password <span aria-label="required">*</span></label>
-                    <input type="password" id="password" name="password" required />
+                    <input type="password" id="password" name="password" minlength="8" maxlength="128" placeholder="Minimum of 8 characters" required />
                 </div>
                 <div>
                     <label for="last-name" aria-label="last name">Last name <span aria-label="required">*</span></label>
-                    <input type="text" id="last-name" name="last-name" required />
+                    <input type="text" id="last-name" name="last-name" maxlength="256" required />
 
                     <label for="phone" aria-label="phone">Phone number <span aria-label="required">*</span></label>
-                    <input type="tel" id="phone" name="phone" required />
+                    <input type="tel" id="phone" name="phone" pattern="([0-9]{10}) | ([0-9]{11})" minlength="10" maxlength="11" required />
 
                     <label for="confirm-password" aria-label="confirm password">Confirm password <span aria-label="required">*</span></label>
-                    <input type="confirm-password" id="confirm-password" name="confirm-password" required />
+                    <input type="confirm-password" id="confirm-password" name="confirm-password" minlength="8" maxlength="128" placeholder="Minimum of 8 characters" required />
                 </div>
             </form>
         </div>

styles.css

@@ -121,6 +121,7 @@ p, h1, h2, h3, h4, h5, h6 {
 #main > div:first-child {
     color: rgb(14, 14, 14);
     font-size: min(2vw, 25rem);
+    width: 85%;
 }
 
 #main > div:nth-child(2) {
@@ -161,6 +162,7 @@ input {
     height: 35px;
     border-radius: 4px;
     border: 1px solid gray;
+    display: block;
 }
 
 input:user-valid {