贊助商成為贊助商

輸入 / 表單輸入

表單輸入元件可讓您建立彈性且美觀的表單配置。

輸入元件配置

建議搭配 清單檢視 使用輸入元件

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

位置

堆疊標籤

預設輸入元件清單會顯示堆疊標籤。堆疊標籤總是顯示在輸入元件上方

<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-floating-label 類別，而不是 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-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>

位置

輸入元件下拉式選單

也可以使用附加 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 支援 HTML5 驗證，其根據 validity 輸入屬性。啟用驗證後，如果輸入值無效，將會出現驗證錯誤訊息。

若要啟用驗證，我們必須新增 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" />

輸入狀態類別

有幾個類別可以根據輸入元素的狀態和內容新增至輸入元素

相同的狀態將會新增至輸入的父 item-input 元素

輸入應用程式參數

可以使用全域應用程式參數來控制一些預設輸入行為，我們可以在 input 屬性下傳遞輸入相關參數

參數類型預設值說明
scrollIntoViewOnFocus布林值啟用時，將在輸入獲得焦點時將輸入捲動至檢視中。預設值僅啟用於 Android 裝置，因為它有助於解決螢幕鍵盤可能重疊輸入的問題
scrollIntoViewCentered布林值false調整前一參數的行為，將輸入捲動至輸入獲得焦點時檢視的中央
scrollIntoViewDuration數字0將輸入捲動至檢視中的預設持續時間
scrollIntoViewAlways布林值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，如果至少有一個輸入無效，則傳回 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>
改善此文件
在此頁面