Уже в первой части этого учебного пособия мы определили атрибуты, с которыми мы можем работать, мы увидели, что у нас есть некоторые новые для HTML5, а другие нет, однако, когда речь идет о создании надежных полей, которые помогают нам в основных процессах сайта, Именно когда их сочетание и правильное использование каждого из них поможет нам собрать данные наилучшим образом.
Установка размера поля
Как мы уже видели, у нас есть два атрибута, которые влияют на нас непосредственно в размере поля: это размер и максимальная длина, один регулирует визуальную амплитуду поля, а другой - объем текста, который поле может эффективно получить.
Давайте рассмотрим пример с использованием обоих атрибутов:
примерИмя:
Город:
Фрукты:
Отправить голосование
В этом примере мы видим, как в первом поле указывается максимальная длина, только с этим мы сообщаем браузеру, что он может принимать только 10 символов, однако ему может быть назначена ширина по умолчанию, во втором поле мы указываем размер с тем, что мы ему сообщаем Насколько он должен быть широким, однако мы не ограничиваем ввод текста, а в третьем мы применяем оба условия, давайте посмотрим, как мы оставили в браузере.
Использование значения и заполнителя
Увидев разницу между этими двумя полями, в этом примере мы продемонстрируем, как применить их к форме, давайте посмотрим в следующем коде, как их использовать.
примерИмя:
Город:
Фрукты:
Отправить голосование
Как мы видим в первых двух полях, заполнитель указывает подсказку о том, что пользователь должен ввести, это значение, которое содержит заполнитель, не является значением поля ввода, поэтому, если мы передадим эти поля, они получат пустое, вместо третьего поля В атрибуте value уже есть что-то, что может произойти при отправке в эту форму.
Давайте посмотрим, как браузер покажет нам это
Создать поля только для чтения
В некоторых случаях мы должны работать с полями только для чтения, потому что значение не должно изменяться пользователем или оно просто информативно. Может также случиться так, что это результат предыдущей фильтрации пользователем, и можно увидеть только это значение, для этого у нас есть два варианта, которые, хотя кажутся одинаковыми, совершенно разные.
Мы уже видели атрибут readonly, и мы знаем, что это так, что поле не может быть изменено, у нас также есть атрибут disabled, он выполняет ту же функцию, что и readonly, однако при отправке все отключенные поля не отправляются, поэтому Это не существовало в форме.
Давайте посмотрим, что объяснено на практическом примере.
примерИмя:
Город:
Фрукты:
Отправить голосование
Мы видим, что первое поле отключено, а второе - только для чтения, когда оно отображается в браузере, отключенное отображается нам серым цветом, обычно ассоциируемым с отключением, в то время как чтение только выглядит как обычное поле, хотя, если мы пытаемся пишите кому угодно, никто не позволит нам ввести текст.
Давайте посмотрим, как у нас есть пример:
На этом мы заканчиваем эту вторую часть учебного пособия. Мы уже можем улучшить наши формы, используя базовые проверки размера и количества текста, а также контролируя, что пользователь может изменять или нет, в дополнение к возможности показать помощь в полях, чтобы у вас была идея что вы должны или не должны входить
СТАТЬИ