docs(select): update live examples to use labels (#15095)

* Fixes a few examples that didn't have labels for the native select.
* Switches all of the examples to use the `mat-label`, instead of a `placeholder`.

Fixes #15022.

Author: crisbeto

src/material-examples/select-disabled/select-disabled-example.html

@@ -4,7 +4,8 @@
 
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
+  <mat-label>Choose an option</mat-label>
+  <mat-select [disabled]="disableSelect.value">
     <mat-option value="option1">Option 1</mat-option>
     <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
     <mat-option value="option3">Option 3</mat-option>
@@ -13,7 +14,8 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field>
-  <select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
+  <mat-label>Choose an option</mat-label>
+  <select matNativeControl [disabled]="disableSelect.value">
     <option value="" selected></option>
     <option value="volvo">Volvo</option>
     <option value="saab" disabled>Saab</option>

src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html

@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
+  <mat-label>Choose one</mat-label>
+  <mat-select [formControl]="selected" [errorStateMatcher]="matcher">
     <mat-option>Clear</mat-option>
     <mat-option value="valid">Valid option</mat-option>
     <mat-option value="invalid">Invalid option</mat-option>
@@ -14,7 +15,8 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field class="demo-full-width">
-  <select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
+  <mat-label>Choose one</mat-label>
+  <select matNativeControl [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
     <option value=""></option>
     <option value="valid" selected>Valid option</option>
     <option value="invalid">Invalid option</option>

src/material-examples/select-form/select-form-example.html

@@ -1,7 +1,8 @@
 <form>
   <h4>mat-select</h4>
   <mat-form-field>
-    <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+    <mat-label>Favorite food</mat-label>
+    <mat-select [(ngModel)]="selectedValue" name="food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
       </mat-option>
@@ -10,7 +11,8 @@ <h4>mat-select</h4>
   <p> Selected food: {{selectedValue}} </p>
   <h4>native html select</h4>
   <mat-form-field>
-    <select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
+    <mat-label>Favorite car</mat-label>
+    <select matNativeControl [(ngModel)]="selectedCar" name="car">
       <option value="" selected></option>
       <option *ngFor="let car of cars" [value]="car.value">
         {{car.viewValue}}

src/material-examples/select-hint-error/select-hint-error-example.html

@@ -1,6 +1,7 @@
 <h4>mat select</h4>
 <mat-form-field>
-  <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
+  <mat-label>Favorite animal</mat-label>
+  <mat-select [formControl]="animalControl" required>
     <mat-option>--</mat-option>
     <mat-option *ngFor="let animal of animals" [value]="animal">
       {{animal.name}}

src/material-examples/select-multiple/select-multiple-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
+  <mat-label>Toppings</mat-label>
+  <mat-select [formControl]="toppings" multiple>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
   </mat-select>
 </mat-form-field>

src/material-examples/select-no-ripple/select-no-ripple-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Select an option" disableRipple>
+  <mat-label>Select an option</mat-label>
+  <mat-select disableRipple>
     <mat-option value="1">Option 1</mat-option>
     <mat-option value="2">Option 2</mat-option>
     <mat-option value="3">Option 3</mat-option>

src/material-examples/select-optgroup/select-optgroup-example.html

@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
+  <mat-label>Pokemon</mat-label>
+  <mat-select [formControl]="pokemonControl">
     <mat-option>-- None --</mat-option>
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                   [disabled]="group.disabled">
@@ -13,6 +14,7 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field>
+  <mat-label>Cars</mat-label>
   <select matNativeControl>
     <optgroup label="Swedish Cars">
       <option value="volvo">volvo</option>

src/material-examples/select-overview/select-overview-example.html

@@ -1,6 +1,7 @@
 <h4>Basic mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Favorite food">
+  <mat-label>Favorite food</mat-label>
+  <mat-select>
     <mat-option *ngFor="let food of foods" [value]="food.value">
       {{food.viewValue}}
     </mat-option>
@@ -9,6 +10,7 @@ <h4>Basic mat-select</h4>
 
 <h4>Basic native select</h4>
 <mat-form-field>
+  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>

src/material-examples/select-panel-class/select-panel-class-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Panel color" [formControl]="panelColor"
+  <mat-label>Panel color</mat-label>
+  <mat-select [formControl]="panelColor"
               panelClass="example-panel-{{panelColor.value}}">
     <mat-option value="red">Red</mat-option>
     <mat-option value="green">Green</mat-option>

src/material-examples/select-reset/select-reset-example.html

@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="State">
+  <mat-label>State</mat-label>
+  <mat-select>
     <mat-option>None</mat-option>
     <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
   </mat-select>

src/material-examples/select-value-binding/select-value-binding-example.html

@@ -1,4 +1,5 @@
 <mat-form-field>
+  <mat-label>Select an option</mat-label>
   <mat-select [(value)]="selected">
     <mat-option>None</mat-option>
     <mat-option value="option1">Option 1</mat-option>