X-Git-Url: https://juplo.de/gitweb/?a=blobdiff_plain;f=src%2Fmain%2Fresources%2Ftemplates%2Fform.html;h=e3b1f90757280044a589101edf76f05113b9a4ad;hb=76f9370eb564afef7679271cacac44e0564fe6ea;hp=533758efa6b19058eca89def41e8deb05ea4508d;hpb=9de876c5fb510a0ec6ec439aaa371673d6382c58;p=demos%2Fspring-boot

diff --git a/src/main/resources/templates/form.html b/src/main/resources/templates/form.html
index 533758e..e3b1f90 100644
--- a/src/main/resources/templates/form.html
+++ b/src/main/resources/templates/form.html
@@ -16,18 +16,31 @@
           <div class="card-header">Select / unselect the option and submit the form...</div>
           <div class="card-body">
             <div class="card-text">
-              <div class="form-group">
-                <input type="checkbox" class="form-check-label" th:field="*{option}" />
-                <label class="form-check-label" th:for="${#ids.prev('option')}">Fancy Option To Choose</label>
+              <div class="card my-2">
+                <div class="card-body p-2">
+                  <input type="checkbox" class="form-check-label" th:field="*{option}" />
+                  <label class="form-check-label" th:for="${#ids.prev('option')}">Fancy Option To Choose</label>
+                </div>
               </div>
-              <div class="form-group">
-                <input type="checkbox" class="form-check-label" th:field="*{inner.option}" />
-                <label class="form-check-label" th:for="${#ids.prev('inner.option')}">Another Option (In An Inner Class)</label>
+              <div class="card my-2">
+                <div class="card-body p-2">
+                  <input type="checkbox" class="form-check-label" th:field="*{inner.option}" />
+                  <label class="form-check-label" th:for="${#ids.prev('inner.option')}">Another Option (In An Inner Class)</label>
+                </div>
               </div>
-              <div class="form-group" th:each="key : *{map.keySet()}">
-                <input type="checkbox" class="form-check-label" th:field="*{map[__${key}__]}" />
-                <!-- <label class="form-check-label" th:for="${#ids.prev('map[__${key}__]')}" th:text='|Option "${key}" From The Map|'>Option "KEY" From The Map</label>-->
-                <label class="form-check-label" th:text='|Option "${key}" From The Map|'>Option "KEY" From The Map</label>
+              <div class="card my-2" th:each="key : *{map.keySet()}">
+                <div class="card-body p-2">
+                  <input type="checkbox" class="form-check-label" th:field="*{map[__${key}__]}" />
+                  <label class="form-check-label" th:for="|map${key}1|" th:text='|Option "${key}" From The Map|'>Option "KEY" From The Map</label>
+                  <button type="submit" class="close float-right pr-2" name="remove" th:value="${key}">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+              </div>
+              <div class="input-group">
+                <span class="input-group-prepend"><span class="input-group-text">New Option</span></span>
+                <input type="input" class="form-control" name="name" />
+                <span class="input-group-append"><button type="submit" class="btn btn-primary" name="add">Add</button></span>
               </div>
             </div>
           </div>