static/c4.css

@@ -36,6 +36,21 @@ h1, h1 a  {
     font-size: smaller;
 }
 
+#knowntypes button {
+    color: #220;
+    background-color: #dfaa37;
+    border: 1px solid #220;
+    border-radius: 4px;
+    padding: 0.2em 0.4em;
+    margin: 0.2em;
+    font-weight: bolder;
+    cursor: pointer;
+}
+
+#knowntypes button:hover, #knowntypes button:focus {
+    background-color: #f5c251;
+}
+
 .btn {
   box-shadow: 0 3px 6px -1px rgba(0,0,0,0.3);
 }

static/form.js

@@ -65,8 +65,22 @@ function knownTypes() {
       map[i.type] = true;
     }
   }
-  let types = Object.keys(map).sort().join(', ')
-  document.getElementById('knowntypes').textContent = `Known types: ${types}.`;
+
+  // Get location in document.
+  const known_types = document.getElementById('knowntypes');
+  known_types.textContent = `Known types: `;
+
+  // Create a button for every known type.
+  for (let label of Object.keys(map).sort()) {
+    btn = document.createElement('button');
+    btn.setAttribute('type', 'button');
+    btn.textContent = label;
+    btn.addEventListener('click', function() {
+      document.getElementById('type').value = label;
+    });
+
+    known_types.appendChild(btn);
+  }
 }
 
 function save() {