change

views/inputs.ejs

@@ -1,45 +1,50 @@
 <style>
-    .pill{
+    .pill {
         border: 1px black solid;
         display: flex;
         padding-inline: 3px;
     }
-    .pill input{
+
+    .pill input {
         margin: 0px;
         /* padding: 20px; */
     }
-    .pill label{
+
+    .pill label {
         padding-inline: 4px;
         padding-block: 1px;
     }
-    .pills{
+
+    .pills {
         list-style-type: none;
         display: flex;
     }
-    .f1{
+
+    .f1 {
         display: flex;
         justify-content: space-evenly;
         margin-block: 15px;
     }
-    input{
+
+    input {
         text-align: center;
     }
 </style>
 <form class="f1" action="/scripts" method="post">
     <input type="submit" value="add">
-    <ul class="pills">
+    <select id="pills" name="pill">
         <% 
         let pills = ["4/2","4/1","4","2","2/1","1","0"];
         let i=0;
         pills.forEach(el => {
-            let check = (el=="4")? "checked":"";
+            let check = (el=="4")? "selected":"";
             %>
-                <li class="pill"><label for="<%= i %>"><%= el %></label> <input id="<%= i %>" type="radio" name="pill" value="<%= el %>" <%= check %>></li>
-            <%
+        <option class="pill" id="pill-<%= i %>" value="<%= el %>" <%= check %>><%= el %></option>
+        <%
             i++;
         });
-    %>
-    </ul>
-    <input type="text" name="comment" value=" " placeholder="comment">
+        %>
+    </select>
+    <input type="text" name="comment" value="" placeholder="comment">
     <input type="hidden" name="func" value="save">
 </form>