Привет всем! Небольшое отступление к основам HTML — типы ввода данных в наглядном виде. Вдруг кому пригодится? Итак, поехали!

В HTML можно (и нужно) использовать различные типы ввода — это добавляет не только порядок, но и удобство. Описание каждого типа ввода данных с кодом и небольшим описанием — ниже.

Однострочное поле ввода текста. Выглядит вот так:

код:

Текст и есть текст. Принимаем его, а дальше обработка в PHP. Чуть подробнее об этом процессе я писал тут, ссылку дублировать все время нет смысла, оставлю здесь и хватит 🙂

Нужно организовать поле для ввода электронного адреса? Используем код:

В наглядном виде это поле выглядит следующим образом:

В чем его плюс? В зависимости от настроек браузера может производиться автоматическая проверка введенного адреса электронной почты. А если это поле видит смартфон (не все, но большинство) — автоматически добавляется .com к клавиатуре.

Для ввода пароля используется следующий код:

В наглядном виде поле для ввода пароля выглядит так:

Тут все просто — введенные символы не показываются прямым текстом, а маскируются звездочками.

В случае, если нужно создать поле для ввода номера телефона — используйте код:

На практике этот код выдаст вот такую строку:

как видите — визуально от обычной текстовой она не сильно (вообще не) отличается. Так что тут я лично — ничего ТАКОГО — не вижу.

Вот тут — числовое поле ввода. Причем — можно использовать чистый код — вот такой:

и получить обычную форму для ввода, а можно видоизменить код приблизительно вот так:

и получить форму, в которую можно ввести значение от 1 до 100 (если нажимать на кнопочку, ибо пальчиками можно ввести что угодно):

Тип ввода search. Выглядит визуально вот так:

а код:

Используется для полей поиска, причем ведет себя это поле как обычное текстовое.

Для ввода текста, который должен содержать url-адрес нужно и можно использовать поле:

которое визуально выглядит так:

Визуально — отличий от текстового поля нет… 🙁 Но в зависимости от настроек браузера содержимое поля может быть проверено на соответствие правилам автоматически. А некоторые телефоны еще и .com добавляют на клавиатуре, что бы облегчить нашу жизнь.

Тип ввода «file», который визуально выглядит так:

а в виде кода так:

помогает создать кнопку для выбора и загрузки файла.

Нужно создать кнопку? Нет ничего проще! Используем код:

и получаем вот такую кнопку:

красоты, понимаете, никакой. А если изменить код вот так:

то все становится интереснее!

Очистка данных в форме осуществляется с помощью типа reset:

тут описывать что-либо нет смысла. Очистили и хватит.

Тип ввода submit служит для отправки данных из формы в обработчик. Подробнее об этом я писал тут, но вдруг вы забыли прочитать? Быстренько читаем 🙂

Тип ввода radio позволяет пользователю выбрать один из предложенных вариантов. Визуально это выглядит так:

а сам код выглядит так:

В отличии от типа ввода radio — тип checkbox позволяет дать возможность выбрать несколько (нуль или больше) вариантов из предложенного списка. Визуально выглядит так:

а визуально — вот так:

Нужно сделать ползунок, который будет управлять значением? Элементарно! Причем — если по умолчанию диапазон равен от нуля до ста, с помощью атрибутов min, max, step можно вносить нужные корректировки:
Код в чистом виде:

и с учетом описанных корректировок:

Визуально это выглядит так:

HTML — выбрать цвет. Хороший запрос 😉 А как его реализовать? Да просто! Берем код:

и получаем возможность выбрать нужный цвет.

Просто же. И да — как его потом передать в форму — рассмотрим позднее.

С помощью типа ввода month можно дать возможность выбора месяца и года. Визуально:

и в виде кода:

Аналогично с возможностью выбора месяца можно дать выбрать дату:

Причем, можно использовать атрибуты min и max для ограничений к датам:

в этом случае у нас будет возможность выбрать дату максимум до 31 декабря 2099 года.

А в случае использования минимального атрибута:

выбрать дату раньше 1.1.2001 — не получится 🙂

Для ввода локального времени без указания часового пояса используется:

А вот эта конструкция позволит выбрать неделю и год:

Фух. Вроде как все. На этом по типам ввода данных в наглядном виде пока хватит 🙂 Чуть подробнее о получении цвета и даты и передачи этих данных в форму — позднее.
Как всегда — в случае возникновения вопросов пишите на почту или в Telegram.