fix(a11y): add missing labels to forms doc

Showing how to create a form without labeling inputs is an accessibility anti-pattern. This change adds labels to the examples to address that. Codepen may still need to be updated depending on how that example is created.

docs/forms.md

@@ -13,8 +13,10 @@ HTML form elements work a little bit differently from other DOM elements in Reac
 
 ```html
 <form>
-  Name:
+  <label>
-  <input type="text" name="name" />
+    Name:
+    <input type="text" name="name" />
+  </label>
   <input type="submit" value="Submit" />
 </form>
 ```
@@ -51,8 +53,10 @@ class NameForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        Name:
+        <label>
-        <input type="text" value={this.state.value} onChange={this.handleChange} />
+          Name:
+          <input type="text" value={this.state.value} onChange={this.handleChange} />
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );
@@ -108,8 +112,10 @@ class EssayForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        Name:
+        <label>
-        <textarea value={this.state.value} onChange={this.handleChange} />
+          Name:
+          <textarea value={this.state.value} onChange={this.handleChange} />
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );
@@ -156,13 +162,15 @@ class FlavorForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        Pick your favorite La Croix flavor:
+        <label>
-        <select value={this.state.value} onChange={this.handleChange}>
+          Pick your favorite La Croix flavor:
-          <option value="grapefruit">Grapefruit</option>
+          <select value={this.state.value} onChange={this.handleChange}>
-          <option value="lime">Lime</option>
+            <option value="grapefruit">Grapefruit</option>
-          <option value="coconut">Coconut</option>
+            <option value="lime">Lime</option>
-          <option value="mango">Mango</option>
+            <option value="coconut">Coconut</option>
-        </select>
+            <option value="mango">Mango</option>
+          </select>
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );