{"body":"docs(forms): add missing labels to forms doc","patch":"diff --git a\/docs\/docs\/forms.md b\/docs\/docs\/forms.md\nindex fdab540957..51cec75ad5 100644\n--- a\/docs\/docs\/forms.md\n+++ b\/docs\/docs\/forms.md\n@@ -13,8 +13,10 @@ HTML form elements work a little bit differently from other DOM elements in Reac\n \n ```html\n

\n- Name:\n- \n+ \n+ Name:\n+ \n+ <\/label>\n \n <\/form>\n ```\n@@ -29,7 +31,7 @@ We can combine the two by making the React state be the \"single source of truth\"\n \n For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:\n \n-```javascript{4,10-12,23}\n+```javascript{4,10-12,24}\n class NameForm extends React.Component {\n constructor(props) {\n super(props);\n@@ -51,8 +53,10 @@ class NameForm extends React.Component {\n render() {\n return (\n \n- Name:\n- \n+ \n+ Name:\n+ \n+ <\/label>\n \n <\/form>\n );\n@@ -60,7 +64,7 @@ class NameForm extends React.Component {\n }\n ```\n \n-[Try it on CodePen.](https:\/\/codepen.io\/lacker\/pen\/oYNzxY?editors=0010)\n+[Try it on CodePen.](https:\/\/codepen.io\/gaearon\/pen\/VmmPgp?editors=0010)\n \n Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.\n \n@@ -84,7 +88,7 @@ In HTML, a `

` element defines its text by its children:\n \n In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:\n \n-```javascript{4-6,12-14,25}\n+```javascript{4-6,12-14,26}\n class EssayForm extends React.Component {\n   constructor(props) {\n     super(props);\n@@ -108,8 +112,10 @@ class EssayForm extends React.Component {\n   render() {\n     return (\n       <form onSubmit={this.handleSubmit}>\n-        Name:\n-        <textarea value={this.state.value} onChange={this.handleChange} \/>\n+        <label>\n+          Name:\n+          <textarea value={this.state.value} onChange={this.handleChange} \/>\n+        <\/label>\n         <input type=\"submit\" value=\"Submit\" \/>\n       <\/form>\n     );\n@@ -134,7 +140,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d\n \n Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:\n \n-```javascript{4,10-12,23}\n+```javascript{4,10-12,24}\n class FlavorForm extends React.Component {\n   constructor(props) {\n     super(props);\n@@ -156,13 +162,15 @@ class FlavorForm extends React.Component {\n   render() {\n     return (\n       <form onSubmit={this.handleSubmit}>\n-        Pick your favorite La Croix flavor:\n-        <select value={this.state.value} onChange={this.handleChange}>\n-          <option value=\"grapefruit\">Grapefruit<\/option>\n-          <option value=\"lime\">Lime<\/option>\n-          <option value=\"coconut\">Coconut<\/option>\n-          <option value=\"mango\">Mango<\/option>\n-        <\/select>\n+        <label>\n+          Pick your favorite La Croix flavor:\n+          <select value={this.state.value} onChange={this.handleChange}>\n+            <option value=\"grapefruit\">Grapefruit<\/option>\n+            <option value=\"lime\">Lime<\/option>\n+            <option value=\"coconut\">Coconut<\/option>\n+            <option value=\"mango\">Mango<\/option>\n+          <\/select>\n+        <\/label>\n         <input type=\"submit\" value=\"Submit\" \/>\n       <\/form>\n     );\n@@ -170,7 +178,7 @@ class FlavorForm extends React.Component {\n }\n ```\n \n-[Try it on CodePen.](https:\/\/codepen.io\/lacker\/pen\/QGWKQP?editors=0010)\n+[Try it on CodePen.](https:\/\/codepen.io\/gaearon\/pen\/JbbEzX?editors=0010)\n \n Overall, this makes it so that `<input type=\"text\">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.\n \ndiff --git a\/docs\/docs\/uncontrolled-components.md b\/docs\/docs\/uncontrolled-components.md\nindex d28c8b8dac..e464f319ef 100644\n--- a\/docs\/docs\/uncontrolled-components.md\n+++ b\/docs\/docs\/uncontrolled-components.md\n@@ -10,7 +10,7 @@ To write an uncontrolled component, instead of writing an event handler for ever\n \n For example, this code accepts a single name in an uncontrolled component:\n \n-```javascript{8,16}\n+```javascript{8,17}\n class NameForm extends React.Component {\n   constructor(props) {\n     super(props);\n@@ -25,8 +25,10 @@ class NameForm extends React.Component {\n   render() {\n     return (\n       <form onSubmit={this.handleSubmit}>\n-        Name:\n-        <input type=\"text\" ref={(input) => this.input = input} \/>\n+        <label>\n+          Name:\n+          <input type=\"text\" ref={(input) => this.input = input} \/>\n+        <\/label>\n         <input type=\"submit\" value=\"Submit\" \/>\n       <\/form>\n     );\n@@ -34,7 +36,7 @@ class NameForm extends React.Component {\n }\n ```\n \n-[Try it on CodePen.](https:\/\/codepen.io\/lacker\/pen\/XNWjOj?editors=0010)\n+[Try it on CodePen.](https:\/\/codepen.io\/gaearon\/pen\/WooRWa?editors=0010)\n \n Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.\n \n@@ -42,15 +44,17 @@ Since an uncontrolled component keeps the source of truth in the DOM, it is some\n \n In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.\n \n-```javascript{6}\n+```javascript{7}\n render() {\n   return (\n     <form onSubmit={this.handleSubmit}>\n-      Name:\n-      <input\n-        defaultValue=\"Bob\"\n-        type=\"text\"\n-        ref={(input) => this.input = input} \/>\n+      <label>\n+        Name:\n+        <input\n+          defaultValue=\"Bob\"\n+          type=\"text\"\n+          ref={(input) => this.input = input} \/>\n+      <\/label>\n       <input type=\"submit\" value=\"Submit\" \/>\n     <\/form>\n   );\n","commit":{"authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","revision":"862cedee94e3e3cb5855154b9093083d883955c9","subject":"Merge pull request #8317 from marcysutton\/master","shortRevision":"862cedee94","authoredAt":"2016-11-17T14:25:03+00:00"},"parents":["ad347a3b9266af9995f2ff115dfc08cf8c72c05b","3186a8b984490269de01d79f90735d9880324626"],"files":[{"status":"M","path":"docs\/docs\/forms.md"},{"status":"M","path":"docs\/docs\/uncontrolled-components.md"}]}</article></body></html>

dillon1000/react

Files changed