イオンフォームと入力ボックス

list クラスは入力要素にも使用できます。 item-input クラスと item クラスは、テキスト ボックスとそのラベルを指定します。

入力ボックスの属性: プレースホルダー

次の例では、デフォルトは幅 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>

入力ボックス属性: input-label

input-label を使用して、入力ボックス入力の左側にラベルを配置します。

<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>

スタッキングタグ

スタッキングタグは通常、入力ボックスの先頭にあります。各オプションは item-stacked-label クラスを使用して指定されます。 各入力ボックスでは、input-label を指定する必要があります。次の例では、プレースホルダー属性を使用して情報入力プロンプトを設定しています。

<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="john@suhr.com">
  </label>
</div>

フローティングラベル

フローティングラベルはスタックラベルに似ていますが、フローティングラベルにはアニメーション効果があります。各オプションでは item-floating-label クラスを指定する必要があり、入力ラベルでは input-label を指定する必要があります。 。

<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%ですが、list list-insetまたはcardクラスを使用してフォームのパディングを設定できます。 カード クラスにはシャドウがあります。

<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>

インライン入力フィールド

list-inset を使用してインラインエンティティリストを設定します。 item-input-inset スタイルを使用してボタンを埋め込みます。

<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>

アイコン付き入力ボックス

item-input 入力ボックスは簡単にアイコンを追加できます。 アイコンは <input> の前に追加できます。

<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>

ヘッダー入力ボックス

ヘッダーに入力ボックスを配置し、送信ボタンやキャンセルボタンを追加できます。