На этот раз мы поднимем нашу форму на следующий уровень и рассмотрим большинство доступных нам типов ввода.

Ссылка на прошлый раз,

https://medium.com/@natey37/react-forms-frontend-validations-e7e094da4eba

Используя нашу форму из прошлого раза, мы видим, что мы использовали type=’text’ и type=’date’. Теперь мы собираемся увидеть остальные из них.

Во-первых, мы рассмотрим флажки.

Мы создадим три флажка с тремя разными вариантами. Обычно мы используем флажки, когда хотим предоставить пользователю выбор из нескольких различных вариантов. В нашем случае мы хотим знать, насколько велик этот человек, поэтому наши варианты будут «талантливый», «умный» и «забавный». Нам нужно добавить состояние для ввода наших флажков, поэтому мы добавим переменную «checked» в наше состояние и установим ее равной объекту, который содержит значения наших флажков. В этом случае все установлено в false, так как мы хотим, чтобы они начинались без проверки.

Теперь давайте создадим функцию, которая будет обрабатывать наш флажок.

Когда наш флажок установлен, функция onClick запустит функцию handleChecked. Это устанавливает соответствующее значение флажка в Checked равным true или false.

Мы видим, что здесь есть несколько отличий. Мы изменили тип на «флажок», и теперь у нас отмечен этот атрибут. Это принимает значение true/false, которое определяет, отмечено оно или нет. Мы проверяем наш form.checked, а затем проверяем логическое значение соответствующего флажка.

Далее мы рассмотрим ввод цвета.

Поле type=’color’ предназначено для захвата цветов RGB в шестнадцатеричном представлении, например #aabbcc. Большинство браузеров предоставят вам палитру цветов, но в случае, если она не поддерживается, ваш пользователь должен будет самостоятельно ввести действительный шестнадцатеричный номер. Имейте это в виду при его использовании.

Давайте сделаем это забавным и изменим цвет фона нашей формы на любой, который они выберут в качестве своего любимого цвета.

Здесь мы проверяем, имеет ли наш form.color значение. Если это не так, он просто использует наш фоновый цвет по умолчанию. Если был выбран цвет, то он устанавливает цвет фона на выбранный цвет.

Далее идет тип datetime-local.

Date и datetime-local нужны довольно часто, но есть некоторые вещи, которые следует учитывать. Эти типы полей обеспечивают стандартизированный, доступный и согласованный пользовательский интерфейс для получения даты и времени от пользователя. Значение сохраняется как значение года-месяца-дня, например 2020–07–29. Это отлично подходит для разработчиков, потому что они хорошо соответствуют формату даты ISO 8601. Однако, если браузер наших пользователей не поддерживает этот тип, им остается ввести дату в этом формате, что не является очевидным выбором для большинства людей. Затем нам нужно убедиться, что пользователю ясно, каким должен быть ожидаемый ввод.

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

Далее идет тип файла:

Встроенный ввод файла непригляден, поэтому мы спрячем его и просто покажем нашу метку, которая из-за ассоциации htmlFor вызовет выбор файла при нажатии. Когда наш пользователь выбрал файл и наша форма имеет значение для файла, мы сообщим пользователю, что его изображение было загружено.

Далее идет скрытый тип.

Этот ввод позволяет веб-разработчикам включать данные, которые они не хотят видеть или изменять пользователями при отправке формы, и часто используется для хранения чего-то вроде связанного идентификатора базы данных. Имейте в виду, что это не видно в содержимом страницы, но его можно увидеть с помощью инструментов разработчика браузера, поэтому не используйте это как форму безопасности.

Наш ввод скрыт, поэтому я добавил кнопку. При нажатии на него отобразится скрытый текст из ввода.

Далее идет ввод числа.

Минимальное и максимальное значения представляют наши нижние и верхние границы, а значение шага представляет то, на что мы будем рассчитывать. В данном случае нашими вариантами являются нечетные числа от 1 до 9.

Далее идет тип пароля.

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

Далее идут радиокнопки. Обычно вы используете их, когда хотите, чтобы ваш пользователь выбрал один вариант.

Нам нужно убедиться, что все наши радиовходы имеют одно и то же имя, и изменить значение на то, что мы хотим, чтобы эта опция была равна.

Далее следует тип диапазона.

Мы используем это для ввода числа, когда точное значение не очень важно. Мы используем минимальное и максимальное значения, чтобы указать нижнюю и верхнюю границы значений (по умолчанию 1–100), и снова есть опция шага, чтобы изменить то, на что вы рассчитываете.

Далее идет вход сброса.

Не рекомендуется использовать это в случае разочарования пользователя из-за случайного удаления только что введенной информации. Хотя я вижу его практичность в некоторых случаях использования. Мы пропустим это сейчас, но он делает именно то, что говорит. Он сбрасывает все поля ввода, чтобы они были начальным значением.

Далее тип поиска.

Нам действительно не нужна панель поиска в нашей форме, поэтому мы ее тоже пропустим, но тип поиска функционально эквивалентен текстовому типу. За исключением того, что он позволяет пользователям по-разному стилизовать его, и он поставляется со значком закрытия, который сбрасывает ваше поле поиска.

Далее номер телефона.

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

И последнее, но не менее важное: мы рассмотрим тип URL.

Тип URL-адреса имеет встроенные проверки, которые принимают только полные, абсолютные URL-адреса. Нет возможности захватить только доменное имя или только путь.

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