slight refactor

forum-network/src/classes/display/document.js

@@ -1,6 +1,13 @@
 import { Box } from './box.js';
 import { Form } from './form.js';
 
+export class Remark extends Box {
+  constructor(doc, text, opts) {
+    super('Remark', doc.el, opts);
+    this.setInnerHTML(text);
+  }
+}
+
 /**
  * @example
  * ```typescript
@@ -13,8 +20,8 @@ export class Document extends Box {
     return this.addElement(new Form(this));
   }
 
-  remarks(text, opts) {
+  remark(text, opts) {
-    return this.addElement(new Box('Remark', this.el, opts).setInnerHTML(text));
+    return this.addElement(new Remark(this, text, opts));
   }
 
   addElement(element) {

forum-network/src/classes/display/form.js

@@ -22,12 +22,15 @@ export class Button extends FormElement { }
 export class TextField extends FormElement {
   constructor(name, parentEl, opts) {
     super(name, parentEl, opts);
+    this.label = document.createElement('label');
+    this.label.innerHTML = name;
     this.input = document.createElement('input');
-    this.el.appendChild(this.input);
+    this.label.appendChild(this.input);
+    this.el.appendChild(this.label);
   }
 
   get value() {
-    return this.input?.value;
+    return this.input?.value || null;
   }
 }
 

forum-network/src/index.css

@@ -71,3 +71,12 @@ button:disabled {
   background-color: #2a535e;
   color: #919191;
 }
+label > input {
+  margin-left: 1em;
+}
+label {
+  font-family: monospace;
+  font-weight: bold;
+  font-size: smaller;
+  color: #999999;
+}

forum-network/src/tests/scripts/input.test.js

@@ -11,7 +11,7 @@ scene.withDocument();
 
 describe('Document', () => {
   it('Exists', () => {
-    scene.withDocument('Document', (doc) => doc.remarks('Hello'));
+    scene.withDocument('Document', (doc) => doc.remark('Hello'));
   });
 
   describe('Input', () => {
@@ -27,7 +27,7 @@ describe('Document', () => {
       };
 
       form1.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay });
-      doc.remarks('Hmm...!');
+      doc.remark('Hmm...!');
     });
   });
 });