Незакрепленные названия полей схожи с фиксированными, за исключением включающейся анимации при вводе текста – название поля перемещается выше вводимого текста. Для каждого объекта (поле с названием и место для ввода текста) следует задать item-floating-label
, а input-label
для места, отведенного под ввод текста.
Пример также показывает использование атрибута placeholder для подсказки пользователям, какую информацию предполагается ввести.
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
</label>
</div>