양식 및 입력 상자 이온

클래스 목록은 입력 요소를 사용할 수있다. 항목 입력하고 항목 범주 텍스트 상자와 레이블을 지정합니다.

입력 상자 속성 : 자리

다음의 예는, 기본값은 100 폭 (좌우 테두리 없음)의 %, 메시지 입력 필드 자리 표시 자 속성 세트 예상 값을 사용합니다.

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>

»시도

입력 상자 속성 : 입력 레이블

입력 상자 입력의 왼쪽에 배치 된 라벨의 입력 라벨 용도.

<div class="list">
  <label class="item item-input">
    <span class="input-label">用户名：</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">密码：</span>
    <input type="password">
  </label>
</div>

»시도

누적 된 탭

스태킹 라벨 입력 상자는 일반적으로 머리에 있습니다. 각 옵션 항목-적층 레이블 클래스 지정을 사용합니다. 각 입력 상자에 입력 레이블을 지정합니다. 다음 예는 자리 표시 자 정보 입력 프롬프트를 속성을 설정하는 데 사용됩니다.

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="[email protected]">
  </label>
</div>

»시도

부동 라벨

유사 떠있는 레이블은 레이블 스택,하지만 라벨은 당신이 입력 레이블을 지정해야합니다 레이블을 입력 항목-부동 라벨 카테고리를 지정해야 각 옵션에 떠있는 애니메이션 효과가있다.

<div class="list">
  <label class="item item-input item-floating-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="Email">
  </label>
</div>

»시도

임베디드 양식

기본적으로 각 입력 필드 폭은 100 %이지만, 우리는 목록리스트 삽입 클래스 카드를 사용하거나 폼의 패딩 (패딩), 그림자와 카드 종류를 설정할 수 있습니다.

<div class="list list-inset">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
</div>

»시도

인라인 입력란

목록-삽입 세트 인라인 개체 목록을 사용합니다. 버튼을 포함 할 수 있습니다 항목 입력 - 인세 스타일을 사용합니다.

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Email">
    </label>
    <button class="button button-small">
      Submit
    </button>
  </div>

</div>

»시도

입력 상자 아이콘

항목 입력 입력 상자 아이콘을 추가하는 것은 매우 간단 할 수있다. 추가하기 전에 <입력>의 아이콘입니다.

<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
</div>

»시도

입력 상자의 머리

입력 상자가 머리에 배치 할 수 있으며, 제출 버튼을 추가하거나 취소 할 수 있습니다.

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="搜索">
  </label>
  <button class="button button-clear">
    取消
  </button>
</div>

»시도