ionic-framework/e2e/text-input/floating-labels/main.html

<ion-toolbar><ion-title>Floating Label Text Input</ion-title></ion-toolbar>


<ion-content>

  <ion-list inset>

    <ion-input floating-label>
      <ion-label>Floating Label 1</ion-label>
      <input [(ng-model)]='myValues.value1' type="text">
    </ion-input>
    Value: {{ myValues.value1 }}

    <ion-input floating-label>
      <ion-label>Floating Label 2</ion-label>
      <input value="Has Value" type="text">
    </ion-input>

    <ion-input floating-label>
      <ion-label>Floating Label 3</ion-label>
      <input type="number">
    </ion-input>

    <ion-input floating-label>
      <ion-label primary>Floating Label 4</ion-label>
      <textarea [(ng-model)]='myValues.value2'></textarea>
    </ion-input>
    Value: {{ myValues.value2 }}

    <ion-input floating-label>
      <ion-label secondary>Floating Label 5</ion-label>
      <input type="url">
    </ion-input>

    <ion-input floating-label>
      <ion-label danger>Floating Label 6</ion-label>
      <input type="email">
    </ion-input>

    <ion-input floating-label>
      <ion-label>Floating Label 7</ion-label>
      <textarea></textarea>
    </ion-input>

    <ion-input floating-label>
      <ion-label>Floating Label 8</ion-label>
      <input type="text">
    </ion-input>

    <ion-input floating-label>
      <ion-label>Floating Label 9</ion-label>
      <input type="number">
    </ion-input>

    <ion-input floating-label>
      <ion-label>Floating Label 10</ion-label>
      <textarea></textarea>
    </ion-input>

  </ion-list>

</ion-content>