juplo.de Git - demos/spring-boot/blob - src/main/resources/templates/form.html

   1 <!DOCTYPE html>
   2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   6     <title>Demo: Behavior Of A Checkbox</title>
   7     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   8   </head>
   9   <body>
  10     <nav class="navbar navbar-dark bg-primary navbar-expand navbar-dark flex-column">
  11       <h1 class="navbar-brand">Demo: Behavior Of A Checkbox</h1>
  12     </nav>
  13     <main class="container mt-5">
  14       <form action="#" th:action="@{/}" th:object="${form}" method="get">
  15         <div class="card my-3">
  16           <div class="card-header">Select / unselect the option and submit the form...</div>
  17           <div class="card-body">
  18             <div class="card-text">
  19               <div class="card my-2">
  20                 <div class="card-body p-2">
  21                   <input type="checkbox" class="form-check-label" th:field="*{option}" />
  22                   <label class="form-check-label" th:for="${#ids.prev('option')}">Fancy Option To Choose</label>
  23                 </div>
  24               </div>
  25               <div class="card my-2">
  26                 <div class="card-body p-2">
  27                   <input type="checkbox" class="form-check-label" th:field="*{inner.option}" />
  28                   <label class="form-check-label" th:for="${#ids.prev('inner.option')}">Another Option (In An Inner Class)</label>
  29                 </div>
  30               </div>
  31               <div class="card my-2" th:each="key : *{map.keySet()}">
  32                 <div class="card-body p-2">
  33                   <input type="checkbox" class="form-check-label" th:field="*{map[__${key}__]}" />
  34                   <label class="form-check-label" th:for="|map${key}1|" th:text='|Option "${key}" From The Map|'>Option "KEY" From The Map</label>
  35                   <button type="submit" class="close float-right pr-2" name="remove" th:value="${key}">
  36                     <span aria-hidden="true">&times;</span>
  37                   </button>
  38                 </div>
  39               </div>
  40               <div class="input-group">
  41                 <span class="input-group-prepend"><span class="input-group-text">New Option</span></span>
  42                 <input type="input" class="form-control" name="name" />
  43                 <span class="input-group-append"><button type="submit" class="btn btn-primary" name="add">Add</button></span>
  44               </div>
  45             </div>
  46           </div>
  47           <div class="card-footer">
  48             <button type="submit" class="btn btn-primary">Submit</button>
  49           </div>
  50         </div>
  51       </form>
  52     </main>
  53   </body>
  54 </html>