fix: Update checkbox elements to use Bootstrap classes for consistent styling (#4412)

app/core/src/main/resources/templates/adminSettings.html

@@ -302,8 +302,8 @@
               
               <div class="data-form-group" id="checkboxContainer">
                 <div class="form-check">
-                  <input type="checkbox" class="form-check-input" id="forceChange" name="forceChange">
-                  <label class="form-check-label" for="forceChange" th:text="#{adminUserSettings.forceChange}">Force user to change username/password on login</label>
+                  <input id="forceChange" name="forceChange" type="checkbox">
+                  <label for="forceChange" th:text="#{adminUserSettings.forceChange}">Force user to change username/password on login</label>
                 </div>
               </div>
               

app/core/src/main/resources/templates/auto-split-pdf.html

@@ -29,7 +29,7 @@
                 th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
               </div>
               <div class="form-check ms-3">
-                <input type="checkbox" name="duplexMode" id="duplexMode">
+                <input id="duplexMode" name="duplexMode" type="checkbox">
                 <label for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
               </div>
               <p>

app/core/src/main/resources/templates/convert/eml-to-pdf.html

@@ -26,15 +26,15 @@
               </div>
               
                       <div class="form-check mb-3">
-                <input type="checkbox" class="form-check-input" name="downloadHtml" id="downloadHtml">
-                <label class="form-check-label" for="downloadHtml" th:text="#{EMLToPDF.downloadHtml}"></label>
+                        <input id="downloadHtml" name="downloadHtml" type="checkbox">
+                        <label for="downloadHtml" th:text="#{EMLToPDF.downloadHtml}"></label>
                 <div class="form-text" th:text="#{EMLToPDF.downloadHtmlHelp}"></div>
               </div>
               
                       <div id="pdfOnlyOptions">
                         <div class="form-check mb-3">
-                  <input type="checkbox" class="form-check-input" name="includeAttachments" id="includeAttachments" checked>
-                  <label class="form-check-label" for="includeAttachments" th:text="#{EMLToPDF.includeAttachments}"></label>
+                          <input checked id="includeAttachments" name="includeAttachments" type="checkbox">
+                          <label for="includeAttachments" th:text="#{EMLToPDF.includeAttachments}"></label>
                 </div>
                 
                 <div class="mb-3">

app/core/src/main/resources/templates/convert/img-to-pdf.html

@@ -36,7 +36,7 @@
               </div>
 
               <div class="form-check ms-3">
-                <input type="checkbox" name="autoRotate" id="autoRotate">
+                <input id="autoRotate" name="autoRotate" type="checkbox">
                 <label for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
               </div>
               <div class="mb-3">

app/core/src/main/resources/templates/convert/pdf-to-img.html

@@ -73,9 +73,9 @@
                   <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
                 </select>
               </div>
-              <div class="mb-3 form-check">
-                <input class="form-check-input" type="checkbox" id="includeAnnotations" name="includeAnnotations">
-                <label class="form-check-label" for="includeAnnotations" th:text="#{pdfToImage.includeAnnotations}"></label>
+              <div class="form-check mb-3">
+                <input id="includeAnnotations" name="includeAnnotations" type="checkbox">
+                <label for="includeAnnotations" th:text="#{pdfToImage.includeAnnotations}"></label>
               </div>
               <div class="mb-3">
                 <label for="dpi">DPI:</label>

app/core/src/main/resources/templates/edit-table-of-contents.html

@@ -33,13 +33,12 @@
                   th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
                 </div>
 
-                <div class="mb-3 form-check">
+                <div class="form-check mb-3">
                   <input type="checkbox"
-                    class="form-check-input"
                     id="replaceExisting"
                     name="replaceExisting"
                     checked>
-                  <label class="form-check-label"
+                  <label
                     for="replaceExisting"
                     th:text="#{editTableOfContents.replaceExisting}"></label>
                   <input type="hidden"

app/core/src/main/resources/templates/fragments/navbar.html

@@ -284,11 +284,11 @@
             <span id="zipThresholdValue" class="ms-2"></span>
           </div>
           <div class="form-check mb-3">
-            <input type="checkbox" id="boredWaiting" th:title="#{settings.bored.help}">
+            <input id="boredWaiting" th:title="#{settings.bored.help}" type="checkbox">
             <label for="boredWaiting" th:text="#{bored}"></label>
           </div>
           <div class="form-check mb-3">
-            <input type="checkbox" id="cacheInputs" th:title="#{settings.cacheInputs.help}">
+            <input id="cacheInputs" th:title="#{settings.cacheInputs.help}" type="checkbox">
             <label for="cacheInputs" th:text="#{settings.cacheInputs.name}"></label>
           </div>
 

app/core/src/main/resources/templates/home.html

@@ -152,7 +152,7 @@
         </div>
         <div class="modal-footer">
           <div class="form-check mb-3">
-            <input type="checkbox" id="dontShowAgain">
+            <input id="dontShowAgain" type="checkbox">
             <label for="dontShowAgain" th:text="#{survey.dontShowAgain}">Don't show again</label>
           </div>
 

app/core/src/main/resources/templates/login.html

@@ -130,7 +130,7 @@
           </div>
 
           <div class="form-check m-2 mb-3">
-            <input type="checkbox" name="remember-me" id="remember-me">
+            <input id="remember-me" name="remember-me" type="checkbox">
             <label for="remember-me" th:text="#{login.rememberme}"></label>
           </div>
           <button type="submit" class="w-100 btn btn-lg btn-primary" th:text="#{login.signin}">Sign in</button>

app/core/src/main/resources/templates/merge-pdfs.html

@@ -27,13 +27,13 @@
                   th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=true, accept='application/pdf')}">
                 </div>
               </div>
-              <div class="mb-3">
-                <input type="checkbox" name="removeCertSign" id="removeCertSign">
+              <div class="form-check mb-3">
+                <input id="removeCertSign" name="removeCertSign" type="checkbox">
                 <label for="removeCertSign" th:text="#{merge.removeCertSign}">Remove digital signature in the merged
                   file?</label>
               </div>
-              <div class="mb-3">
-                <input type="checkbox" name="generateToc" id="generateToc">
+              <div class="form-check mb-3">
+                <input id="generateToc" name="generateToc" type="checkbox">
                 <label for="generateToc" th:text="#{merge.generateToc}">Generate table of contents in the merged file?</label>
               </div>
               <div class="mb-3">

app/core/src/main/resources/templates/misc/change-metadata.html

@@ -19,56 +19,56 @@
               <form method="post" id="form1" enctype="multipart/form-data" th:action="@{'/api/v1/misc/update-metadata'}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
                 <p class="text-muted" th:text="#{changeMetadata.selectText.1}"></p>
-                <div class="form-check mb-3-inline ms-3">
-                  <input type="checkbox" id="deleteAll" name="deleteAll">
+                <div class="form-check mb-3 ms-3">
+                  <input id="deleteAll" name="deleteAll" type="checkbox">
                   <label for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
                 </div>
-                <div class="form-check mb-3-inline ms-3">
-                  <input type="checkbox" id="customModeCheckbox">
+                <div class="form-check mb-3 ms-3">
+                  <input id="customModeCheckbox" type="checkbox">
                   <label for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
                 </div>
                 <div class="mb-3">
-                  <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label>
+                  <label for="author" th:text="#{changeMetadata.author}"></label>
                   <input type="text" class="form-control" id="author" name="author">
                 </div>
 
                 <div class="mb-3">
-                  <label class="form-check-label" for="creationDate" th:text="#{changeMetadata.creationDate}"></label>
+                  <label for="creationDate" th:text="#{changeMetadata.creationDate}"></label>
                   <input type="text" class="form-control" id="creationDate" name="creationDate" placeholder="2020/12/25 18:30:59">
                 </div>
 
                 <div class="mb-3">
-                  <label class="form-check-label" for="creator" th:text="#{changeMetadata.creator}"></label>
+                  <label for="creator" th:text="#{changeMetadata.creator}"></label>
                   <input type="text" class="form-control" id="creator" name="creator">
                 </div>
 
                 <div class="mb-3">
-                  <label class="form-check-label" for="keywords" th:text="#{changeMetadata.keywords}"></label>
+                  <label for="keywords" th:text="#{changeMetadata.keywords}"></label>
                   <input type="text" class="form-control" id="keywords" name="keywords">
                 </div>
 
                 <div class="mb-3">
-                  <label class="form-check-label" for="modificationDate" th:text="#{changeMetadata.modDate}"></label>
+                  <label for="modificationDate" th:text="#{changeMetadata.modDate}"></label>
                   <input type="text" class="form-control" id="modificationDate" name="modificationDate" placeholder="2020/12/25 18:30:59">
                 </div>
 
                 <div class="mb-3">
-                  <label class="form-check-label" for="producer" th:text="#{changeMetadata.producer}"></label>
+                  <label for="producer" th:text="#{changeMetadata.producer}"></label>
                   <input type="text" class="form-control" id="producer" name="producer">
                 </div>
 
                 <div class="mb-3">
-                  <label class="form-check-label" for="subject" th:text="#{changeMetadata.subject}"></label>
+                  <label for="subject" th:text="#{changeMetadata.subject}"></label>
                   <input type="text" class="form-control" id="subject" name="subject">
                 </div>
 
                 <div class="mb-3">
-                  <label class="form-check-label" for="title" th:text="#{changeMetadata.title}"></label>
+                  <label for="title" th:text="#{changeMetadata.title}"></label>
                   <input type="text" class="form-control" id="title" name="title">
                 </div>
 
                 <div class="mb-3">
-                  <label class="form-check-label" for="trapped" th:text="#{changeMetadata.trapped}"></label>
+                  <label for="trapped" th:text="#{changeMetadata.trapped}"></label>
                   <select class="form-control" id="trapped" name="trapped">
                     <option value="True" th:text="#{true}"></option>
                     <option value="False" th:text="#{false}" selected></option>

app/core/src/main/resources/templates/misc/compress-pdf.html

@@ -41,8 +41,8 @@
                   </select>
 
                   <div class="form-check mt-3">
-                    <input class="form-check-input" type="checkbox" name="grayscale" id="grayscaleCheck" value="true">
-                    <label class="form-check-label" for="grayscaleCheck" th:text="#{compress.grayscale.label}">
+                    <input id="grayscaleCheck" name="grayscale" type="checkbox" value="true">
+                    <label for="grayscaleCheck" th:text="#{compress.grayscale.label}">
                         Convert images to grayscale for better compression
                     </label>
                 </div>

app/core/src/main/resources/templates/misc/extract-images.html

@@ -27,8 +27,8 @@
                     <option value="gif">GIF</option>
                   </select>
                 </div>
-                <div class="mb-3">
-                  <input type="checkbox" name="allowDuplicates" id="allowDuplicates">
+                <div class="form-check mb-3">
+                  <input id="allowDuplicates" name="allowDuplicates" type="checkbox">
                   <label for="allowDuplicates" th:text="#{extractImages.allowDuplicates}"></label>
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{extractImages.submit}"></button>

app/core/src/main/resources/templates/misc/flatten.html

@@ -22,7 +22,7 @@
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
                 </div>
                 <div class="form-check ms-3">
-                  <input type="checkbox" id="flattenOnlyForms" name="flattenOnlyForms">
+                  <input id="flattenOnlyForms" name="flattenOnlyForms" type="checkbox">
                   <label for="flattenOnlyForms" th:text="#{flatten.flattenOnlyForms}" ></label>
                 </div>         
                 <br>

app/core/src/main/resources/templates/misc/ocr-pdf.html

@@ -55,7 +55,7 @@
                   <hr>
                   <div id="languages">
                     <div class="form-check" th:each="language, iterStat : ${languages}">
-                      <input type="checkbox" th:name="languages" th:value="${language}" required th:id="${'language-' + language}" onchange="handleLangSelection()" />
+                      <input onchange="handleLangSelection()" required th:id="${'language-' + language}" th:name="languages" th:value="${language}" type="checkbox" />
                       <label th:for="${'language-' + language}" th:text="${language}"></label>
                     </div>
                   </div>
@@ -82,24 +82,24 @@
                 <div class="mb-3" th:if="${@endpointConfiguration.isGroupEnabled('OCRmyPDF')}">
                   <label class="form-label">OCR Options</label>
                   <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="sidecar" name="sidecar" value="true">
-                    <label class="form-check-label" for="sidecar">Include OCR text in sidecar text file</label>
+                    <input id="sidecar" name="sidecar" type="checkbox" value="true">
+                    <label for="sidecar">Include OCR text in sidecar text file</label>
                   </div>
                   <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="deskew" name="deskew" value="true">
-                    <label class="form-check-label" for="deskew">Deskew input file</label>
+                    <input id="deskew" name="deskew" type="checkbox" value="true">
+                    <label for="deskew">Deskew input file</label>
                   </div>
                   <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="clean" name="clean" value="true">
-                    <label class="form-check-label" for="clean">Clean input file</label>
+                    <input id="clean" name="clean" type="checkbox" value="true">
+                    <label for="clean">Clean input file</label>
                   </div>
                   <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="cleanFinal" name="cleanFinal" value="true">
-                    <label class="form-check-label" for="cleanFinal">Clean final output</label>
+                    <input id="cleanFinal" name="cleanFinal" type="checkbox" value="true">
+                    <label for="cleanFinal">Clean final output</label>
                   </div>
                   <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="removeImagesAfter" name="removeImagesAfter" value="true">
-                    <label class="form-check-label" for="removeImagesAfter">Remove images from output PDF</label>
+                    <input id="removeImagesAfter" name="removeImagesAfter" type="checkbox" value="true">
+                    <label for="removeImagesAfter">Remove images from output PDF</label>
                   </div>
                 </div>
                 <br>

app/core/src/main/resources/templates/misc/scanner-effect.html

@@ -40,8 +40,8 @@
                   </select>
                 </div>
                 <div class="form-check mb-3">
-                  <input class="form-check-input" type="checkbox" id="advancedSettingsToggle">
-                  <label class="form-check-label" for="advancedSettingsToggle" th:text="#{scannerEffect.advancedSettings}"></label>
+                  <input id="advancedSettingsToggle" type="checkbox">
+                  <label for="advancedSettingsToggle" th:text="#{scannerEffect.advancedSettings}"></label>
                 </div>
                 <div id="advancedSettings" style="display:none; border:1px solid #eee; padding:1em; border-radius:8px; margin-bottom:1em;">
                   <div class="mb-3">
@@ -79,9 +79,9 @@
                     <label for="noise" class="form-label" th:text="#{scannerEffect.noise}"></label>
                     <input type="range" class="form-range" id="noise" name="noise" min="0" max="20" step="0.1" value="8.0">
                   </div>
-                  <div class="form-check mb-3">
-                    <input class="form-check-input" type="checkbox" id="yellowish" name="yellowish">
-                    <label class="form-check-label" for="yellowish" th:text="#{scannerEffect.yellowish}"></label>
+                  <div class="mb-3">
+                    <input id="yellowish" name="yellowish" type="checkbox">
+                    <label for="yellowish" th:text="#{scannerEffect.yellowish}"></label>
                   </div>
                   <div class="mb-3">
                     <label for="resolution" class="form-label" th:text="#{scannerEffect.resolution}"></label>

app/core/src/main/resources/templates/multi-page-layout.html

@@ -29,7 +29,7 @@
                   </select>
                 </div>
                 <div class="form-check mb-3">
-                  <input type="checkbox" id="addBorder" name="addBorder">
+                  <input id="addBorder" name="addBorder" type="checkbox">
                   <label for="addBorder" th:text="#{pageLayout.addBorder}"></label>
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pageLayout.submit}"></button>

app/core/src/main/resources/templates/security/add-password.html

@@ -41,35 +41,35 @@
                 <div class="mb-3">
                   <label class="mb-2" th:text="#{addPassword.selectText.5}"></label>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventAssembly" name="preventAssembly">
+                    <input id="preventAssembly" name="preventAssembly" type="checkbox">
                     <label for="preventAssembly" th:text="#{addPassword.selectText.6}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventExtractContent" name="preventExtractContent">
+                    <input id="preventExtractContent" name="preventExtractContent" type="checkbox">
                     <label for="preventExtractContent" th:text="#{addPassword.selectText.7}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventExtractForAccessibility" name="preventExtractForAccessibility">
+                    <input id="preventExtractForAccessibility" name="preventExtractForAccessibility" type="checkbox">
                     <label for="preventExtractForAccessibility" th:text="#{addPassword.selectText.8}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventFillInForm" name="preventFillInForm">
+                    <input id="preventFillInForm" name="preventFillInForm" type="checkbox">
                     <label for="preventFillInForm" th:text="#{addPassword.selectText.9}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventModify" name="preventModify">
+                    <input id="preventModify" name="preventModify" type="checkbox">
                     <label for="preventModify" th:text="#{addPassword.selectText.10}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventModifyAnnotations" name="preventModifyAnnotations">
+                    <input id="preventModifyAnnotations" name="preventModifyAnnotations" type="checkbox">
                     <label for="preventModifyAnnotations" th:text="#{addPassword.selectText.11}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventPrinting" name="preventPrinting">
+                    <input id="preventPrinting" name="preventPrinting" type="checkbox">
                     <label for="preventPrinting" th:text="#{addPassword.selectText.12}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventPrintingFaithful" name="preventPrintingFaithful">
+                    <input id="preventPrintingFaithful" name="preventPrintingFaithful" type="checkbox">
                     <label for="preventPrintingFaithful" th:text="#{addPassword.selectText.13}"></label>
                   </div>
                 </div>

app/core/src/main/resources/templates/security/add-watermark.html

@@ -127,8 +127,8 @@
                         </div>
 
 
-                        <div class="mb-3 form-check">
-                            <input type="checkbox" id="convertPDFToImage" name="convertPDFToImage">
+                        <div class="form-check mb-3">
+              <input id="convertPDFToImage" name="convertPDFToImage" type="checkbox">
               <label for="convertPDFToImage" th:text="#{watermark.selectText.10}"></label>
                         </div>
                         <div class="mb-3 text-left">

app/core/src/main/resources/templates/security/auto-redact.html

@@ -61,13 +61,13 @@
                   }
                 }
               </script>
-              <div class="mb-3 form-check">
-                <input type="checkbox" id="useRegex" name="useRegex">
+              <div class="form-check mb-3">
+                <input id="useRegex" name="useRegex" type="checkbox">
                 <label for="useRegex" th:text="#{autoRedact.useRegexLabel}"></label>
               </div>
 
-              <div class="mb-3 form-check">
-                <input type="checkbox" id="wholeWordSearch" name="wholeWordSearch">
+              <div class="form-check mb-3">
+                <input id="wholeWordSearch" name="wholeWordSearch" type="checkbox">
                 <label for="wholeWordSearch" th:text="#{autoRedact.wholeWordSearchLabel}"></label>
               </div>
 
@@ -77,8 +77,8 @@
                   value="0.1">
               </div>
 
-              <div class="mb-3 form-check">
-                <input type="checkbox" id="convertPDFToImage" name="convertPDFToImage" checked>
+              <div class="form-check mb-3">
+                <input checked id="convertPDFToImage" name="convertPDFToImage" type="checkbox">
                 <label for="convertPDFToImage" th:text="#{autoRedact.convertPDFToImageLabel}"></label>
               </div>
 

app/core/src/main/resources/templates/security/cert-sign.html

@@ -58,8 +58,8 @@
                   <input type="password" class="form-control" id="password" name="password">
                 </div>
                 <div class="form-check mb-3">
-                  <input type="checkbox" id="showSignature" name="showSignature">
-                  <label th:text="#{certSign.showSig}" for="showSignature"></label>
+                  <input id="showSignature" name="showSignature" type="checkbox">
+                  <label for="showSignature" th:text="#{certSign.showSig}"></label>
                 </div>
                 <div id="signatureDetails" style="display: none;">
                   <div class="mb-3">
@@ -75,8 +75,8 @@
                     <label for="pageNumber" th:text="#{pageNum}"></label> <input type="number" class="form-control" id="pageNumber" name="pageNumber" min="1" value="1">
                   </div>
                   <div class="form-check mb-3">
-                    <input type="checkbox" id="showLogo" name="showLogo" checked />
-                    <label th:text="#{certSign.showLogo}" for="showLogo"></label>
+                    <input checked id="showLogo" name="showLogo" type="checkbox" />
+                    <label for="showLogo" th:text="#{certSign.showLogo}"></label>
                   </div>
                 </div>
                 <div class="mb-3 text-left">

app/core/src/main/resources/templates/security/change-permissions.html

@@ -25,35 +25,35 @@
                 <div class="mb-3">
                   <label class="mb-2" th:text="#{permissions.selectText.2}"></label>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventAssembly" name="preventAssembly">
+                    <input id="preventAssembly" name="preventAssembly" type="checkbox">
                     <label for="preventAssembly" th:text="#{permissions.selectText.3}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventExtractContent" name="preventExtractContent">
+                    <input id="preventExtractContent" name="preventExtractContent" type="checkbox">
                     <label for="preventExtractContent" th:text="#{permissions.selectText.4}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventExtractForAccessibility" name="preventExtractForAccessibility">
+                    <input id="preventExtractForAccessibility" name="preventExtractForAccessibility" type="checkbox">
                     <label for="preventExtractForAccessibility" th:text="#{permissions.selectText.5}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventFillInForm" name="preventFillInForm">
+                    <input id="preventFillInForm" name="preventFillInForm" type="checkbox">
                     <label for="preventFillInForm" th:text="#{permissions.selectText.6}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventModify" name="preventModify">
+                    <input id="preventModify" name="preventModify" type="checkbox">
                     <label for="preventModify" th:text="#{permissions.selectText.7}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventModifyAnnotations" name="preventModifyAnnotations">
+                    <input id="preventModifyAnnotations" name="preventModifyAnnotations" type="checkbox">
                     <label for="preventModifyAnnotations" th:text="#{permissions.selectText.8}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventPrinting" name="preventPrinting">
+                    <input id="preventPrinting" name="preventPrinting" type="checkbox">
                     <label for="preventPrinting" th:text="#{permissions.selectText.9}"></label>
                   </div>
                   <div class="form-check ms-3">
-                    <input type="checkbox" id="preventPrintingFaithful" name="preventPrintingFaithful">
+                    <input id="preventPrintingFaithful" name="preventPrintingFaithful" type="checkbox">
                     <label for="preventPrintingFaithful" th:text="#{permissions.selectText.10}"></label>
                   </div>
                 </div>

app/core/src/main/resources/templates/security/redact.html

@@ -40,8 +40,8 @@
           <div
             th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, disableMultipleFiles=true, accept='application/pdf')}">
           </div>
-          <div class="mb-3 form-check d-none">
-            <input type="checkbox" id="convertPDFToImage" name="convertPDFToImage" checked>
+          <div class="form-check mb-3 d-none">
+            <input checked id="convertPDFToImage" name="convertPDFToImage" type="checkbox">
             <label for="convertPDFToImage" th:text="#{redact.convertPDFToImageLabel}"></label>
           </div>
           <div class="mb-3 d-none">

app/core/src/main/resources/templates/security/sanitize-pdf.html

@@ -21,27 +21,27 @@
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
                 </div>
                 <div class="form-check ms-3">
-                  <input type="checkbox" id="removeJavaScript" name="removeJavaScript" checked>
+                  <input checked id="removeJavaScript" name="removeJavaScript" type="checkbox">
                   <label for="removeJavaScript" th:text="#{sanitizePDF.selectText.1}"></label>
                 </div>
                 <div class="form-check ms-3">
-                  <input type="checkbox" id="removeEmbeddedFiles" name="removeEmbeddedFiles" checked>
+                  <input checked id="removeEmbeddedFiles" name="removeEmbeddedFiles" type="checkbox">
                   <label for="removeEmbeddedFiles" th:text="#{sanitizePDF.selectText.2}"></label>
                 </div>
                 <div class="form-check ms-3">
-                  <input type="checkbox" id="removeXMPMetadata" name="removeXMPMetadata">
+                  <input id="removeXMPMetadata" name="removeXMPMetadata" type="checkbox">
                   <label for="removeXMPMetadata" th:text="#{sanitizePDF.selectText.3}"></label>
                 </div>
                 <div class="form-check ms-3">
-                  <input type="checkbox" id="removeMetadata" name="removeMetadata">
+                  <input id="removeMetadata" name="removeMetadata" type="checkbox">
                   <label for="removeMetadata" th:text="#{sanitizePDF.selectText.6}"></label>
                 </div>
                 <div class="form-check ms-3">
-                  <input type="checkbox" id="removeLinks" name="removeLinks">
+                  <input id="removeLinks" name="removeLinks" type="checkbox">
                   <label for="removeLinks" th:text="#{sanitizePDF.selectText.4}"></label>
                 </div>
                 <div class="form-check ms-3">
-                  <input type="checkbox" id="removeFonts" name="removeFonts">
+                  <input id="removeFonts" name="removeFonts" type="checkbox">
                   <label for="removeFonts" th:text="#{sanitizePDF.selectText.5}"></label>
                 </div>
                 <br>

app/core/src/main/resources/templates/sign.html

@@ -135,7 +135,7 @@
               </div>
 
               <div class="tab-container" th:data-title="#{sign.text}">
-                <label class="form-check-label" for="sigText" th:text="#{text}"></label>
+                <label for="sigText" th:text="#{text}"></label>
                 <textarea class="form-control" id="sigText" name="sigText" rows="3"></textarea>
                 <label th:text="#{font}"></label>
                 <div id="signFontSelection" class="custom-select form-control">

app/core/src/main/resources/templates/split-pdf-by-chapters.html

@@ -32,16 +32,16 @@
                   required>
               </div>
 
-              <div class="mb-3 form-check">
-                <input type="checkbox" class="form-check-input" id="includeMetadata" name="includeMetadata">
-                <label class="form-check-label" for="includeMetadata"
+              <div class="form-check mb-3">
+                <input id="includeMetadata" name="includeMetadata" type="checkbox">
+                <label for="includeMetadata"
                   th:text="#{splitByChapters.includeMetadata}"></label>
                 <input type="hidden" name="includeMetadata" value="false" />
               </div>
 
-              <div class="mb-3 form-check">
-                <input type="checkbox" class="form-check-input" id="allowDuplicates" name="allowDuplicates">
-                <label class="form-check-label" for="allowDuplicates"
+              <div class="form-check mb-3">
+                <input id="allowDuplicates" name="allowDuplicates" type="checkbox">
+                <label for="allowDuplicates"
                   th:text="#{splitByChapters.allowDuplicates}"></label>
                 <input type="hidden" name="allowDuplicates" value="false" />
               </div>

app/core/src/main/resources/templates/split-pdf-by-sections.html

@@ -26,8 +26,8 @@
                 <label for="verticalDivisions" th:text="#{split-by-sections.vertical.label}">Vertical Divisions</label>
                 <input type="number" id="verticalDivisions" name="verticalDivisions" class="form-control" min="0" max="300" required value="1" th:placeholder="#{split-by-sections.vertical.placeholder}">
                 <br>
-                <div class="mb-3 form-check">
-                  <input type="checkbox" id="merge" name="merge">
+                <div class="form-check mb-3">
+                  <input id="merge" name="merge" type="checkbox">
                   <label for="merge" th:text="#{split-by-sections.merge}">merge PDFs into one</label>
                 </div>
                 <br>

app/core/src/main/resources/templates/usage.html

@@ -42,15 +42,19 @@
                 </div>
                 
                 <div class="filter-controls">
-                  <label class="filter-checkbox">
+                  <div class="form-check">
                     <input type="checkbox" id="hideHomeCheckbox" checked>
+                    <label for="hideHomeCheckbox">
                       <span th:text="#{endpointStatistics.includeHomepage}">Include Homepage ('/')</span>
                     </label>
-                  <label class="filter-checkbox">
+                  </div>
+                  <div class="form-check">
                     <input type="checkbox" id="hideLoginCheckbox" checked>
+                    <label for="hideLoginCheckbox">
                       <span th:text="#{endpointStatistics.includeLoginPage}">Include Login Page ('/login')</span>
                     </label>
                   </div>
+                </div>
                 
                 <div class="my-4" style="color: var(--md-sys-color-on-surface); font-weight: 500;">
                   <span style="margin: 0 10px;"><strong th:text="#{endpointStatistics.totalEndpoints} + ':'">Total Endpoints:</strong> <span id="totalEndpoints">0</span></span>