Привет всем! Небольшое отступление к основам HTML — типы ввода данных в наглядном виде. Вдруг кому пригодится? Итак, поехали!
В HTML можно (и нужно) использовать различные типы ввода — это добавляет не только порядок, но и удобство. Описание каждого типа ввода данных с кодом и небольшим описанием — ниже.
Однострочное поле ввода текста. Выглядит вот так:
код:
<input type="text" />
Текст и есть текст. Принимаем его, а дальше обработка в PHP. Чуть подробнее об этом процессе я писал тут, ссылку дублировать все время нет смысла, оставлю здесь и хватит 🙂
Нужно организовать поле для ввода электронного адреса? Используем код:
<input type="email" />
В наглядном виде это поле выглядит следующим образом:
В чем его плюс? В зависимости от настроек браузера может производиться автоматическая проверка введенного адреса электронной почты. А если это поле видит смартфон (не все, но большинство) — автоматически добавляется .com к клавиатуре.
Для ввода пароля используется следующий код:
<input type="password" />
В наглядном виде поле для ввода пароля выглядит так:
Тут все просто — введенные символы не показываются прямым текстом, а маскируются звездочками.
В случае, если нужно создать поле для ввода номера телефона — используйте код:
<input type="tel" />
На практике этот код выдаст вот такую строку:
как видите — визуально от обычной текстовой она не сильно (вообще не) отличается. Так что тут я лично — ничего ТАКОГО — не вижу.
Вот тут — числовое поле ввода. Причем — можно использовать чистый код — вот такой:
<input type="number" />
и получить обычную форму для ввода, а можно видоизменить код приблизительно вот так:
<input type="number" min="1" max="100">
и получить форму, в которую можно ввести значение от 1 до 100 (если нажимать на кнопочку, ибо пальчиками можно ввести что угодно):
Тип ввода search. Выглядит визуально вот так:
а код:
<input type="search">
Используется для полей поиска, причем ведет себя это поле как обычное текстовое.
Для ввода текста, который должен содержать url-адрес нужно и можно использовать поле:
<input type="url">
которое визуально выглядит так:
Визуально — отличий от текстового поля нет… 🙁 Но в зависимости от настроек браузера содержимое поля может быть проверено на соответствие правилам автоматически. А некоторые телефоны еще и .com добавляют на клавиатуре, что бы облегчить нашу жизнь.
Тип ввода «file», который визуально выглядит так:
а в виде кода так:
<input type="file">
помогает создать кнопку для выбора и загрузки файла.
Нужно создать кнопку? Нет ничего проще! Используем код:
<input type="button">
и получаем вот такую кнопку:
красоты, понимаете, никакой. А если изменить код вот так:
<input type="button" onclick="alert('Привет!')" value="Кнопка для нажатия :)">
то все становится интереснее!
Очистка данных в форме осуществляется с помощью типа reset:
<input type="reset">
тут описывать что-либо нет смысла. Очистили и хватит.
Тип ввода submit служит для отправки данных из формы в обработчик. Подробнее об этом я писал тут, но вдруг вы забыли прочитать? Быстренько читаем 🙂
<input type="submit">
Тип ввода radio позволяет пользователю выбрать один из предложенных вариантов. Визуально это выглядит так:
а сам код выглядит так:
<input type="radio">
В отличии от типа ввода radio — тип checkbox позволяет дать возможность выбрать несколько (нуль или больше) вариантов из предложенного списка. Визуально выглядит так:
<input type="checkbox">
а визуально — вот так:
Нужно сделать ползунок, который будет управлять значением? Элементарно! Причем — если по умолчанию диапазон равен от нуля до ста, с помощью атрибутов min, max, step можно вносить нужные корректировки:
Код в чистом виде:
<input type="range">
и с учетом описанных корректировок:
<input type="range" min="0" max="75" step="5">
Визуально это выглядит так:
HTML — выбрать цвет. Хороший запрос 😉 А как его реализовать? Да просто! Берем код:
<input type="color">
и получаем возможность выбрать нужный цвет.
Просто же. И да — как его потом передать в форму — рассмотрим позднее.
С помощью типа ввода month можно дать возможность выбора месяца и года. Визуально:
и в виде кода:
<input type="month">
Аналогично с возможностью выбора месяца можно дать выбрать дату:
<input type="date">
Причем, можно использовать атрибуты min и max для ограничений к датам:
<input type="date" max="2099-12-31">
в этом случае у нас будет возможность выбрать дату максимум до 31 декабря 2099 года.
А в случае использования минимального атрибута:
<input type="date" min="2001-01-01">
выбрать дату раньше 1.1.2001 — не получится 🙂
Для ввода локального времени без указания часового пояса используется:
<input type="time">
А вот эта конструкция позволит выбрать неделю и год:
Фух. Вроде как все. На этом по типам ввода данных в наглядном виде пока хватит 🙂 Чуть подробнее о получении цвета и даты и передачи этих данных в форму — позднее.
Как всегда — в случае возникновения вопросов пишите на почту или в Telegram.
