From daeb3405c8b5ef483f5f1bb536ab1d5b28627740 Mon Sep 17 00:00:00 2001
From: Scott O'Hara <scottaohara@users.noreply.github.com>
Date: Thu, 29 Nov 2018 11:19:34 -0500
Subject: [PATCH] update label instances

Fixes #28

This update gives text fields unique `id`s so that their `label`s can be appropriately associated with them.

Additionally, this PR also changes the examples of the `.container` class to **not** use `label`s as the first element, as `label`s were inappropriate for these markup patterns.  They have been replaced by paragraph elements.
---
 index.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 512f9c9..3f7a704 100644
--- a/index.html
+++ b/index.html
@@ -54,11 +54,11 @@
       <h2 class="title">Containers</h2>
       <div class="containers">
         <div class="container with-title is-center">
-          <label class="title">Container.is-center</label>
+          <p class="title">Container.is-center</p>
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
         <div class="container is-dark with-title">
-          <label class="title">Container.is-dark</label>
+          <p class="title">Container.is-dark</p>
           <p style="color: white;">Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
         <div class="container is-rounded">
@@ -95,20 +95,20 @@
     <section class="form container with-title">
       <h2 class="title">Form</h2>
       <div class="field">
-        <label>Your name</label>
-        <input type="text" class="input">
+        <label for="name_field">Your name</label>
+        <input type="text" id="name_field" class="input">
       </div>
       <div class="field is-inline">
-        <label>.input.is-success</label>
-        <input type="text" class="input is-success" placeholder="NES.css">
+        <label for="inline_field">.input.is-success</label>
+        <input type="text" id="inline_field" class="input is-success" placeholder="NES.css">
       </div>
       <div class="field is-inline">
-        <label>.input.is-warning</label>
-        <input type="text" class="input is-warning" placeholder="8bit.css">
+        <label for="warning_field>.input.is-warning</label>
+        <input type="text" id="warning_field class="input is-warning" placeholder="8bit.css">
       </div>
       <div class="field is-inline">
-        <label>.input.is-error</label>
-        <input type="text" class="input is-error" placeholder="awesome.css">
+        <label for="error_field">.input.is-error</label>
+        <input type="text" id="error_field" class="input is-error" placeholder="awesome.css">
       </div>
     </section>