initial

joplin notion extension/Web Development/CSS/Snippets/confirmation feature on button without js.md

@@ -0,0 +1,90 @@
+confirmation feature on button without js
+
+```html
+<form action="/register" method="POST">
+  <!-- Registration Fields -->
+  <label for="username">Username:</label>
+  <input type="text" id="username" name="username" required>
+
+  <label for="password">Password:</label>
+  <input type="password" id="password" name="password" required>
+
+  <!-- The CSS Hack Trigger -->
+  <div class="submit-wrapper">
+    <input type="checkbox" id="unlock-submit" class="toggle-gate">
+    <label for="unlock-submit" class="cover-button">Register</label>
+    <button type="submit" class="real-button">Confirm Registration</button> 
+  </div>
+</form>
+
+<style>
+  .submit-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  /* Hide the actual checkbox */
+  .toggle-gate {
+    display: none;
+  }
+  /* The fake button that sits on top */
+  .cover-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #007bff;
+    color: white;
+    text-align: center;
+    line-height: 35px;
+    cursor: pointer;
+    z-index: 2;
+  }
+  /* The real submit button hidden underneath */
+  .real-button {
+    padding: 8px 16px;
+    background: #28a745;
+    color: white;
+    border: none;
+    cursor: pointer;
+  }
+  /* When the fake button is clicked, it checks the box and hides itself */
+  .toggle-gate:checked ~ .cover-button {
+    display: none;
+  }
+</style>
+```
+
+tailwind
+
+```html
+<form action="/register" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md space-y-4">
+  <!-- Registration Fields -->
+  <div>
+    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
+    <input type="text" id="username" name="username" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+  </div>
+
+  <div>
+    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+    <input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+  </div>
+
+  <!-- The CSS Hack Trigger Container -->
+  <div class="relative inline-block w-full pt-2">
+    <!-- Hidden Checkbox using Tailwind's peer utility -->
+    <input type="checkbox" id="unlock-submit" class="peer hidden">
+    
+    <!-- First Click: The Fake Button Label -->
+    <label for="unlock-submit" class="absolute inset-x-0 bottom-0 top-2 flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md cursor-pointer z-10 transition-colors peer-checked:hidden">
+      Register
+    </label>
+    
+    <!-- Second Click: The Real Submit Button -->
+    <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-md transition-colors">
+      Confirm Registration
+    </button>
+  </div>
+</form>
+
+```