入力項目／フォーム入力項目

入力項目を使用すると、柔軟で美しいフォームレイアウトを作成できます。

入力項目レイアウト

リストビューと入力項目を併用することをお勧めします。

<div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

場所

item-input - item-content に必要な追加クラス。正しい入力項目レイアウトのために必要です。
item-label - ラベルを正しく表示するために必要なitem-titleの追加クラス。
item-input-wrap - 必要な追加入力ラッパー。item-innerの子要素である必要があります。
<span class="input-clear-button"> - クリックで入力値をクリアするボタン。*オプション*。

積み重ねられたラベル

デフォルトでは、入力リストは積み重ねられたラベルで表示されます。積み重ねられたラベルは常に入力の上部に表示されます。

<div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

場所

item-title item-label - 入力ラベル

フローティングラベル

フローティングラベルを追加するには、item-labelの代わりにitem-floating-labelクラスを使用する必要があります。

<div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <!-- "item-floating-label" class on item title -->
        <div class="item-title item-floating-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

アウトライン入力

入力を「アウトライン」（入力周囲の境界線付き）にするには、メインのリスト入力要素にitem-input-outlineクラスを追加する必要があります。

<div class="list">
  <ul>
    ...
    <!-- additional "item-input-outline" class -->
    <li class="item-content item-input item-input-outline">
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

項目情報

フォーム入力に関する追加情報も可能です。

<div class="list">
  <ul>
    ...
    <!-- additional "item-input-with-info" class on item -->
    <li class="item-content item-input item-input-with-info">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
          <!-- element with additional information -->
          <div class="item-input-info">Some information about input field</div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

場所

item-input-with-info - 入力項目に必要な追加クラス。
<div class="item-input-info">...</div> - 追加情報を含む要素。

追加のinput-dropdown-wrapクラスを使用して、ドロップダウン入力（セレクトなど）を示すこともできます。これにより、右側に小さなドロップダウンアイコン（▼）が追加されます。

<div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <!-- additional "input-dropdown-wrap" class -->
        <div class="item-input-wrap input-dropdown-wrap">
          <select>
            ...
          </select>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

サポートされている入力

item-input-wrap内に配置できる入力要素のリストを以下に示します。

すべてのテキスト入力	サポートされているタイプ: `text`、`password`、`email`、`tel`、`url`、`date`、`number`、`datetime-local` `... <div class="item-input-wrap"> <input type="text" /> </div> ... ... <div class="item-input-wrap"> <input type="email" /> </div> ...`
セレクト	`... <div class="item-input-wrap"> <select>...</select"> </div> ...`
テキストエリア	`... <div class="item-input-wrap"> <textarea></textarea> </div> ...`
レンジスライダー	`... <div class="item-input-wrap"> <div class="range-slider"> <input type="range" min="0" max="100" step="0.1" /> </div> </div> ...`

サイズ変更可能なテキストエリア

コンテンツに基づいてテキストエリアのサイズを自動的に変更するには、resizableクラスを追加するだけです。

<textarea class="resizable"></textarea>

バリデーション

Framework7は、入力プロパティvalidityに基づいてHTML5バリデーションをサポートしています。バリデーションが有効になっている場合、入力値が無効な場合にバリデーションエラーメッセージが表示されます。

バリデーションを有効にするには、入力要素にrequired属性とvalidate属性を追加する必要があります。

blurイベントでのみ入力バリデーションが必要な場合は、data-validate-on-blur="true"属性を追加する必要があります。

値のバリデーションは入力のtypeによって異なります。たとえば、input type="email"はメールパターンに一致するようにバリデートされます。これはデフォルトのブラウザの動作です。入力値にカスタムルールを追加する場合は、入力属性patternを使用して行う必要があります。

<!-- default validation, check for value is not empty -->
<input type="text" placeholder="Your name" required validate />

<!-- default email validation, value must be email -->
<input type="email" placeholder="Your e-mail" required validate />

<!-- default url validation -->
<input type="url" placeholder="Your URL" required validate />

<!-- pattern validation, value must be "apple" or "banana" -->
<input type="text" required validate pattern="apple|banana" placeholder="Type 'apple' or 'banana'" />

<!-- pattern validation with custom error message, value must be numbers only -->
<input type="text" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!" />

<!-- this input will be validated only on blur -->
<input type="text" placeholder="Your name" required validate data-validate-on-blur="true" />

入力状態クラス

入力の状態とコンテンツに応じて、入力要素に追加できるいくつかのクラスがあります。

input-with-value - 値がある場合に入力に追加されます。
input-focused - フォーカスされている場合に入力に追加されます。
input-invalid - 値が無効な場合に入力に追加されます。

同じ状態が入力の親item-input要素にも追加されます。

item-input-with-value - 入力が値を持つ場合、入力項目に追加されます。
item-input-focused - 入力がフォーカスされている場合、入力項目に追加されます。
item-input-invalid - 入力の値が無効な場合、入力項目に追加されます。

入力アプリパラメーター

グローバルアプリパラメーターを使用して、いくつかのデフォルトの入力動作を制御できます。ここでは、inputプロパティの下に入力関連のパラメーターを渡すことができます。

パラメーター	型	デフォルト	説明
scrollIntoViewOnFocus	boolean		有効にすると、入力フォーカス時に入力をビューにスクロールします。デフォルトではAndroidデバイスでのみ有効になっており、画面キーボードが入力と重なる問題を解決するのに役立ちます。
scrollIntoViewCentered	boolean	false	前のパラメーターの動作を調整して、入力フォーカス時にビューの中央に入力をスクロールします。
scrollIntoViewDuration	number	0	入力をビューにスクロールするためのデフォルト時間。
scrollIntoViewAlways	boolean	false	有効にすると、ビューの外にあるかどうかに関係なく、入力をビューにスクロールします。

例

var app = new Framework7({
  input: {
    scrollIntoViewOnFocus: true,
    scrollIntoViewCentered: true,
  }
});

入力アプリメソッド

入力の制御に使用できる次のアプリメソッドを使用できます。

app.input.scrollIntoView(inputEl, duration, centered, force)	入力をビューにスクロールします。 inputEl - HTMLElement または string（CSSセレクター付き）ビューに表示する必要がある入力要素。必須です。 duration - number - ミリ秒単位のスクロール時間。 centered - boolean - ビューの中央にスクロールする必要があるかどうかを定義します。 force - boolean - ビューの外にあるかどうかに関係なく、入力をビューにスクロールします。
app.input.focus(inputEl)	フォーカスされているときのように、入力に追加の必要なスタイルとクラスを追加します。 inputEl - HTMLElement または string（CSSセレクター付き）必要な入力要素。必須です。
app.input.blur(inputEl)	フォーカスを失ったときのように、入力に追加の必要なスタイルとクラスを削除します。 inputEl - HTMLElement または string（CSSセレクター付き）必要な入力要素。必須です。
app.input.resizeTextarea(textareaEl)	サイズ変更可能なテキストエリアを、そのコンテンツに応じてサイズ変更するように強制します。 textareaEl - HTMLElement または string（CSSセレクター付き）必要なテキストエリア要素。必須です。
app.input.checkEmptyState(inputEl)	値があるかどうかを基に、入力要素に追加の必要なスタイルとクラスを再計算します。 inputEl - HTMLElement または string（CSSセレクター付き）必要なテキストエリア要素。必須です。
app.input.validate(inputEl)	入力を検証します。 inputEl - HTMLElement または string（CSSセレクター付き）必要なテキストエリア要素。必須です。メソッドは、入力が有効な場合は`true`を、無効な場合は`false`を返します。
app.input.validateInputs(containerEl)	渡されたコンテナ内のすべての入力を検証します。 containerEl - HTMLElement または string（CSSセレクター付き）検証する入力要素を含む要素。必須です。メソッドは、すべての子入力が有効な場合は`true`を、少なくとも1つの入力が無効な場合は`false`を返します。

入力イベント

入力は、次のDOMイベント入力要素を発生させます。

イベント	ターゲット	説明
textarea:resize	テキストエリア要素<textarea class="resizable">	サイズ変更可能なテキストエリアのサイズ変更後にトリガーされます。`event.detail`には、`initialHeight`、`currentHeight`、`scrollHeight`プロパティを持つオブジェクトが含まれます。
input:notempty	入力要素<input/textarea>	入力値が空でなくなったときにトリガーされます。
input:empty	入力要素<input/textarea>	入力値が空になったときにトリガーされます。
input:clear	入力要素<input/textarea>	入力クリアボタンをクリックして入力値がクリアされた後にトリガーされます。

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

コメントアウトされた変数はデフォルトでは指定されておらず、その値はここではフォールバック値となります。

:root {
  --f7-input-bg-color: transparent;
  --f7-label-font-weight: 400;
  --f7-label-height: 16px;
  --f7-label-font-size: 12px;
  --f7-floating-label-scale: calc(16 / 12);
  --f7-input-padding-left: 0px;
  --f7-input-padding-right: 0px;
  --f7-input-error-text-color: #ff3b30;
  --f7-input-error-font-size: 12px;
  --f7-input-error-line-height: 1.4;
  --f7-input-error-font-weight: 400;
  --f7-input-info-font-size: 12px;
  --f7-input-info-line-height: 1.4;
  --f7-textarea-height: 100px;
  /*
  --f7-input-outline-focused-border-color: var(--f7-theme-color);
  --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
  */
}
.ios {
  --f7-input-item-bg-color: transparent;
  --f7-input-item-border-radius: 0px;
  --f7-input-height: 40px;
  --f7-input-font-size: 16px;
  --f7-input-placeholder-color: #a9a9a9;
  --f7-textarea-padding-vertical: 8px;
  /*
  --f7-input-focused-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  */
  --f7-label-text-color: inherit;
  /*
  --f7-label-focused-text-color: var(--f7-label-text-color);
  --f7-label-invalid-text-color: var(--f7-label-text-color);
  */
  --f7-input-clear-button-size: 14px;
  --f7-input-outline-border-radius: 8px;
  --f7-input-text-color: #000000;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
  --f7-input-outline-border-color: #bbb;
}
.ios .dark,
.ios.dark {
  --f7-input-text-color: #fff;
  --f7-input-info-text-color: rgba(255, 255, 255, 0.55);
  --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
  --f7-input-outline-border-color: #444;
}
.md {
  --f7-input-item-border-radius: 4px 4px 0 0;
  --f7-input-height: 24px;
  --f7-input-font-size: 16px;
  --f7-textarea-padding-vertical: 0px;
  --f7-input-outline-border-radius: 4px;
  /*
  --f7-input-focused-border-color: var(--f7-theme-color);
  --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  --f7-input-invalid-text-color: var(--f7-input-text-color);
  */
  /*
  --f7-label-focused-text-color: var(--f7-theme-color);
  --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  */
  --f7-floating-label-scale: calc(16 / 12);
  --f7-input-clear-button-size: 24px;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
}
.md .dark,
.md.dark {
  --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-input-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-input-item-bg-color: var(--f7-md-surface-variant);
  --f7-input-border-color: var(--f7-md-outline);
  --f7-input-clear-button-color: var(--f7-md-on-surface-variant);
  --f7-input-outline-border-color: var(--f7-md-outline);
  --f7-input-text-color: var(--f7-md-on-surface);
  --f7-label-text-color: var(--f7-md-on-surface-variant);
}

例

inputs.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Form Inputs</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Full Layout / Stacked Labels</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Phone</div>
            <div class="item-input-wrap">
              <input type="tel" placeholder="Your phone number">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Gender</div>
            <div class="item-input-wrap input-dropdown-wrap">
              <select placeholder="Please choose...">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
              </select>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Birthday</div>
            <div class="item-input-wrap">
              <input type="date" value="2014-04-30" placeholder="Please choose...">
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Date time</div>
            <div class="item-input-wrap">
              <input type="datetime-local" placeholder="Please choose...">
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Range</div>
            <div class="item-input-wrap">
              <div class="range-slider range-slider-init" data-label="true">
                <input type="range" value="50" min="0" max="100" step="1">
              </div>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Textarea</div>
            <div class="item-input-wrap">
              <textarea placeholder="Bio"></textarea>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Resizable</div>
            <div class="item-input-wrap">
              <textarea class="resizable" placeholder="Bio"></textarea>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Floating Labels</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Phone</div>
            <div class="item-input-wrap">
              <input type="tel" placeholder="Your phone number">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Bio</div>
            <div class="item-input-wrap">
              <textarea class="resizable" placeholder="Bio"></textarea>
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Outline Inputs</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Phone</div>
            <div class="item-input-wrap">
              <input type="tel" placeholder="Your phone number">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Bio</div>
            <div class="item-input-wrap">
              <textarea class="resizable" placeholder="Bio"></textarea>
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Floating Labels + Outline Inputs</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Phone</div>
            <div class="item-input-wrap">
              <input type="tel" placeholder="Your phone number">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-outline">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-floating-label">Bio</div>
            <div class="item-input-wrap">
              <textarea class="resizable" placeholder="Bio"></textarea>
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Validation + Additional Info</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name" required validate>
              <span class="input-clear-button"></span>
              <div class="item-input-info">Default "required" validation</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Fruit</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Type 'apple' or 'banana'" required validate pattern="apple|banana">
              <span class="input-clear-button"></span>
              <div class="item-input-info">Pattern validation (<b>apple|banana</b>)</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail" required validate>
              <span class="input-clear-button"></span>
              <div class="item-input-info">Default e-mail validation</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="Your URL" required validate>
              <span class="input-clear-button"></span>
              <div class="item-input-info">Default URL validation</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-title item-label">Number</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Enter number" required validate pattern="[0-9]*"
                data-error-message="Only numbers please!">
              <span class="input-clear-button"></span>
              <div class="item-input-info">With custom error message</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Icon + Input</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Label + Input</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Password</div>
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">E-mail</div>
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">URL</div>
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Only Inputs</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Inputs + Additional Info</div>
    <div class="list list-strong-ios list-dividers-ios inset-ios">
      <ul>
        <li class="item-content item-input item-input-with-info">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="text" placeholder="Your name">
              <span class="input-clear-button"></span>
              <div class="item-input-info">Full name please</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="password" placeholder="Your password">
              <span class="input-clear-button"></span>
              <div class="item-input-info">8 characters minimum</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="email" placeholder="Your e-mail">
              <span class="input-clear-button"></span>
              <div class="item-input-info">Your work e-mail address</div>
            </div>
          </div>
        </li>
        <li class="item-content item-input item-input-with-info">
          <div class="item-inner">
            <div class="item-input-wrap">
              <input type="url" placeholder="URL">
              <span class="input-clear-button"></span>
              <div class="item-input-info">Your website URL</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>