Проверка клиента является одной из наиболее часто используемых функций программ веб -клиентов. HTML5 уже предоставил нам функцию проверки формы. Что касается того, почему он не популярен, оно считается совместимым, а стиль слишком уродливый.
Ниже мы создадим проверку формы HTML5 и CSS3 шаг за шагом, используя только HTML и CSS.
Следующее следующее:
Шаг 1: Сортируйте поле проверки и типПрежде всего, нам нужны следующие поля:
После того, как пользователь вводит некоторую информацию, нам необходимо проверить, является ли информация пользователя правильной, чтобы избежать данных ошибок и обманутых данных на сервере.
В новых спецификациях HTML5 входная входная коробка предоставляет множество типов ввода, таких как: Тел, электронная почта, номер, диапазон, цвет и т. Д. Эти типы, как правило, не очень отражаются в настольном клиенте. Например, номер автоматически переключается на чистые номера на мобильной клавиатуре, а клавиатура электронной почты автоматически переключается с помощью@клавиатуры.
Шаг 2: Определите стиль формыМы также должны определить окончательный стиль формы. Здесь я нашел стиль формы на Dribble как демонстрационный стиль этого времени.
Шаг 3: Код шаблонаИспользуйте стандартный код оператора HTML5
<!Шаг 4: Создайте форму
Создайте базовый элемент формата.
<Form action = onsubmit = return false> </form>Шаг 5: Создайте элемент
Элементы таблицы имеют следующую композицию элемента:
Элементы UL и LI используются для макетов типографии, которые используются для разделения элементов и макетов блока таблицы. Метка используется для текста приглашения поля формы. Ввод используется для пользовательских входных данных. SPAN используется для использования смайликов, чтобы указать, правильно ли заполняется поле пользователя.
<ul> <li> <label for = имя> полное имя </label> <input type = text id = имя = имя = name wackholder = пожалуйста, введите имя/> <span class = icon-name> </span> < /span> </span> li> </ul>
Форма формы HTML Code Полный код следующим образом:
Шаг 6: Добавьте стильЗавершите написание элемента формы, плотно улучшив его стиль, делая его красивее.
Body {Display: Flex;} форма {Padding: 0 10%; ; Цвет: Black; Абсолютно;Код CSS завершает код следующим образом:
Шаг 7: Добавьте подсказку эмодзиВ каждой структуре формы мы добавили тег SPAN, например, мы добавили <span Class = Icon-name> </span> метка в поле «Имя». Теперь добавьте стиль в состояние школьного испытания.
li span {block;