added additional locator example

Author: eviltester

java/testingapps/seleniumtestpages/src/main/resources/pagehtml/locatorapproaches/about.html

@@ -23,7 +23,8 @@ <h3 id="exercises-for-automating">Exercises for Automating</h3>
     <li><code>by xpath li</code> - find the <code>li</code> with a child span which has an id <code>child-of-li</code> using an XPath selector</li>
     <li><code>image</code> button - find the image with the alt tag <code>an image of a button</code></li>
     <li><code>testid li</code> - find the <code>li</code> with a test id attribute <code>data-testid</code></li>
-    <li><code>labeled input value</code> - find the input field with the label <code>labeled</code></li>
+    <li><code>labeled wrapped input value</code> - find the input field with the label <code>label wrapped</code> (the input field is a child of the label)</li>
+    <li><code>label for labeled input</code> - the label element <code>label for</code> is &#39;for&#39; the input element (the input is a peer of the label, the <code>for</code> matches the <code>id</code>) </li>
     <li><code>find by placeholder</code> - find the input field with the placeholder <code>inputplaceholder</code></li>
     <li><code>titled li</code> - find the <code>li</code> with title <code>li with title</code></li>
     <li><code>presentation role li</code> - find the <code>li</code> with the Aria role <code>presentation</code></li>

java/testingapps/seleniumtestpages/src/main/resources/pagehtml/locatorapproaches/about.md

@@ -30,7 +30,8 @@ Locate each of the items below and automate an assertion against the element.
 - `by xpath li` - find the `li` with a child span which has an id `child-of-li` using an XPath selector
 - `image` button - find the image with the alt tag `an image of a button`
 - `testid li` - find the `li` with a test id attribute `data-testid`
-- `labeled input value` - find the input field with the label `labeled`
+- `labeled wrapped input value` - find the input field with the label `label wrapped` (the input field is a child of the label)
+- `label for labeled input` - the label element `label for` is 'for' the input element (the input is a peer of the label, the `for` matches the `id`) 
 - `find by placeholder` - find the input field with the placeholder `inputplaceholder`
 - `titled li` - find the `li` with title `li with title`
 - `presentation role li` - find the `li` with the Aria role `presentation`

java/testingapps/seleniumtestpages/src/main/resources/web/styled/locator-approaches.html

@@ -51,7 +51,8 @@ <h1 id="approaches">Locator Approaches</h1>
             <li><span id="child-of-li">by xpath</span> li</li>
             <li>by alt <img id="image-button" alt="an image of a button" src="/images/buttons/button_image.png" onclick="clickImageButton()"/></li>
             <li data-testid="testid">testid li</li>
-            <li><label>labeled <input type="text" size="15" name="input-value" value="input value"/></label></li>
+            <li><label>label wrapped <input type="text" size="15" name="input-value" value="input value"/></label></li>
+            <li><label for="labeled-input">label for</label> <input id="labeled-input" type="text" size="15" name="labeled-input" value="labeled input"/></label></li>
             <li><input type="text" placeholder="inputplaceholder" name="by-placeholder" value="find by placeholder" size="20" onclick="clickPlaceholderInput()" /></li>
             <li title="li with title">titled li</li>
             <li role="presentation">presentation role li</li>