Skip to main content

Введення даних /Форми введення даних

Навігація

Введення даних /Форми введення даних

Форми введення даних дозволяють створювати гнучкі та красиві макети форм.

Макет ввідних форм

Рекомендовано використовувати Inputs зі list View :
<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 - вхідна мітка.

Вбудовані мітки

Якщо ви хочете використовувати вбудовані мітки, ви можете додати додатковий клас вбудованих міток inline-labels до всього списку або клас вбудованих міток inline-label до окремого елемента:
<div class="list inline-labels">
  <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>
<!-- або лише до одного елемента -->
<div class="list">
  <ul>
    ...
    <!-- додатковий клас "inline-label". -->
    <li class="item-content item-input inline-label">
      ...
    </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" для назви елемента -->
        <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>
    ...
    <!-- додатковий клас "item-input-outline".-->
    <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>
    ...
    <!-- додатковий клас "item-input-with-info" для елемента -->
    <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>
          <!-- елемент з додатковою інформацією -->
          <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> - елемент з додатковою інформацією

Розкривний список введення

Також можна вказати введення спадного списку (наприклад, select) за допомогою додаткового класу 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:
All text inputs
Підтримувані типи: text(текст), password,(пароль) email(ел. пошта ), tel, (телефон) url, (url-адреса) date, (дата) number(номер), datetime-local
...
  <div class="item-input-wrap">
    <input type="text" />
  </div>
...
...
  <div class="item-input-wrap">
    <input type="email" />
  </div>
...
Select 
...
  <div class="item-input-wrap">
    <select>...</select>
  </div>
...
Textarea 
...
  <div class="item-input-wrap">
    <textarea></textarea>
  </div>
...
Range Slider 
...
  <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>

Перевірка

Techno4 підтримує перевірку HTML5 на основі вхідної властивості дійсності validaty. Якщо ввімкнено перевірку, з’являтимуться повідомлення про помилку перевірки, якщо введене значення має недійсне значення.

Щоб увімкнути перевірку, ми повинні додати атрибути: required і validate до вхідного елемента.

Якщо нам потрібна перевірка вхідних даних лише на подію розмиття blur, тоді нам потрібно додати атрибут data-validate-on-blur="true".

Перевірка значення залежить від типу введення. Наприклад, тип введення = "електронна пошта" буде перевірено на відповідність шаблону електронної пошти тощо. Це типова поведінка браузера. Якщо ви хочете додати спеціальне правило для перевірки вхідного значення, це потрібно зробити за допомогою атрибута введення шаблону pattern: 

<!-- перевірка за замовчуванням, перевірка значення не порожня -->
<input type="text" placeholder="Your name" required validate />

<!-- перевірка електронної пошти за замовчуванням, значенням має бути електронна адреса -->
<input type="email" placeholder="Your e-mail" required validate />

<!-- перевірка URL-адреси за замовчуванням-->
<input type="url" placeholder="Your URL" required validate />

<!-- перевірка шаблону, значення має бути "яблуко" або "банан" -->
<input type="text" required validate pattern="apple|banana" placeholder="Type 'apple' or 'banana'" />

<!-- перевірка шаблону зі спеціальним повідомленням про помилку, значення має бути лише числом -->
<input type="text" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!" />

<!-- цей вхід буде перевірено лише на розмиття-->
<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
Якщо ввімкнути, введені дані прокручуватимуться у фокусі введення. За замовчуванням його ввімкнено лише для пристроїв Android, оскільки це допомагає вирішити проблему, коли екранна клавіатура може перекривати введення
boolean
scrollIntoViewCentered
false
Налаштовує поведінку попереднього параметра, щоб прокручувати введені дані в центрі зору при фокусі введення
boolean
scrollIntoViewDuration
0
Тривалість за замовчуванням для прокручування введених даних у вікні перегляду
number
scrollIntoViewAlways
false
Якщо ввімкнути, вхідні дані прокручуватимуться у вікні перегляду, незалежно від того, перебувають вони поза полем зору чи ні
boolean
Напрклад: 
var app = new Techno4({
  input: {
    scrollIntoViewOnFocus: true,
    scrollIntoViewCentered: true,
  }
});

Методи застосунку введення даних

Ми можемо використовувати наступні методи застосунку , доступні для керування введеннями даних:
МетодАргументиОпис
app.input.scrollIntoView
(inputEl, duration,

centered, force)

Прокрутити введення в поле зору

● inputEl - HTMLElement or string (за допомогою селектора CSS) потрібний елемента введення, щоб отримати його в поле зору. вимагається

● duration - number -тривалість прокручування в мс.

● centered - boolean - визначає, чи потрібно його прокручувати в центр огляду чи ні.

● force - boolean - прокручує вхідні дані в поле зору незалежно від того, поза полем зору це чи ні.

app.input.focus
(inputEl)
Буде додано додаткові необхідні стилі та класи при введенні, наприклад, коли воно сфокусовано

● inputEl - HTMLElement or string (за допомогою селектора CSS) необхідного елемента введення. Вимагається

app.input.blur
(inputEl)
Буде видалено додаткові необхідні стилі та класи під час введення, наприклад, коли він втрачає фокус

● inputEl - HTMLElement or string (за допомогою селектора CSS) необхідного елемента введення. Вимагається

app.input.resizeTextarea
(textareaEl)
Примусово змінювати розмір текстового поля залежно від його вмісту

● textareaEl - HTMLElement or string (за допомогою селектора CSS) необхідного елемента textarea. Вимагається.

app.input.checkEmptyState
(inputEl)
Перерахувати необхідні додаткові стилі та класи для вхідного елемента залежно від того, має він значення чи ні

● textareaEl - HTMLElement or string (за допомогою селектора CSS) необхідного елемента textarea. Вимагається.

app.input.validate
(inputEl)
Перевірка введених даних

● textareaEl - HTMLElement or string (за допомогою селектора CSS) необхідного елемента textarea. Вимагається.

Метод повертає true, якщо введення дійсне, або false, якщо введення недійсне

app.input.validateInputs
(containerEl)
Перевірити всі вхідні дані в переданому контейнері

containerEl - HTMLElement or string (із селектором CSS) необхідного елемента з вхідними даними для перевірки. Вимагається.

Метод повертає true, якщо всі дочірні введення дійсні, або false, якщо принаймні один вхід недійсний

Події введення даних

Вхідні дані запускатимуть наступні елементи введення подій DOM:
ПодіяОб'єктОпис
textarea:resize
Textarea Element

<textarea class="resizable">

Подія буде ініційована після зміни розміру текстового поля. event.detail міститиме об’єкт із властивостями initialHeight, currentHeight і scrollHeight
input:notempty
Input Element

<input/textarea>

Подія буде ініційована, коли вхідне значення стане непорожнім
input:empty
Input Element

<input/textarea>

Подія буде ініційована, коли вхідне значення стане порожнім
input:clear
Input Element

<input/textarea>

Подія буде ініційована після того, як введене значення буде очищено, натиснувши кнопку очищення введення

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-input-bg-color: transparent;
  --t4-label-font-weight: 400;
  --t4-label-line-height: 1.3;
  --t4-input-padding-left: 0px;
  --t4-input-padding-right: 0px;
  --t4-input-error-text-color: #ff3b30;
  --t4-input-error-font-size: 12px;
  --t4-input-error-line-height: 1.4;
  --t4-input-error-font-weight: 400;
  --t4-input-info-font-size: 12px;
  --t4-input-info-line-height: 1.4;
  --t4-input-outline-height: 40px;
  --t4-input-outline-border-radius: 4px;
  --t4-input-outline-padding-horizontal: 12px;
  --t4-textarea-height: 100px;
  /*
  --t4-input-outline-focused-border-color: var(--t4-theme-color);
  --t4-input-outline-invalid-border-color: var(--t4-input-error-text-color);
  */
  --t4-input-outline-border-color: #bbb;
}
:root .dark,
:root.dark {
  --t4-input-outline-border-color: #444;
}
.ios {
  --t4-input-height: 44px;
  --t4-input-font-size: 17px;
  --t4-input-placeholder-color: #a9a9a9;
  --t4-textarea-padding-vertical: 11px;
  /*
  --t4-input-focused-border-color: var(--t4-list-item-border-color);
  --t4-input-invalid-border-color: var(--t4-list-item-border-color);
  --t4-input-invalid-text-color: var(--t4-input-error-text-color);
  */
  --t4-label-font-size: 12px;
  --t4-label-text-color: inherit;
  /*
  --t4-label-focused-text-color: var(--t4-label-text-color);
  --t4-label-invalid-text-color: var(--t4-label-text-color);
  */
  --t4-floating-label-scale: calc(17 / 12);
  --t4-inline-label-font-size: 17px;
  --t4-inline-label-line-height: 1.4;
  --t4-inline-label-padding-top: 3px;
  --t4-input-clear-button-size: 14px;
  --t4-input-text-color: #000000;
  --t4-input-info-text-color: rgba(0, 0, 0, 0.45);
  --t4-input-clear-button-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --t4-input-text-color: #fff;
  --t4-input-info-text-color: rgba(255, 255, 255, 0.55);
  --t4-input-clear-button-color: rgba(255, 255, 255, 0.5);
}
.md {
  --t4-input-height: 36px;
  --t4-input-font-size: 16px;
  --t4-textarea-padding-vertical: 7px;
  /*
  --t4-input-focused-border-color: var(--t4-theme-color);
  --t4-input-invalid-border-color: var(--t4-input-error-text-color);
  --t4-input-invalid-text-color: var(--t4-input-text-color);
  */
  --t4-label-font-size: 12px;
  /*
  --t4-label-focused-text-color: var(--t4-theme-color);
  --t4-label-invalid-text-color: var(--t4-input-error-text-color );
  */
  --t4-floating-label-scale: calc(16 / 12);
  --t4-inline-label-font-size: 16px;
  --t4-inline-label-line-height: 1.5;
  --t4-inline-label-padding-top: 7px;
  --t4-input-clear-button-size: 18px;
  --t4-input-clear-button-color: #aaa;
  --t4-input-text-color: #212121;
  --t4-input-placeholder-color: rgba(0, 0, 0, 0.35);
  --t4-label-text-color: rgba(0, 0, 0, 0.65);
  --t4-input-info-text-color: rgba(0, 0, 0, 0.45);
}
.md .dark,
.md.dark {
  --t4-input-text-color: rgba(255, 255, 255, 0.87);
  --t4-input-placeholder-color: rgba(255, 255, 255, 0.35);
  --t4-label-text-color: rgba(255, 255, 255, 0.54);
  --t4-input-info-text-color: rgba(255, 255, 255, 0.45);
}
.aurora {
  --t4-input-height: 32px;
  --t4-input-font-size: 16px;
  --t4-textarea-padding-vertical: 4px;
  /*
  --t4-input-focused-border-color: var(--t4-theme-color);
  --t4-input-invalid-border-color: var(--t4-input-error-text-color);
  --t4-input-invalid-text-color: var(--t4-input-text-color);
  */
  --t4-label-font-size: 12px;
  --t4-label-text-color: inherit;
  /*
  --t4-label-focused-text-color: var(--t4-theme-color);
  --t4-label-invalid-text-color: var(--t4-input-error-text-color );
  */
  --t4-floating-label-scale: calc(16 / 12);
  --t4-inline-label-font-size: 16px;
  --t4-inline-label-line-height: 1.5;
  --t4-inline-label-padding-top: 4px;
  --t4-input-clear-button-size: 14px;
  --t4-input-outline-border-radius: 8px;
  --t4-input-text-color: #000000;
  --t4-input-placeholder-color: rgba(0, 0, 0, 0.32);
  --t4-input-clear-button-color: rgba(0, 0, 0, 0.45);
  --t4-input-info-text-color: rgba(0, 0, 0, 0.5);
}
.aurora .dark,
.aurora.dark {
  --t4-input-text-color: #fff;
  --t4-input-clear-button-color: rgba(255, 255, 255, 0.5);
  --t4-input-placeholder-color: rgba(255, 255, 255, 0.35);
  --t4-input-info-text-color: rgba(255, 255, 255, 0.45);
}

Приклади: 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Form Inputs</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Full Layout / Inline Labels</div>
      <div class="list inline-labels no-hairlines-md">
        <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">Full Layout / Stacked Labels</div>
      <div class="list no-hairlines-md">
        <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 no-hairlines-md">
        <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">Floating Labels + Outline Inputs</div>
      <div class="list no-hairlines-md">
        <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 no-hairlines-md">
        <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 no-hairlines-md">
        <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 no-hairlines-md">
        <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 no-hairlines-md">
        <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 no-hairlines-md">
        <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 class="block-title">Only Inputs Inset</div>
      <div class="list inset">
        <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>
  </div>
</template>
<style>
  .demo-list-icon,
  .icon-t4 {
    background: #ccc;
    display: block;
    position: relative;
  }

  .ios .demo-list-icon {
    width: 29px;
    height: 29px;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .md .demo-list-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }

  .aurora .demo-list-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }
</style>

Techno4 Framework