Latest web development tutorials

イオン形態および入力ボックス

クラスリストには、入力要素を使用することができます。 項目入力やアイテムカテゴリは、テキストボックスとそのラベルを指定します。

入力ボックスのプロパティ：プレースホルダ

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

»をお試しください

入力ボックスアイコンで

項目入力入力ボックスは、アイコンを追加することは非常に簡単であることができます。 追加する前の<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>

»をお試しください

入力ボックスのヘッド

入力ボックスには、頭の中に配置することができ、送信ボタンを追加したり、取り消すことができます。 

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

»をお試しください