input в HTML5

Знакомый тег input в HTML5 приобрёл новые возможности. Теперь можно задавать такие значения, как number, date, time, color, range и др. Лучше один увидеть, чем долго рассказывать.

Исходник примера.


<form method="post" action="test.php">

    <fieldset id="personal_info">
        <legend>Information</legend>
        <ol>
            <li>
                <label for="name">Имя (text)</label>
                <input type="text" name="name" id="name" />
            </li>
            <li>
                <label for="priority">Шкала (range)</label>
                <input type="range" min="0" max="10" name="priority" id="priority" value="0" />
            </li>
            <li>
            <label for="number">Числа (number)</label>
            <input type="number" name="number" id="number" min="0" max="12" />
            </li>
            <li>
            <label for="date">Дата (date)</label>
            <input type="date" name="date" id="date" value="2016-08-09" />
            </li>
            <li>
            <label for="time">Время (time)</label>
            <input type="time" name="time" id="time" />
            </li>
            <li>
            <label for="email">Электронная почта (email)</label>
            <input type="email" name="email" id="email" />
            </li>
            <li>
            <label for="url">Веб-адрес (url)</label>
            <input type="url" name="url" id="url" />
            </li>
            <li>
            <label for="color">Цвет (color)</label>
            <input type="color" name="color" id="color" />
            </li>
            <li>
                <input type="submit" value="Send" />
            </li>
            
        </ol>
    </fieldset>


</form>

number

В поле счетчика по умолчанию разрешен прямой ввод с клавиатуры. Как и в случае с ползунками, для поля можно задать минимальное и максимальное значение. Однако эти значения не распространяются на значения, непосредственно введённые в поле, так что ввод придется ограничить при помощи сценариев или средствами проверки данных HTML5. Также обратите внимание на возможность управления приращением, которое определяется параметром step. По умолчанию приращение равно 1, но ему также можно присвоить любое числовое значение.


<input type="number" name="number" step="2" min="4" max="12" />

В этом примере мы ограничили ввод чисел от 4 до 12, а числа увеличиваются на две единицы. Напоминаю, только при работе с стрелками в элементе управления.

Также стоит отметить, что поле ввода числа, как и некоторые другие поля, которые будут рассмотрены дальше, по-особому ведёт себя в мобильных браузерах: например, при фокусе на такое поле появляется клавиатура, позволяющая вводить соответствующие символы.

range

Тип range имеет те же атрибуты. При нажатии кнопки Send в адресной строке вы сможете увидеть выбранное значение под именем priority.

search

Это поле почти не отличается от обычного текстового поля. В некоторых браузерах внутри него появляется крестик для сброса введённого значения.


<input type="search">

datetime-local/datetime

Кроме отдельных элементов date и time есть ещё совмещённый элемент datetime-local без учета временной зоны и datetime c учетом временной зоны.

month/week

Также есть элемент month для выбора месяца и week для выбора недели.

email

Поля email приносят особенно заметную пользу на мобильных устройствах, на которых раскладка виртуальной клавиатуры изменяется для удобства ввода адресов электронной почты. Обратите внимание на присутствие символа @ в клавиатурах iPhone и Android.

url

url особенно удобен, если ваши посетители просматривают сайт с устройств iPhone или Android — устройство отображает совершенно иную раскладку клавиатуры с кнопками для ускоренного ввода веб-адресов (по аналогии с клавиатурой, отображаемой при вводе URL-адреса в адресной строке мобильного браузера).

datalist

Выбор готовых слов можно организовать при помощи datalist, в который заносятся нужные слова, а затем пользователь может либо набирать слово в текстовом поле или выбрать через выпадающий список.

Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — его значение должно совпадать со значением атрибута id у списка.


<form>
<input type="text" name="search" placeholder="Поиск" list="search"><br><br>
<datalist id="search">
  <option value="Васька" />
  <option value="Мурзик" />
  <option value="Рыжик" />
  <option value="Барсик" />
</datalist> 
</form>

Если тег input имеет специфический тип, например email или другие, то в списке отображаются только корректные для данного типа значения.

fieldset/legend

Когда формы становятся очень большими, возникает потребность зрительно отделить одни поля от других. Для группировки полей используется тег fieldset.

По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи CSS можно изменить его внешний вид.

Также для каждой группы можно добавить её заголовок. Для этого внутрь тега fieldset надо поместить тег legend: