Как сделать поле обязательным для заполнения html
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.
Примечание: В примерах ниже уже заданы CSS стили, поэтому они отличаются от того, что получится у вас. CSS файлы можно скачать отсюда:
Элемент Form
Элемент Form () оборачивает все элементы внутри HTML-формы.
Атрибуты:
Примечание: Нельзя создать форму внутри формы. То есть использование элемента
Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.
Рис. 2. Внешний вид формы по умолчанию
Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.
Файл form.php
Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами - здесь описано множество новых атрибутов и плюшек!
HTML формы могут казаться простыми, но они необходимы для большинства веб-сайтов и приложений. В HTML4 типы полей ввода были ограничены следующим списком:
- input type="text"
- input type="checkbox"
- input type="radio"
- input type="password"
- input type="hidden" - для данных, невидимых пользователю
- input type="file" - для загрузки файлов
- textarea - для ввода больших объемов текста
- select - для выпадающих списков
- button — обычно используется для отправки данных формы, но также можно использовать input type="submit" и input type="image"
- возможности стилизации с помощью CSS ограничены
- расширенные элементы, вроде элементов для выбора даты и цвета нужно реализовывать самостоятельно, с помощью кода
- валидация на стороне клиента требует JavaScript
Дополнительные типы полей
В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода
Тип | Описание |
ввод email-адреса | |
tel | ввод телефонного номера - нет строгого синтаксиса, но разрывы строк будут удалены |
url | ввод URL |
search | поле поиска с разрывами строк автоматически удаляется |
number | число с плавающей точкой |
range | элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров |
date | ввод дня, месяца и года |
datetime | ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны |
datetime-local | ввод даты и времени без временной зоны |
month | ввод месяца и года без временной зоны |
week | ввод номера недели без временной зоны |
time | ввод времени без временной зоны |
color | выбор цвета |
Атрибуты полей ввода
Кроме перечисленных выше, поля ввода могут иметь любой из специфичных для формы атрибутов. Некоторые из них булевого типа, что означает, что они не требуют значений, например:
конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например
указывает способ ввода. Наиболее полезные возможности:
Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.
Списки данных
Список данных содержит набор подходящих значений для любого типа поля, например:
но стоить помнить, что реализация отличается в различных браузерах. Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome - по значениям (IE), а текст указывает уменьшенным серым шрифтом:
Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX.
Отключение валидации
Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.
Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.
Поля вывода
Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации
- output - результат вычисления пользовательских действий
- progress - полоса прогресса (атрибуты value и max задают состояние)
- meter - шкала, которая может менять свой цвет между зеленым, желтым и красным в зависимости от установленных значений атрибутов value, min, max, low, high и optimum
Разделение и подпись полей
Согласно спецификации, каждый элемент формы считается параграфом, и отделяется от остальных частей элементом
Итересно. Я в целях разделения использую div, хотя сомневаюсь, что это имеет большое значение. Тег p короче, разве что вам нужно будет применять дополнительный стиль, чтобы убрать поля.
Что более важно - метки нужно использовать, либо окружая элемент формы, либо размещая их рядом, и связывая их атрибутом for с соответствующими полями, например:
Элементы управления не стандартизированы
Не существует предписаний по оформлению элементов форм, которым должны следовать производители браузеров. Это сделано намерено: стандартный элемент формы для выбора дат, ориентированный на мышь, может быть слишком мал для пользователя мобильного устройства, так что производитель может сам позаботиться о создании альтернативной версии элемента формы для сенсорных интерфейсов.
Поддержка браузерами
Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.
Для не поддерживаемых типов полей браузер откатится до стандартного поля ввода типа text, а не поддерживаемые атрибуты и их значения проигнорирует.
Всегда используйте правильный тип!
Важно использовать правильный тип поля для ожидаемого типа вводимых данных. Может, это и очевидно, но будут ситуации, когда вам нужно будет воспользоваться простым текстовым полем.
Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении.
- Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.
- IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY
- JavaScript плагин, как в jQuery UI позволяет определять собственный формат - да хоть YYYY-MM-DD - но вы не можете гарантировать, что JavaScript будет включен на машине пользователя.
Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод, и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление.
За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется.
Валидация на серверной стороне
Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать:
Валидация на стороне клиента никогда не была и не будет заменой валидации на стороне сервера. Валидация пользовательских данных на стороне сервера имеет большое значение. Валидация на стороне клиента - дополнительная полезная возможность.
И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.
В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.
5 последних уроков рубрики "HTML5"
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
HTML5: API работы с вибрацией
HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
Создание форм с помощью Webix Framework — 4 практических примера
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
PHP - Обязательные поля
Из таблицы правил проверки формы на предыдущей странице видно, что "Имя", "E-mail", и "Пол" - обязательные поля. Эти поля не могут быть пустыми и должны быть заполнены в HTML форме.
Поле | Правила проверки |
---|---|
Имя | Обязательно. + Должно содержать только буквы и пробелы |
Обязательно. + Должен содержать действительный адрес электронной почты (с использованием @ and .) | |
Веб-сайт | Не обязательно. Если поле присутствует, оно должно содержать действительный URL |
Комментарий | Не обязательно. Многострочное поле ввода (текстовое поле) |
Пол | Обязательно. Должен быть выбран один вариант |
В предыдущей главе все поля ввода были необязательными.
Пример
Следующим шагом является проверка входных данных, а именно: "Содержит ли поле Имя только буквы и пробелы?", и "Содержит ли поле E-mail валидный синтаксис адреса электронной почты?", и, если заполнено поле Веб-сайт, "содержит ли оно действительный URL-адрес?"
Читайте также: