Tweak examples

docs/forms.md

@@ -31,7 +31,7 @@ We can combine the two by making the React state be the "single source of truth"
 
 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:
 
-```javascript{4,10-12,23}
+```javascript{4,10-12,24}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
@@ -64,7 +64,7 @@ class NameForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/oYNzxY?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
 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.
 
@@ -88,7 +88,7 @@ In HTML, a `<textarea>` element defines its text by its children:
 
 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:
 
-```javascript{4-6,12-14,25}
+```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
   constructor(props) {
     super(props);
@@ -140,7 +140,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 
 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:
 
-```javascript{4,10-12,23}
+```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
   constructor(props) {
     super(props);
@@ -178,7 +178,7 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/QGWKQP?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
 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.
 

docs/uncontrolled-components.md

@@ -10,7 +10,7 @@ To write an uncontrolled component, instead of writing an event handler for ever
 
 For example, this code accepts a single name in an uncontrolled component:
 
-```javascript{8,16}
+```javascript{8,17}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
@@ -25,8 +25,10 @@ class NameForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
+        <label>
           Name:
           <input type="text" ref={(input) => this.input = input} />
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );
@@ -34,7 +36,7 @@ class NameForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/XNWjOj?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
 
 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.
 
@@ -42,15 +44,17 @@ Since an uncontrolled component keeps the source of truth in the DOM, it is some
 
 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`.
 
-```javascript{6}
+```javascript{7}
 render() {
   return (
     <form onSubmit={this.handleSubmit}>
+      <label>
         Name:
         <input
           defaultValue="Bob"
           type="text"
           ref={(input) => this.input = input} />
+      </label>
       <input type="submit" value="Submit" />
     </form>
   );