输入 / 表单输入

表单输入允许您创建灵活且美观的表单布局。

输入布局

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

Where:

item-input- 在item-content. Required for correct input item layout
item-label- additional class onitem-titlerequired to display label correctly
item-input-wrap- required additional input wrapper. Must be a direct child ofitem-inner
<span class="input-clear-button">- button that will clear input value in click.可选

堆叠标签

默认情况下，输入列表使用堆叠标签显示。堆叠标签始终出现在输入项的上方：

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

Where:

item-title item-label- 输入标签

浮动标签

要添加浮动标签，我们需要使用item-floating-labelclass 而不是 item-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-outlineclass：

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

Where:

item-input-with-info- 输入项上的附加类
<div class="item-input-info">...</div>- 附加信息元素

还可以使用附加input-dropdown-wrapclass 指示下拉输入（如 select）。它将在右侧添加一个小下拉图标（▼）：

<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> ...`
Textarea	`... <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> ...`

可调整大小的 Textarea

要使 textarea 根据其内容自动调整大小，我们只需添加resizable class:

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

验证

Framework7 支持HTML5 验证基于validityinput 属性。启用验证后，如果输入值无效，将出现验证错误消息。

要启用验证，我们必须添加：required和validate属性到输入元素。

如果我们只需要输入验证事件，则需要添加onblur属性。data-validate-on-blur="true" attribute.

值验证取决于输入type。例如input type="email"将验证以匹配电子邮件模式等。这是默认的浏览器行为。如果您想添加自定义规则来验证输入值，则必须使用patterninput 属性：

<!-- 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-inputelement:

item-input-with-value- 当输入项的输入有值时，将添加到输入项
item-input-focused- 当输入项的输入聚焦时，将添加到输入项
item-input-invalid- 当输入项的输入值无效时，将添加到输入项

输入应用参数

可以使用全局应用参数来控制一些默认输入行为，我们可以在input派发动作

参数	类型	默认	描述
scrollIntoViewOnFocus	布尔值		启用时将在输入聚焦时滚动输入到视图。默认情况下，它仅对安卓设备启用，因为它有助于解决屏幕键盘可能覆盖输入的问题
scrollIntoViewCentered	布尔值	false	调整前一个参数的行为，以将输入滚动到视图的中心center of viewon input focus
scrollIntoViewDuration	数字	0	滚动输入到视图的默认持续时间
scrollIntoViewAlways	布尔值	false	启用时，无论输入是否在视图外，都将滚动输入到视图

例如：

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

输入应用方法

我们可以使用以下应用方法来控制输入：

app.input.scrollIntoView(inputEl, duration, centered, force)	将输入滚动到视图 inputEl - HTMLElement或字符串（使用 CSS 选择器）所需的输入元素以进入视图。必需持续时间 - 数字- 滚动持续时间（毫秒）。 centered - 布尔值- 定义是否必须滚动到视图中心。 force - 布尔值- 无论输入是否在视图外，都将其滚动到视图。
app.input.focus(inputEl)	将添加额外的必需样式和类到输入，就像当它聚焦时 inputEl - HTMLElement或字符串（使用 CSS 选择器）所需的输入元素。必需。
app.input.blur(inputEl)	将从输入中移除额外的必需样式和类，就像当它失去焦点时 inputEl - HTMLElement或字符串（使用 CSS 选择器）所需的输入元素。必需。
app.input.resizeTextarea(textareaEl)	强制可调整大小的 textarea 根据其内容调整大小 textareaEl - HTMLElement或字符串（使用 CSS 选择器）所需的 textarea 元素。必需。
app.input.checkEmptyState(inputEl)	根据它是否有值，重新计算输入元素上的必需附加样式和类 inputEl - HTMLElement或字符串（使用 CSS 选择器）所需的 textarea 元素。必需。
app.input.validate(inputEl)	验证输入 inputEl - HTMLElement或字符串（使用 CSS 选择器）所需的 textarea 元素。必需。方法返回`true`如果输入有效，或`false`如果输入无效
app.input.validateInputs(containerEl)	验证传递的容器中的所有输入 containerEl - HTMLElement或字符串（使用 CSS 选择器）所需的包含输入的元素以进行验证。必需。方法返回`true`如果所有子输入都有效或`false`如果至少有一个输入无效

输入事件

输入将触发以下 DOM 事件输入元素：

事件	Target	描述
文本区域:调整大小	Textarea 元素<textarea class="resizable">	可调整大小的 textarea 调整大小后，将触发事件。`event.detail`将包含对象`initialHeight`, `currentHeight`和`scrollHeight`属性
输入:非空	输入元素<input/textarea>	输入值变为非空时，将触发事件
输入:为空	输入元素<input/textarea>	输入值变为空时，将触发事件
输入:清除	输入元素<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>