diff --git a/Documentation/forms-intro.html b/Documentation/forms-intro.html
index 63a9a7be1..cb2e0066a 100644
--- a/Documentation/forms-intro.html
+++ b/Documentation/forms-intro.html
@@ -93,9 +93,11 @@
       }
       table.parameters {
         background-color: #dddddd;
+        margin-left: 4em;
       } /*  background-color: #ddddff; */
       table.properties {
         background-color: #ddddff;
+        margin-left: 4em;
       } /*  background-color: #ddddff; */
       td {
         padding: 0.5em;
@@ -240,20 +242,17 @@ <h2>Form field types</h2>
     <table class="properties">
       <tr>
         <td>label</td>
-
         <td>String</td>
-
         <td>
           A label for the form field. This is the prompt for the user, e.g.,
-          "Name", "Employer".
+          "Name", "Employer".  If the label is not given in the form, the
+          system will make one from a label of the property in the ontology.
         </td>
       </tr>
 
       <tr>
         <td>property</td>
-
         <td>rdf:Property</td>
-
         <td>
           When the user enters the data, it is stored in the web as a triple
           with this property as its predicate.
@@ -262,9 +261,7 @@ <h2>Form field types</h2>
 
       <tr>
         <td>default</td>
-
         <td>[according to field type] Optional</td>
-
         <td>
           The input control is set to this value by default. It is easiest for
           the user to enter this value. (This value is <b>not</b> automatically
@@ -272,6 +269,17 @@ <h2>Form field types</h2>
           some way.
         </td>
       </tr>
+
+      <tr>
+        <td>suppressEmptyUneditable</td>
+        <td>Boolean</td>
+        <td>
+          Setting this flag (on a single form field not a structure) means that when the user is just reading the data, not
+          editing it, the fields with blank data will be removed completely.
+          This avoid things like a blank field for a region in an address when there isn't one given.
+          This can make the UX much cleaner.  Defaults to false.
+        </td>
+      </tr>
     </table>
 
     <p>
@@ -399,6 +407,24 @@ <h4 class="class">Group</h4>
       the same as for Form.
     </p>
 
+    <table class="properties">
+      <tr>
+        <td>weight</td>
+
+        <td>xsd:integer</td>
+        <td>0:lighter than normal, 1: Normal, 2,3: heavier than normal</td>
+      </tr>
+      <tr>
+        <td>parts</td>
+        <td>rdf:Collection</td>
+        <td>
+          The form fields, forms, in the group
+        </td>
+      </tr>
+    </table>
+
+
+
     <h4 class="class">Choice</h4>
 
     <p>The user choses an item from a class.</p>
@@ -425,9 +451,7 @@ <h4 class="class">Choice</h4>
 
       <tr>
         <td>canMintNew</td>
-
         <td>xsd:Boolean</td>
-
         <td>
           If the user doesn't find the thing they want, can they introduce an
           item of that class by filling in a form about it? [Boolean]
@@ -435,8 +459,8 @@ <h4 class="class">Choice</h4>
       </tr>
     </table>
 
-    If a new thing is minted, that will be done with a form which is a
-    <tt>ui:creationForm</tt> for the class.
+    <p>If a new thing is minted, that will be done with a form which is a
+    <tt>ui:creationForm</tt> for the class.</p>
 
     <h4 class="class">Multiple</h4>
 
@@ -454,6 +478,37 @@ <h4 class="class">Multiple</h4>
       form. It is the field, or the address, and so on.
     </p>
 
+
+    <table class="properties">
+      <tr>
+        <td>ordered</td>
+        <td>Boolean</td>
+        <td>If true, the user has an ordered array of things, and the data is in an RDF collection.
+          If false, the UI is irrelevant and the data is a series of arcs.</td>
+      </tr>
+      <tr>
+        <td>property</td>
+        <td>rdf:Property</td>
+        <td>The API details or query endpoint and query details to be used to search the item in
+          the databasse.</td>
+      </tr>
+      <tr>
+        <td>reverse</td>
+        <td>Boolean</td>
+        <td>If set, the form will write data triple like <tt>X P S</tt> instead of the normal <tt>S P X</tt>.
+         </td>
+      </tr>
+      <tr>
+        <td>part</td>
+        <td>Form</td>
+        <td>The form to be used for each one.
+         </td>
+      </tr>
+    </table>
+
+
+
+
     <h4 class="class">Classifier</h4>
 
     <table class="properties">
@@ -468,7 +523,7 @@ <h4 class="class">Classifier</h4>
         </td>
       </tr>
     </table>
-
+    <p>
     This form field leverages the ontology heavily. It pulls the subclasses of
     the given class, and makes a pop-up menu for the user to chose one. If and
     only if the ontology says that the class is a disjoint union
@@ -477,7 +532,7 @@ <h4 class="class">Classifier</h4>
     shows that that subclass has its own subclasses, then the user will be
     prompted to pick one of those, to (if they like) further refine the
     selection. And so on.
-
+  </p>
     <p>
       The classifier pops a menu to allow the user to select a set of values to
       classify the subject.
@@ -517,7 +572,7 @@ <h4 class="class">Options</h4>
       </tr>
     </table>
 
-    and for each case:
+    <p>and for each case:</p>
 
     <table class="properties">
       <tr>
@@ -565,24 +620,21 @@ <h4 class="class" id="Autocomplete">Autocomplete</h4>
 
     <tr>
       <td>labelProperty</td>
-      <td>String</td>
+      <td>rdf:Property</td>
       <td>The property which will be used to store the name of the selected thing as a separate triple</td>
     </tr>
-
     <tr>
       <td>dataSource</td>
-
       <td>DataSource</td>
-
       <td>The API details or query endpint and query details to be usde to search of the itemn in
         the databasse.</td>
     </tr>
     <tr>
       <td>targetClass</td>
       <td>rdfs:Class</td>
-      <td>Is tyhis is specified, it be used to replace any occuurences of
+      <td>Is tyhis is specified, it be used to replace any occurrences of
          "$(targetClass)" in the query template.  this allows different instances
-         of AutocompleteField to share the same DatSource, by specifying different values for <tt>targetClass</tt>.</td>
+         of AutocompleteField to share the same DataSource, by specifying different values for <tt>targetClass</tt>.</td>
     </tr>
 
   </table>
@@ -604,8 +656,17 @@ <h4 class="class">Heading</h4>
 
         <td>The text content of the heading</td>
       </tr>
+      <tr>
+        <td>suppressIfUneditable</td>
+        <td>Boolean</td>
+        <td>If data is uneditable,ie read-only mode, hide this comment</td>
+      </tr>
     </table>
 
+<p>The <tt>suppressIfUneditable</tt> flag allow you to make a form which
+  is much cleaner and simpler when the user is just reading information,
+  not editing it.</p>
+
     <h4 class="class">Comment</h4>
 
     <p>
@@ -618,11 +679,16 @@ <h4 class="class">Comment</h4>
         <td>contents</td>
 
         <td>String</td>
-
         <td>
           The text content of the comment. (This should be displayed by form
           systems as <tt>pre-wrap</tt> mode.)
         </td>
+        <tr>
+          <td>suppressIfUneditable</td>
+          <td>Boolean</td>
+          <td>If data is uneditable,ie read-only mode, hide this comment</td>
+        </tr>
+
       </tr>
     </table>
 
@@ -634,9 +700,11 @@ <h2>Conclusion</h2>
       daily life at home and at work. It can be vary efficient as developers can
       reuse material between forms. Users can even generate their own forms.
     </p>
+    <p>
     Future directions include separate implementations of the form UI code in
     for various platforms, and using various UI frameworks. There may also be
     extensions of the system with new field types, more options for setting style
     from various sources, etc.
+  </p>
   </body>
 </html>
diff --git a/Documentation/talks/FormsTalk.html b/Documentation/talks/FormsTalk.html
index 0d3618d91..5a22df66d 100644
--- a/Documentation/talks/FormsTalk.html
+++ b/Documentation/talks/FormsTalk.html
@@ -165,10 +165,10 @@ <h1>Single Line Text field</h1>
 <h1>Examples of other form fields</h1>
 
 <ol>
-  <li><a target="demo" href="../form-examples/demo.html">Examples of individual Form Fields</a></li>
-  <li><a target="demo" href="../form-examples/structures.html">Examples of structures in forms: Groups</a></li>
-  <li><a target="demo" href="../form-examples/structures3.html">Selection, Options, Autocomplete</a></li>
-  <li><a target="demo" href="../form-examples/profile-demo.html">Examples of a Solid profile editing form</a></li>
+  <li><a target="demo1" href="../form-examples/demo.html">Examples of individual Form Fields</a></li>
+  <li><a target="demo2" href="../form-examples/structures.html">Examples of structures in forms: Groups</a></li>
+  <li><a target="demo3" href="../form-examples/structures3.html">Selection, Options, Autocomplete</a></li>
+  <li><a target="demo4" href="../form-examples/profile-demo.html">Examples of a Solid profile editing form</a></li>
   <!--
   <li><a target="demo" href="../form-examples/edit-form.html">Editing a simple form using the Form Form</a></li>
   <li><a target="demo" href="../form-examples/edit-form-form.html">Editing the Form Form</a></li>
@@ -178,10 +178,65 @@ <h1>Examples of other form fields</h1>
 </div>
 
 
+<div class="slide">
+  <h1>Common properties of form fields</h1>
+
+  <table class="properties">
+    <tr>
+      <td>label</td>
+      <td>String</td>
+      <td>
+        A label for the form field, prompt for the user.
+      </td>
+    </tr>
+
+    <tr>
+      <td>property</td>
+      <td>rdf:Property</td>
+      <td>
+        Data it is stored in the web as a triple
+        with this property as its predicate.
+      </td>
+    </tr>
+
+    <tr>
+      <td>default</td>
+      <td>[according to field type] Optional</td>
+      <td>
+        The input control is set to this value by default. It is easiest for
+        the user to enter this value. (This value is <b>not</b> automatically
+        stored by the form system if the user does not select or enter it in
+        some way.
+      </td>
+    </tr>
+
+    <tr>
+      <td>suppressEmptyUneditable</td>
+      <td>Boolean</td>
+      <td>
+        When the user is just reading the data, not
+        editing it, the fields with blank data will be hidden.
+      </td>
+    </tr>
+  </table>
+
+</div>
+
+
+<div class="slide">
+<h1>The Autocomplete field</h1>
+<p>This form field allows users to select things from lists in public databases, things like Languages, Organizations, Occupations, and Skills</p>
+<p>This is not covered in detail in this talk.</p>
+<p>(There is a blog <a href="https://solidos.solidcommunity.net/public/2021/01%20Building%20Solid%20Apps%20which%20use%20Public%20Data.html">
+</i>Building Solid Apps which use Public Data</i></a>,
+  about this which I could run though for those interested)</p>
+  <img src="../diagrams/PersonalPublicDataLinks.svg" />
+</div>
+
 <div class="slide">
 <h1>Code: Render a form</h1>
 <p>To put a form in your UI</p>
-<pre>UI.widgets.appendForm(dom, container, {}, subject, form, doc, callback)
+<pre>const element = UI.widgets.appendForm(dom, null, {}, subject, form, doc, callback)
   </pre>
 
   <table class="parameters">
@@ -192,9 +247,10 @@ <h1>Code: Render a form</h1>
   </tr>
 
   <tr>
-    <td>container</td>
+    <td>null</td>
 
-    <td>is a DOM element to contain the form</td>
+    <td>used to be the is a DOM element to contain the form. If given, the form will be
+    appended to it. This use is deprecated.</td>
   </tr>
 
   <tr>
@@ -222,7 +278,7 @@ <h1>Code: Render a form</h1>
     <td>callback</td>
     <td>
       is a function taking an error flag and a message (if the error flag is
-      true)
+      true). Called when the form field has been set to a new value.
     </td>
   </tr>
 </table>
@@ -241,15 +297,18 @@ <h1>Going meta -- designing forms using the form of forms 1</h1>
 <h1>Going meta -- Editing forms using the form of forms 2</h1>
 <p>Here we are editing the really small form we started with.</p>
 <ul>
-  <li><a target="demo" href="../form-examples/edit-form.html">Editing a simple form using the Form Form</a></li>
+  <li><a target="demo8" href="../form-examples/edit-form.html">Editing a simple form using the Form Form</a></li>
 </ul>
 <p>Here we edit the FormForm with itself.</p>
 <ul>
-  <li><a target="demo" href="../form-examples/edit-form-form.html">Editing the Form Form</a></li>
+  <li><a target="demo9" href="../form-examples/edit-form-form.html">Editing the Form Form</a></li>
 </ul>
 
 </div>
 
+
+
+
 <div class="slide">
 <h1>Forms and Classes</h1>
 <pre>
@@ -349,17 +408,14 @@ <h1>Future</h1>
 </ul>
 </div>
 
-
-
 <div class="slide">
 <h1>Questions?</h1>
+<ul>
+  <p>Reference</p>
+  <li><a target="doc" href="../form-ecosystem.html">Manual: The Form Ecosystem</a></li>
+  <li><a target="doc" href="../forms-intro.html">Manual: Intro to forms</a></li>
+  <li><a target="doc" href="https://www.w3.org/ns/ui.n3">The UI ontology (source)</a></li>
+</ul>
 </div>
-<div class="slide">
-<h1>The Autocomplete field</h1>
-<p>This form field allows users to select things from lists in public databases, things like Languages, Organizations, Occupations, and Skills</p>
-<p>This is not covered in this talk.</p>
-<p>(There is a blog <a href="https://solidos.solidcommunity.net/public/2021/01%20Building%20Solid%20Apps%20which%20use%20Public%20Data.html">
-</i>Building Solid Apps which use Public Data</i></a>,
-  about this which I could run though for those interested)</p>
-  <img src="../diagrams/PersonalPublicDataLinks.svg" />
+
 </div>
diff --git a/src/style.js b/src/style.js
index 7895a4e53..02279cd8a 100644
--- a/src/style.js
+++ b/src/style.js
@@ -13,7 +13,7 @@ const formFieldNameBoxWidth = '8em' // The fixed amount to get form fields to li
 export const style = { // styleModule
 
   checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
-  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; margin: 0.1em',
+  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',
 
   fieldLabelStyle: 'color: #3B5998; text-decoration: none;',
   formSelectSTyle:
@@ -21,13 +21,13 @@ export const style = { // styleModule
   textInputStyle:
     'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyleUneditable: // Color difference only
-    'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em; ',
+    'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputSize: 20, // Default text input size in characters roughly
   buttonStyle:
       'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;', // 'background-color: #eef;
   commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',
   iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
-  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em',
+  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em;',
   classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;', // combine with buttonStyle
   confirmPopupStyle: 'padding: 0.7em; border-radius: 0.2em; border: 0.1em solid orange; background-color: white; box-shadow: 0.5em 0.9em #888;',
   tabBorderRadius: '0.2em',
diff --git a/src/widgets/forms.js b/src/widgets/forms.js
index b5838a5bf..80f1a27b9 100644
--- a/src/widgets/forms.js
+++ b/src/widgets/forms.js
@@ -1587,9 +1587,8 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista
   const editable = kb.updater.editable(dataDoc.uri)
 
   const input = dom.createElement('button')
-  const colorCarrier = input // Which element changes color to flag changed/saving/saved?
+  const colorCarrier = input
   input.style = style.checkboxInputStyle
-  // colorCarrier.style = style.checkboxStyle
   rhs.appendChild(input)
 
   function fix (x) {
@@ -1644,7 +1643,7 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista
   if (!editable) return box
 
   const boxHandler = function (_e) {
-    colorCarrier.style.color = '#bbb;' // grey -- not saved yet
+    colorCarrier.style.color = '#bbb' // grey -- not saved yet
     const toDelete = input.state === true ? ins : input.state === false ? del : []
     input.newState =
       input.state === null
@@ -1676,8 +1675,8 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista
             debug.log(' @@@@@ weird if 409 - does hold statement')
           }
         }
-        colorCarrier.style.color = 'color: #black;'
-        colorCarrier.style.backgroundColor = '#fee;'
+        colorCarrier.style.color = '#000'
+        colorCarrier.style.backgroundColor = '#fee'
         box.appendChild(
           errorMessageBlock(
             dom,
@@ -1687,7 +1686,7 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista
           )
         )
       } else {
-        colorCarrier.style = 'color: #black;'
+        colorCarrier.style.color = '#000'
         input.state = input.newState
         input.textContent = {
           true: checkMarkCharacter,
diff --git a/src/widgets/forms/basic.ts b/src/widgets/forms/basic.ts
index 72744cb62..72e78395f 100644
--- a/src/widgets/forms/basic.ts
+++ b/src/widgets/forms/basic.ts
@@ -1,7 +1,7 @@
 import { st, BlankNode, Literal, Node, NamedNode, Variable, Store } from 'rdflib'
 import { solidLogicSingleton } from '../../logic'
 import * as ns from '../../ns'
-import { textInputStyle, textInputStyleUneditable, formFieldNameBoxWidth, formFieldNameBoxStyle } from '../../style'
+import { textInputSize, textInputStyle, textInputStyleUneditable, formFieldNameBoxWidth, formFieldNameBoxStyle } from '../../style'
 import { label } from '../../utils'
 import { errorMessageBlock } from '../error'
 import { mostSpecificClassURI } from './fieldFunction'
@@ -120,32 +120,21 @@ export function basicField (
     )
   }
   const rhs = renderNameValuePair(dom, kb, box, form)
-  /*
-  box.style.display = 'flex'
-  box.style.flexDirection = 'row'
-  const lhs = box.appendChild(dom.createElement('div'))
-  lhs.style.width = formFieldNameBoxWidth
-  const rhs = box.appendChild(dom.createElement('div'))
-  lhs.appendChild(fieldLabel(dom, property as NamedNode, form))
-  lhs.setAttribute('class', 'formFieldName')
-  lhs.setAttribute('style', formFieldNameBoxStyle)
-  rhs.setAttribute('class', 'formFieldValue')
-  */
 
   // It can be cleaner to just remove empty fields if you can't edit them anyway
   const suppressEmptyUneditable = kb.anyJS(form, ns.ui('suppressEmptyUneditable'), null, formDoc)
 
   const uri = mostSpecificClassURI(form)
   let params = fieldParams[uri]
-  if (params === undefined) params = {} // non-bottom field types can do this
-  const style = params.style || textInputStyle
-  // box.appendChild(dom.createTextNode(' uri='+uri+', pattern='+ params.pattern))
+  if (params === undefined) params = { style: '' } // non-bottom field types can do this
+  const paramStyle = params.style || ''
+  const style = textInputStyle + paramStyle
   const field = dom.createElement('input')
-  ;(field as any).style = textInputStyle // Do we have to override length etc?
+  ;(field as any).style = style
   rhs.appendChild(field)
   field.setAttribute('type', params.type ? params.type : 'text')
 
-  const size = kb.anyJS(form, ns.ui('size')) || style.textInputSize || 20
+  const size = kb.anyJS(form, ns.ui('size')) || textInputSize || 20
   field.setAttribute('size', size)
 
   const maxLength = kb.any(form, ns.ui('maxLength'))
@@ -171,7 +160,7 @@ export function basicField (
   }
   if (!kb.updater.editable((doc as NamedNode).uri)) {
     field.readOnly = true // was: disabled. readOnly is better
-    ;(field as any).style = textInputStyleUneditable
+    ;(field as any).style = textInputStyleUneditable + paramStyle
     // backgroundColor = textInputBackgroundColorUneditable
     if (suppressEmptyUneditable && field.value === '') {
       box.style.display = 'none' // clutter
diff --git a/src/widgets/forms/fieldParams.ts b/src/widgets/forms/fieldParams.ts
index 72cef7c9d..a3e40b93c 100644
--- a/src/widgets/forms/fieldParams.ts
+++ b/src/widgets/forms/fieldParams.ts
@@ -28,6 +28,7 @@ export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = {
   [ns.ui('ColorField').uri]: {
     size: 9,
     type: 'color',
+    style: 'height: 3em;', // around 1.5em is padding
     dt: 'color',
     pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
   }, // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
@@ -55,21 +56,21 @@ export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = {
 
   [ns.ui('IntegerField').uri]: {
     size: 12,
-    style: 'text-align: right',
+    style: 'text-align: right;',
     dt: 'integer',
     pattern: /^\s*-?[0-9]+\s*$/
   },
 
   [ns.ui('DecimalField').uri]: {
     size: 12,
-    style: 'text-align: right',
+    style: 'text-align: right;',
     dt: 'decimal',
     pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
   },
 
   [ns.ui('FloatField').uri]: {
     size: 12,
-    style: 'text-align: right',
+    style: 'text-align: right;',
     dt: 'float',
     pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
   },
diff --git a/test/unit/widgets/forms/basic.test.ts b/test/unit/widgets/forms/basic.test.ts
index 5433a3605..a3977d428 100644
--- a/test/unit/widgets/forms/basic.test.ts
+++ b/test/unit/widgets/forms/basic.test.ts
@@ -647,7 +647,7 @@ describe('basicField', () => {
       callbackFunction
     )
     const style = (result.childNodes[1].childNodes[0] as HTMLInputElement).getAttribute('style')
-    expect(style).toEqual('text-align: right')
+    expect(style).toEqual('background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;text-align: right;')
   })
 
   it('Defaults to textInputStyle', () => {