Fix hidden fields

form/field.css

@@ -2,7 +2,6 @@
   display: flex;
   align-items: center;
   background-color: var(--color-field);
-  margin: 0.2em 0px;
 }
 
 .field--grid {
@@ -14,6 +13,7 @@
 }
 
 .field--error {
+
 }
 .field--error .field__input { 
   border: solid 2px red;

form/form.html

@@ -18,44 +18,37 @@
   <h1>Full-page form (flexbox fields)</h1>
   <form class="form form--full-page" action="#" method="post">
     <h1 class="form__title">Form title</h1>
-    <div class="form__field">
-      <div class="field" id="input-text">
-        <label class="field__label" for="text">Text</label>
-        <input class="field__input input" type="text" name="text" label="Text">
-        <p class="field__error-help-msg"></p>
-      </div>
+    <div class="form__field field" id="input-text">
+      <label class="field__label" for="text">Text</label>
+      <input class="field__input input" type="text" name="text" label="Text">
+      <p class="field__error-help-msg"></p>
     </div>
-    <div class="form__field">
-      <div class="field" id="input-radio">
-        <label class="field__label" for="radio">Radio</label>
-        <div class="field__input radio radio--grid">
-          <input class="radio__option" type="radio" value="Option 1" name="radio" id="option-1">
-          <label class="radio__label" for="option-1">Option 1</label>
-          <input class="radio__option" type="radio" value="Option 2" name="radio" id="option 2">
-          <label class="radio__label" for="option-2">Option 2</label>
-          <input class="radio__option" type="radio" value="Option 3" name="radio" id="option-3">
-          <label class="radio__label" for="option-3">Option 3</label>
-          </div>
-        <p class="field__error-help-msg"></p>
+    <div class="form__field field" id="input-radio">
+      <label class="field__label" for="radio">Radio</label>
+      <div class="field__input radio radio--grid">
+        <input class="radio__option" type="radio" value="Option 1" name="radio" id="option-1">
+        <label class="radio__label" for="option-1">Option 1</label>
+        <input class="radio__option" type="radio" value="Option 2" name="radio" id="option 2">
+        <label class="radio__label" for="option-2">Option 2</label>
+        <input class="radio__option" type="radio" value="Option 3" name="radio" id="option-3">
+        <label class="radio__label" for="option-3">Option 3</label>
       </div>
-    </div>
-    <div class="form__field">
-      <div class="field" id="input-select">
-        <label class="field__label" for="select">Select</label>
-        <select class="field__input select" id="select" name="select">
-          <option class="select__option" value="option-1">Option 1</option>
-          <option class="select__option" value="option-2">Option 2</option>
-          <option class="select__option" value="option-3">Option 3</option>
-        </select>
-        <p class="field__error-help-msg"></p>
+      <p class="field__error-help-msg"></p>
       </div>
     </div>
-    <div class="form__field">
-      <div class="field" id="input-textarea">
-        <label class="field__label" for="textarea">Textarea</label>
-        <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
-        <p class="field__error-help-msg"></p>
-      </div>
+    <div class="form__field field" id="input-select">
+      <label class="field__label" for="select">Select</label>
+      <select class="field__input select" id="select" name="select">
+        <option class="select__option" value="option-1">Option 1</option>
+        <option class="select__option" value="option-2">Option 2</option>
+        <option class="select__option" value="option-3">Option 3</option>
+      </select>
+      <p class="field__error-help-msg"></p>
+    </div>
+    <div class="form__field field" id="input-textarea">
+      <label class="field__label" for="textarea">Textarea</label>
+      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
+      <p class="field__error-help-msg"></p>
     </div>
     <div class="form__field field" id="input-multiple">
       <label class="field__label" for="multiple">Select multiple</label>
@@ -66,7 +59,7 @@
       </select>
       <p class="field__error-help-msg"></p>
     </div>
-    <div class="form__field">
+    <div class="form__field field">
       <input class="input input--hidden" type="hidden" name="kind" value="internetcontent">
     </div>
     <button class="form__submit button button-success" type="submit">Go</button>
@@ -109,11 +102,8 @@
         <option class="select__option" value="option2">Option 2</option>
         <option class="select__option" value="option3">Option 3</option>
       </select>
-      <p class="field__error-help-msg"></p>
-    </div>
-    <div class="form__field">
-      <input class="input input--hidden" type="hidden" name="kind" value="internetcontent">
     </div>
+    <input class="input input--hidden" type="hidden" name="kind" value="internetcontent">
     <button class="form__submit button button-success" type="submit">Go</button>
   </form>
 
@@ -167,7 +157,7 @@
     <button class="form__submit button button-success" type="submit">Go</button>
   </form>
 
-  <h1>Inline forms</h1>
+  <h1>Horizontal, one-line forms</h1>
   <form class="form form--horizontal" action="#" method="post">
     <div class="form__field">
       <div class="field" id="input-text">
@@ -208,7 +198,19 @@
     <button class="form__submit button button-success" type="submit">Go</button>
   </form>
 
-  <h1>Tag-like forms</h1>
+  <div style="display: flex; align-items: flex-end;">
+    <form class="form form--horizontal" action="#" method="post">
+      <div class="form__field">
+        <div class="field" id="input-text">
+          <label class="field__label" for="text">Text</label>
+          <input class="field__input input" type="text" name="text" label="Text">
+        </div>
+      </div>
+      <button class="form__submit button button-success" type="submit">Go</button>
+    </form>
+  </div>
+
+  <h1>Inline forms</h1>
   <form class="form form--inline" action="#" method="post">
     <h1 class="form__title">the tag</h1>
     <button class="form__submit button button--inline button--danger" type="submit">&times;</button>

form/notes.md

@@ -13,3 +13,6 @@ add modifiers to `field__label` class or use sibling selectors
 * With an inline form, `form__submit` class requires `align-self` set to
 `center` for vertical alignment, and any combination of `align-items` /
 `justify-items` on the parent does nothing.
+
+* The hidden fields should not appear within `form__field` or `field` classes
+or they will eat up some space if those classes define some margin.