input в HTML5

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

Information

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


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

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


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

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

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

Кроме отдельных элементов date и time есть ещё совмещённый элемент datetime-local

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



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

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

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




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