Validation

Provide valuable, actionable feedback to your users with HTML5 form validation

                
                  <form class="flex flex-wrap flex-row -mx-4">
                    <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
                      <label for="inputEmail4" class="inline-block mb-2">Email</label>
                      <input type="email" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputEmail4" required>
                    </div>
                    <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
                      <label for="inputPassword4" class="inline-block mb-2">Password</label>
                      <input type="password" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputPassword4" required>
                    </div>
                    <div class="flex-shrink max-w-full px-4 w-full mb-6">
                      <label for="inputAddress" class="inline-block mb-2">Address</label>
                      <input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputAddress" placeholder="1234 Main St" required>
                    </div>
                    <div class="flex-shrink max-w-full px-4 w-full mb-6">
                      <label for="inputAddress2" class="inline-block mb-2">Address 2</label>
                      <input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputAddress2" placeholder="Apartment, studio, or floor" required>
                    </div>
                    <div class="flex-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
                      <label for="inputCity" class="inline-block mb-2">City</label>
                      <input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputCity" required>
                    </div>
                    <div class="flex-shrink max-w-full px-4 w-full md:w-1/3 mb-6">
                      <label for="inputState" class="inline-block mb-2">State</label>
                      <select id="inputState" class="inline-block w-full leading-5 relative py-3 pl-3 pr-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 select-caret appearance-none dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" required>
                        <option>Choose...</option>
                        <option>...</option>
                      </select>
                    </div>
                    <div class="flex-shrink max-w-full px-4 w-full md:w-1/6 mb-6">
                      <label for="inputZip" class="inline-block mb-2">Zip</label>
                      <input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputZip" required>
                    </div>
                    <div class="flex-shrink max-w-full px-4 w-full mb-6">
                      <label class="flex items-center">
                        <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-blue-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded focus:outline-none" required>
                        <span class="text-gray-700 ltr:ml-2 rtl:mr-2">I agree to the Terms of Use</span>
                      </label>
                    </div>
                    <div class="flex-shrink max-w-full px-4 w-full">
                      <button type="submit" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Register now</button>
                    </div>
                  </form>