updates documentation to represent options better

diff --git a/docs/pages/abide.md b/docs/pages/abide.md
index 7158846abe3be011002e0b061c90020974174629..bcf55260289a27cc19845d301468b851457f8227 100644 (file)
--- a/docs/pages/abide.md
+++ b/docs/pages/abide.md
@@ -22,7 +22,7 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc
       <label>Number Required
         <input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number">
         <span class="form-error">
-          Yo, you had better fill this out.
+          Yo, you had better fill this out, it's required.
         </span>
       </label>
       <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
@@ -30,9 +30,6 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc
     <div class="small-12 columns">
       <label>Nothing Required!
         <input type="text" placeholder="Use me, or don't" aria-describedby="exampleHelpTex" data-abide-ignore>
-        <span class="form-error">
-          Yo, you had better fill this out.
-        </span>
       </label>
       <p class="help-text" id="exampleHelpTex">This input is ignored by Abide using `data-abide-ignore`</p>
     </div>
@@ -40,10 +37,10 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc
       <label>Password Required
         <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
         <span class="form-error">
-          Yo, you had better fill this out.
+          I'm required!
         </span>
       </label>
-      <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
+      <p class="help-text" id="exampleHelpText">Enter a password please.</p>
     </div>
     <div class="small-12 columns">
       <label>Re-enter Password
@@ -52,17 +49,17 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc
           Hey, passwords are supposed to match!
         </span>
       </label>
-      <p class="help-text" id="exampleHelpText2">Here's how you use this input field!</p>
+      <p class="help-text" id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
     </div>
   </div>
   <div class="row">
     <div class="medium-6 columns">
-      <label>URL Pattern, Not Required
+      <label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
         <input type="text" placeholder="http://foundation.zurb.com" pattern="url">
       </label>
     </div>
     <div class="medium-6 columns">
-      <label>European Cars, Choose One
+      <label>European Cars, Choose One, it can't be the blank option.
         <select id="select" required>
           <option value=""></option>
           <option value="volvo">Volvo</option>
@@ -75,13 +72,13 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc
   </div>
   <div class="row">
     <fieldset class="large-6 columns">
-      <legend>Choose Your Favorite</legend>
+      <legend>Choose Your Favorite, and this is required, so you have to pick one.</legend>
       <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
       <input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required><label for="pokemonBlue">Blue</label>
       <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
     </fieldset>
     <fieldset class="large-6 columns">
-      <legend>Choose Your Favorite</legend>
+      <legend>Choose Your Favorite - not required, you can leave this one blank.</legend>
       <input type="radio" name="pockets" value="Red" id="pocketsRed"><label for="pocketsRed">Red</label>
       <input type="radio" name="pockets" value="Blue" id="pocketsBlue"><label for="pocketsBlue">Blue</label>
       <input type="radio" name="pockets" value="Yellow" id="pocketsYellow"><label for="pocketsYellow">Yellow</label>