Advance form

A simple, beautiful form input, editor and uploader.

Password (Required javascript)

Input password with show button

visibility visibility_off
visibility visibility_off 
                
<!-- input password filled -->
<div class="relative z-0 [&.show_.off]:!block [&.show_.on]:!hidden">
  <input type="password" aria-label="inputpassword" name="inputpassword" id="inputpassword" class="w-full h-12 block leading-5 relative pt-3 px-4 rounded-t text-gray-800 bg-gray-100 dark:bg-gray-700 border-b focus:border-b-2 border-gray-500 dark:border-gray-400 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:focus:border-primary-200 peer" placeholder=" " value="">
  <label for="inputpassword" class="absolute text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-2.5 scale-75 top-2.5 z-10 origin-[0] left-4 peer-focus:left-4 peer-focus:text-primary-600 dark:peer-focus:text-primary-200 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-2.5 peer-invalid:text-error-600 dark:peer-invalid:text-error-200">Password</label>

  <div title="Show or hide password" onclick="passwordFunc()" class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 cursor-pointer">
    <span class="material-symbols-outlined on">visibility</span>
    <span class="material-symbols-outlined off !hidden">visibility_off</span>
  </div>
</div>

<!-- input password outlined -->
<div class="relative z-0 [&.show_.off]:!block [&.show_.on]:!hidden">
  <input type="password" aria-label="inputpass" name="inputpass" id="inputpass" class="w-full h-12 block leading-5 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" placeholder=" " value="">

  <label for="inputpass" class="absolute tracking-[.03125em] text-gray-500 dark:text-gray-400 bg-neutral-10 dark:bg-neutral-900 duration-300 transform px-1 -translate-y-6 scale-75 top-2.5 z-10 origin-[0] left-4 peer-focus:left-4 peer-focus:text-primary-600 dark:peer-focus:text-primary-200 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:bg-neutral-10 dark:peer-focus:bg-neutral-900 peer-focus:px-1 peer-invalid:text-error-600 dark:peer-invalid:text-error-200">Password</label>

  <div title="Show or hide password" onclick="passwordFunc2()" class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 cursor-pointer">
    <span class="material-symbols-outlined on">visibility</span>
    <span class="material-symbols-outlined off !hidden">visibility_off</span>
  </div>
</div>

<script>
function passwordFunc() {
  const x = document.getElementById("inputpassword");
  const parent = x.parentNode;

  if (x.type === "password") {
    x.type = "text";
    parent.classList.add("show");
  } else {
    x.type = "password";
    parent.classList.remove("show");
  }
}
</script>

Input OTP (Required javascript)

Input OTP verification

                
<!-- Input OTP -->
<div id="otp" class="flex space-x-6 mt-2">
  <input type="text" maxlength="1" class="w-12 leading-5 h-12 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" id="exampleInputotp1" required>
  <input type="text" maxlength="1" class="w-12 leading-5 h-12 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" id="exampleInputotp2" required>
  <input type="text" maxlength="1" class="w-12 leading-5 h-12 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" id="exampleInputotp3" required>
  <input type="text" maxlength="1" class="w-12 leading-5 h-12 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200 peer" id="exampleInputotp4" required>
</div>

<!-- OTP javascript -->
<script>
function OTPInput() {
const inputs = document.querySelectorAll('#otp > *[id]');
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('keydown', function(event) {
    if (event.key === "Backspace") {
      inputs[i].value = '';
      if (i !== 0)
        inputs[i - 1].focus();
    } else {
      if (i === inputs.length - 1 && inputs[i].value !== '') {
        return true;
      } else if (event.keyCode > 47 && event.keyCode < 58) {
        inputs[i].value = event.key;
        if (i !== inputs.length - 1)
          inputs[i + 1].focus();
        event.preventDefault();
      } else if (event.keyCode > 64 && event.keyCode < 91) {
        inputs[i].value = String.fromCharCode(event.keyCode);
        if (i !== inputs.length - 1)
          inputs[i + 1].focus();
        event.preventDefault();
      }
    }
  });
}
}
OTPInput();
</script>

Text Editor (Required plugins)

Example textarea with editor

                  
                    <!-- text editor -->
                    <textarea class="texteditor w-full leading-5 relative pt-6 px-4 rounded-t text-gray-800 bg-gray-100 dark:bg-gray-700 border-b focus:border-b-2 border-gray-500 dark:border-gray-400 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:focus:border-primary-200" id="texteditor" rows="3"></textarea>

Upload Images (Required plugins)

Example image uploader with dropzone

Drag & drop images here
+ 
                
                  <!-- Uploader -->
                  <div id="imageUpload" class="dropzone multiple-dropzone !border !border-gray-200 dark:!border-gray-700 !rounded-lg mb-6">
                    <div class="dz-message" data-dz-message>
                      <div class="pre-upload flex flex-col justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="mx-auto text-gray-500 inline-block w-10 h-10 bi bi-cloud-arrow-up" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"></path>
                          <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"></path>
                        </svg>
                        <div class="py-3"><span>Drag & drop images here</span></div>
                      </div>
                      <div class="pre-upload text-center">
                        <button class="py-1.5 px-3 inline-block text-center rounded leading-normal text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0 mr-2 dark:bg-gray-300">Browse file</button>
                      </div>
                      <span class="after-upload">+</span>
                    </div>
                  </div>