ionic-framework/angular/test/testapp/src/app/basic-inputs-page/basic-inputs-page.component.html

<ion-app>

  <ion-header>
    <ion-toolbar>
      <ion-title>Basic Inputs</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-grid>

      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Disable Inputs</ion-label>
            <ion-checkbox id="disableCheckbox" name="disableCheckbox" [(ngModel)]="disableInputs"></ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Text Input</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <label for="stdTextInput">Standard Input</label>
          <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs" />
        </ion-col>
        <ion-col>
          Value:
          <span id="textOutput">{{textValue}}</span>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Text Input</ion-label>
            <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Search Input</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Text Input</ion-label>
            <ion-searchbar id="ionSearchInput" name="ionSearchInput" [(ngModel)]="searchValue" minlength="10" [disabled]="disableInputs"></ion-searchbar>
          </ion-item>
        </ion-col>
        <ion-col>
          Value:
          <span id="searchOutput">{{searchValue}}</span>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Numeric Input</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Numeric Input</ion-label>
            <ion-input type="number" id="ionNumericInput" name="ionNumericInput" [(ngModel)]="numericValue" [disabled]="disableInputs"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col>
          <div>
            Value:
            <span id="numericOutput">{{numericValue}}</span>
          </div>
          <div>
            Type:
            <span id="numericOutputType">{{typeOf(numericValue)}}</span>
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Textarea Input</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <label for="stdTextareaInput">Standard Textarea Input</label>
          <textarea id="stdTextareaInput" name="stdTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></textarea>
        </ion-col>
        <ion-col>
          Value:
          <span id="textareaOutput">{{textareaValue}}</span>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Textarea Input</ion-label>
            <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></ion-textarea>
          </ion-item>
        </ion-col>
        <ion-col>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Checkbox</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <label for="stdCheckbox">Standard Checkbox</label>
          <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs" />
        </ion-col>
        <ion-col>
          Value:
          <span id="checkboxOutput">{{checkboxValue}}</span>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Checkbox</ion-label>
            <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs"></ion-checkbox>
          </ion-item>
        </ion-col>
        <ion-col>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Checkbox No ngModel</ion-label>
            <ion-checkbox id="ionCheckboxNoModel" name="ionCheckboxNoModel" [checked]="checkboxValue" (ionChange)="checkboxValue=$event.target.checked"
              [disabled]="disableInputs"></ion-checkbox>
          </ion-item>
        </ion-col>
        <ion-col>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Toggle</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <label for="stdToggle">Standard Toggle</label>
          <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs" />
        </ion-col>
        <ion-col>
          Value:
          <span id="toggleOutput">{{toggleValue}}</span>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Toggle</ion-label>
            <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs"></ion-toggle>
          </ion-item>
        </ion-col>
        <ion-col>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Select</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <label for="stdSelect">Select</label>
          <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs">
            <option value="bacon">Bacon</option>
            <option value="pepperoni">Pepperoni</option>
            <option value="ham" selected>Ham</option>
            <option value="sausage">Sausage</option>
            <option value="pineapple">Pineapple</option>
          </select>
        </ion-col>
        <ion-col>
          Value:
          <span id="selectOutput">{{selectValue}}</span>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Select</ion-label>
            <ion-select id="ionSelectInput" [(ngModel)]="selectValue" [disabled]="disableInputs">
              <ion-select-option value="bacon">Bacon</ion-select-option>
              <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
              <ion-select-option value="ham" selected>Ham</ion-select-option>
              <ion-select-option value="sausage">Sausage</ion-select-option>
              <ion-select-option value="pineapple">Pineapple</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Date Time Picker</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <label for="stdToggle">ISO Formatted Date</label>
          <input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs"
          />
        </ion-col>
        <ion-col>
          Value:
          <span id="datetimeOutput">{{datetimeValue}}</span>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label>Ionic Date</ion-label>
            <ion-datetime id="ionDatetimeInput" pickerFormat="YYYY-MM-DD HH:mm:ss" displayFormat="MM/DD/YYYY HH:mm:ss" name="ionDatetimeInput"
              [(ngModel)]="datetimeValue" [disabled]="disableInputs"></ion-datetime>
          </ion-item>
        </ion-col>
        <ion-col>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <h2>Range</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <label for="stdRangeInput">Range Value</label>
          <input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"  [disabled]="disableInputs" />
        </ion-col>
        <ion-col>
          Value:
          <span>{{rangeValue}}</span>
          <span>{{typeOf(rangeValue)}}</span>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-range id="ionRangeInput" [(ngModel)]="rangeValue" [disabled]="disableInputs"></ion-range>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
    </ion-grid>

  </ion-content>

  <ion-footer>
    <ion-toolbar>
      <a href='home'>Home</a>
    </ion-toolbar>
  </ion-footer>

</ion-app>