Use explicit label with for and id attributes connected to an input or textarea.HEADmaster

5 files changed, 59 insertions, 59 deletions

diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 1bb2185..8e2d13b 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -34,13 +34,13 @@
                    th:value="${_csrf.token}" />
 
             <div class="mb-3">
-                <label class="form-label">Email</label>
-                <input class="form-control" name="email" />
+                <label for="email" class="form-label">Email</label>
+                <input id="email" class="form-control" name="email" />
             </div>
 
             <div class="mb-3">
-                <label class="form-label">Password</label>
-                <input class="form-control" type="password" name="password" />
+                <label for="password" class="form-label">Password</label>
+                <input id="password" class="form-control" type="password" name="password" />
             </div>
 
             <div class="row mb-3">
diff --git a/src/main/resources/templates/pkgs/add.html b/src/main/resources/templates/pkgs/add.html
index 42dde04..32a1396 100644
--- a/src/main/resources/templates/pkgs/add.html
+++ b/src/main/resources/templates/pkgs/add.html
@@ -21,74 +21,74 @@
       <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Sequence</label>
+        <label for="sequence" class="col-sm-4 col-form-label">Sequence</label>
         <div class="col-sm-8">
-          <input class="form-control" th:field="${pkgDto.sequence}" />
+          <input id="sequence" class="form-control" th:field="${pkgDto.sequence}" />
           <p th:if="${#fields.hasErrors('sequence')}" th:errorclass="text-danger" th:errors="${pkgDto.sequence}"></p>
         </div>
       </div>
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Name</label>
+        <label for="name" class="col-sm-4 col-form-label">Name</label>
         <div class="col-sm-8">
-          <input class="form-control" th:field="${pkgDto.name}" />
+          <input id="name" class="form-control" th:field="${pkgDto.name}" />
           <p th:if="${#fields.hasErrors('name')}" th:errorclass="text-danger" th:errors="${pkgDto.name}"></p>
         </div>
       </div>
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Version</label>
+        <label for="version" class="col-sm-4 col-form-label">Version</label>
         <div class="col-sm-8">
-          <input class="form-control" th:field="${pkgDto.version}" />
+          <input id="version" class="form-control" th:field="${pkgDto.version}" />
           <p th:if="${#fields.hasErrors('version')}" th:errorclass="text-danger" th:errors="${pkgDto.version}"></p>
         </div>
       </div>
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Configure</label>
+        <label for="configure" class="col-sm-4 col-form-label">Configure</label>
         <div class="col-sm-8">
-          <textarea class="form-control" th:field="${pkgDto.configure}" />
+          <textarea id="configure" class="form-control" th:field="${pkgDto.configure}" />
           <p th:if="${#fields.hasErrors('configure')}" th:errorclass="text-danger" th:errors="${pkgDto.configure}"></p>
         </div>
       </div>
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Build</label>
+        <label for="build" class="col-sm-4 col-form-label">Build</label>
         <div class="col-sm-8">
-          <textarea class="form-control" th:field="${pkgDto.build}" />
+          <textarea id="build" class="form-control" th:field="${pkgDto.build}" />
           <p th:if="${#fields.hasErrors('build')}" th:errorclass="text-danger" th:errors="${pkgDto.build}"></p>
         </div>
       </div>
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Install</label>
+        <label for="install" class="col-sm-4 col-form-label">Install</label>
         <div class="col-sm-8">
-          <textarea class="form-control" th:field="${pkgDto.install}" />
+          <textarea id="install" class="form-control" th:field="${pkgDto.install}" />
           <p th:if="${#fields.hasErrors('install')}" th:errorclass="text-danger" th:errors="${pkgDto.install}"></p>
         </div>
       </div>
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Setup</label>
+        <label for="setup" class="col-sm-4 col-form-label">Setup</label>
         <div class="col-sm-8">
-          <textarea class="form-control" th:field="${pkgDto.setup}" />
+          <textarea id="setup" class="form-control" th:field="${pkgDto.setup}" />
           <p th:if="${#fields.hasErrors('setup')}" th:errorclass="text-danger" th:errors="${pkgDto.setup}"></p>
         </div>
       </div>
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Notes</label>
+        <label for="notes" class="col-sm-4 col-form-label">Notes</label>
         <div class="col-sm-8">
-          <textarea class="form-control" th:field="${pkgDto.notes}" />
+          <textarea id="notes" class="form-control" th:field="${pkgDto.notes}" />
           <p th:if="${#fields.hasErrors('notes')}" th:errorclass="text-danger" th:errors="${pkgDto.notes}"></p>
         </div>
       </div>
 
       <div class="row mb-3">
-        <label class="col-sm-4 col-form-label">Url</label>
+        <label for="url" class="col-sm-4 col-form-label">url</label>
         <div class="col-sm-8">
-          <textarea class="form-control" th:field="${pkgDto.url}" />
-          <p th:if="${#fields.hasErrors('Url')}" th:errorclass="text-danger" th:errors="${pkgDto.url}"></p>
+          <textarea id="url" class="form-control" th:field="${pkgDto.url}" />
+          <p th:if="${#fields.hasErrors('url')}" th:errorclass="text-danger" th:errors="${pkgDto.url}"></p>
         </div>
       </div>
 
diff --git a/src/main/resources/templates/pkgs/edit.html b/src/main/resources/templates/pkgs/edit.html
index 26d9d0e..f1df17b 100644
--- a/src/main/resources/templates/pkgs/edit.html
+++ b/src/main/resources/templates/pkgs/edit.html
@@ -21,74 +21,74 @@
             <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Sequence</label>
+                <label for="sequence" class="col-sm-4 col-form-label">Sequence</label>
                 <div class="col-sm-8">
-                    <input class="form-control" th:field="${pkgDto.sequence}" />
+                    <input id="sequence" lass="form-control" th:field="${pkgDto.sequence}" />
                     <p th:if="${#fields.hasErrors('sequence')}" th:errorclass="text-danger" th:errors="${pkgDto.sequence}"></p>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Name</label>
+                <label for="name" class="col-sm-4 col-form-label">Name</label>
                 <div class="col-sm-8">
-                    <input class="form-control" th:field="${pkgDto.name}" />
+                    <input id="name" class="form-control" th:field="${pkgDto.name}" />
                     <p th:if="${#fields.hasErrors('name')}" th:errorclass="text-danger" th:errors="${pkgDto.name}"></p>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Version</label>
+                <label for="version" class="col-sm-4 col-form-label">Version</label>
                 <div class="col-sm-8">
-                    <input class="form-control" th:field="${pkgDto.version}" />
+                    <input id="version" class="form-control" th:field="${pkgDto.version}" />
                     <p th:if="${#fields.hasErrors('version')}" th:errorclass="text-danger" th:errors="${pkgDto.version}"></p>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Configure</label>
+                <label for="configure" class="col-sm-4 col-form-label">Configure</label>
                 <div class="col-sm-8">
-                    <textarea class="form-control" th:field="${pkgDto.configure}" />
+                    <textarea id="configure" class="form-control" th:field="${pkgDto.configure}" />
                     <p th:if="${#fields.hasErrors('configure')}" th:errorclass="text-danger" th:errors="${pkgDto.configure}"></p>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Build</label>
+                <label for="build" class="col-sm-4 col-form-label">Build</label>
                 <div class="col-sm-8">
-                    <textarea class="form-control" th:field="${pkgDto.build}" />
+                    <textarea id="build" class="form-control" th:field="${pkgDto.build}" />
                     <p th:if="${#fields.hasErrors('build')}" th:errorclass="text-danger" th:errors="${pkgDto.build}"></p>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Install</label>
+                <label for="install" class="col-sm-4 col-form-label">Install</label>
                 <div class="col-sm-8">
-                    <textarea class="form-control" th:field="${pkgDto.install}" />
+                    <textarea id="install" class="form-control" th:field="${pkgDto.install}" />
                     <p th:if="${#fields.hasErrors('install')}" th:errorclass="text-danger" th:errors="${pkgDto.install}"></p>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Setup</label>
+                <label for="setup" class="col-sm-4 col-form-label">Setup</label>
                 <div class="col-sm-8">
-                    <textarea class="form-control" th:field="${pkgDto.setup}" />
+                    <textarea id="setup" class="form-control" th:field="${pkgDto.setup}" />
                     <p th:if="${#fields.hasErrors('setup')}" th:errorclass="text-danger" th:errors="${pkgDto.setup}"></p>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Notes</label>
+                <label for="notes" class="col-sm-4 col-form-label">Notes</label>
                 <div class="col-sm-8">
-                    <textarea class="form-control" th:field="${pkgDto.notes}" />
+                    <textarea id="notes" class="form-control" th:field="${pkgDto.notes}" />
                     <p th:if="${#fields.hasErrors('notes')}" th:errorclass="text-danger" th:errors="${pkgDto.notes}"></p>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label class="col-sm-4 col-form-label">Url</label>
+                <label for="url" class="col-sm-4 col-form-label">url</label>
                 <div class="col-sm-8">
-                    <textarea class="form-control" th:field="${pkgDto.url}" />
-                    <p th:if="${#fields.hasErrors('Url')}" th:errorclass="text-danger" th:errors="${pkgDto.url}"></p>
+                    <textarea id="url" class="form-control" th:field="${pkgDto.url}" />
+                    <p th:if="${#fields.hasErrors('url')}" th:errorclass="text-danger" th:errors="${pkgDto.url}"></p>
                 </div>
             </div>
 
diff --git a/src/main/resources/templates/register.html b/src/main/resources/templates/register.html
index 230bbeb..e09add7 100644
--- a/src/main/resources/templates/register.html
+++ b/src/main/resources/templates/register.html
@@ -19,9 +19,9 @@
                        th:value="${_csrf.token}" />
 
                 <div class="row mb-3">
-                    <label class="col-sm-4 col-form-label">First Name*</label>
+                    <label for="firstname" class="col-sm-4 col-form-label">First Name*</label>
                     <div class="col-sm-8">
-                        <input class="form-control" th:field="${registerDto.firstName}" >
+                        <input id="firstname" class="form-control" th:field="${registerDto.firstName}" >
                         <p th:if="${#fields.hasErrors('firstName')}"
                            th:errorclass="text-danger"
                            th:errors="${registerDto.firstName}" ></p>
@@ -29,9 +29,9 @@
                 </div>
 
                 <div class="row mb-3">
-                    <label class="col-sm-4 col-form-label">Last Name*</label>
+                    <label for="lastname" class="col-sm-4 col-form-label">Last Name*</label>
                     <div class="col-sm-8">
-                        <input class="form-control" th:field="${registerDto.lastName}" >
+                        <input id="lastname" class="form-control" th:field="${registerDto.lastName}" >
                         <p th:if="${#fields.hasErrors('lastName')}"
                            th:errorclass="text-danger"
                            th:errors="${registerDto.lastName}" ></p>
@@ -39,9 +39,9 @@
                 </div>
 
                 <div class="row mb-3">
-                    <label class="col-sm-4 col-form-label">Email*</label>
+                    <label for="email" class="col-sm-4 col-form-label">Email*</label>
                     <div class="col-sm-8">
-                        <input class="form-control" th:field="${registerDto.email}" >
+                        <input id="email" class="form-control" th:field="${registerDto.email}" >
                         <p th:if="${#fields.hasErrors('email')}"
                            th:errorclass="text-danger"
                            th:errors="${registerDto.email}" ></p>
@@ -49,9 +49,9 @@
                 </div>
 
                 <div class="row mb-3">
-                    <label class="col-sm-4 col-form-label">Phone</label>
+                    <label for="phone" class="col-sm-4 col-form-label">Phone</label>
                     <div class="col-sm-8">
-                        <input class="form-control" th:field="${registerDto.phone}" >
+                        <input id="phone" class="form-control" th:field="${registerDto.phone}" >
                         <p th:if="${#fields.hasErrors('phone')}"
                            th:errorclass="text-danger"
                            th:errors="${registerDto.phone}" ></p>
@@ -59,9 +59,9 @@
                 </div>
 
                 <div class="row mb-3">
-                    <label class="col-sm-4 col-form-label">Address</label>
+                    <label for="address" class="col-sm-4 col-form-label">Address</label>
                     <div class="col-sm-8">
-                        <input class="form-control" th:field="${registerDto.address}" >
+                        <input id="address" class="form-control" th:field="${registerDto.address}" >
                         <p th:if="${#fields.hasErrors('address')}"
                            th:errorclass="text-danger"
                            th:errors="${registerDto.address}" ></p>
@@ -69,9 +69,9 @@
                 </div>
 
                 <div class="row mb-3">
-                    <label class="col-sm-4 col-form-label">Password*</label>
+                    <label for="password" class="col-sm-4 col-form-label">Password*</label>
                     <div class="col-sm-8">
-                        <input class="form-control" type="password"
+                        <input id="password" class="form-control" type="password"
                                th:field="${registerDto.password}" >
                         <p th:if="${#fields.hasErrors('password')}"
                            th:errorclass="text-danger"
@@ -80,9 +80,9 @@
                 </div>
 
                 <div class="row mb-3">
-                    <label class="col-sm-4 col-form-label">Confirm Password*</label>
+                    <label for="confirmpassword" class="col-sm-4 col-form-label">Confirm Password*</label>
                     <div class="col-sm-8">
-                        <input class="form-control" type="password"
+                        <input id="confirmpassword" class="form-control" type="password"
                                th:field="${registerDto.confirmPassword}" >
                         <p th:if="${#fields.hasErrors('confirmPassword')}"
                            th:errorclass="text-danger"
diff --git a/src/test/java/org/berzerkula/builddb/controllers/BuilddbPkgControllerTest.java b/src/test/java/org/berzerkula/builddb/controllers/BuilddbPkgControllerTest.java
index 462b365..3e5137b 100644
--- a/src/test/java/org/berzerkula/builddb/controllers/BuilddbPkgControllerTest.java
+++ b/src/test/java/org/berzerkula/builddb/controllers/BuilddbPkgControllerTest.java
@@ -97,7 +97,7 @@ class BuilddbPkgControllerTest {
                         .formField("install", "")
                         .formField("setup", "")
                         .formField("notes", "")
-                        .formField("Url", ""))
+                        .formField("url", ""))
                 .andExpect(status().isOk())
                 .andExpect(view().name("pkgs/add"))
                 .andDo(print());
@@ -116,7 +116,7 @@ class BuilddbPkgControllerTest {
                         .formField("install", "testinstall")
                         .formField("setup", "testsetup")
                         .formField("notes", "testnotes")
-                        .formField("Url", "http://test.org/test-1.2.3.tar.gz"))
+                        .formField("url", "http://test.org/test-1.2.3.tar.gz"))
                 .andExpect(status().is3xxRedirection())
                 .andExpect(view().name("redirect:/pkgs"))
                 .andDo(print());
@@ -142,7 +142,7 @@ class BuilddbPkgControllerTest {
                         .formField("install", "")
                         .formField("setup", "")
                         .formField("notes", "")
-                        .formField("Url", ""))
+                        .formField("url", ""))
                 .andExpect(status().is3xxRedirection())
                 .andExpect(view().name("redirect:/pkgs/#" + id))
                 .andDo(print());