Имеет ли смысл обработка скрытых элементов управления формой в HTML5?

HTML5 добавил возможность лучше определять проверку на стороне клиента в формах без необходимости использования JavaScript. Концепция уже существовала с такими атрибутами, как «максимальная длина» и «минимальная длина». Он был расширен такими атрибутами, как «обязательный» и «шаблон». Однако HTML5 также определил ограничения на эти атрибуты, и браузеры WebKit реализовали эти ограничения (вероятно, Firefox и Opera не сильно отстают).

Рассматриваемые ограничения связаны с видимостью элемента управления формы, когда он скрыт с помощью CSS / JavaScript с использованием display: none или visibility: hidden правила CSS . Ограничения определены как:

4.10.7.1.1 Скрытое состояние

Когда атрибут типа элемента input находится в скрытом состоянии [...] Элемент input представляет собой значение, которое не предназначено для проверки или манипулирования пользователем.

[Кроме того,]

  • IDL-атрибут значение применяется к этому элементу и находится в режиме по умолчанию.
  • Следующие атрибуты содержимого не могут быть указаны и не применяются к элементу: accept , alt , autocomplete , checked , dirname , formaction , formenctype , formmethod , formnovalidate , formtarget , высота , список , макс , максимальная длина , мин , кратное , шаблон , заполнитель , только для чтения , требуется , размер , src , step и шириной .
  • Следующие атрибуты и методы IDL не применяются к элементу: проверено , файлы , список , selectedOption , ] selectionStart , selectionEnd , selectionDirection , valueAsDate и valueAsNumber IDL-атрибуты; Методы select () , setSelectionRange () , stepDown () и stepUp () .
  • События входа и изменения не применяются.

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

Ни HTML5, ни CSS3 (ни основные браузеры) не упростили стилизацию элементов управления формами. Элементы по-прежнему сильно ограничены с точки зрения стиля, и оба элемента и имеют досадно разные правила стилизации (и для не- Браузеры IE, почти невозможный таргетинг на браузер CSS). Таким образом, когда моим дизайнерам нужны «красивые» элементы управления формой, их может потребоваться перестроить с использованием HTML, CSS и JavaScript. Смоделированный элемент управления будет удаленно управлять реальным элементом управления, скрытым с помощью CSS. Это применимо к элементам , и для меня, все из которых вызывают проблема в браузерах WebKit, когда задан обязательный атрибут .

Поскольку в спецификации HTML5 указано, что определенные атрибуты, такие как required , не могут существовать в элементах управления скрытой формы, браузеры должны будут реагировать на недопустимые атрибуты. Браузеры WebKit в ответ не отправляют форму (и не запускают событие JavaScript submit ). Я столкнулся с ошибкой прямо сейчас с элементом .

Chrome выдает следующую ошибку в консоли:

Недопустимый элемент управления формой с именем = ' имя-элемента ' не может быть сфокусирован.

Safari не работает, показывая серую полосу в нижней части окна с сообщением:

Выберите элемент в списке


Итак, меня беспокоит, не слишком ли ограничивает HTML5 или я подхожу к этой проблеме неправильно. . Либо:

  1. Спецификация HTML5 ошибочна и добавляет дополнительное ограничение без другого решения. HTML5 предполагает, что если элемент управления формы не отображается, пользователь не должен иметь возможность взаимодействовать с ним. Это не позволяет разработчикам использовать атрибуты проверки HTML5 для элементов, которыми мы управляем удаленно, оставляя исходный элемент управления формой скрытым.У нас по-прежнему нет возможности создавать собственные элементы управления, используя только CSS, для чего требуется, чтобы мы по-прежнему создавали их сами.
  2. Я неправильно обрабатываю удаленные элементы управления формой. поскольку я использую «старую» технику для решения проблемы, которая вполне могла быть переопределена, возможно, мой подход устарел. Также возможно, что, поскольку WebKit - единственный, кто обрабатывает это ограничение на данный момент, у WebKit есть обходной путь, который я еще не нашел.

Единственные обходные пути, которые я могу придумать на данный момент, - это

  • Удалять ограниченные атрибуты всякий раз, когда я динамически скрываю элемент управления формой с помощью JavaScript, что означало бы, что я жертвую проверкой HTML5,
  • Временно отображаю и немедленно скрываю нарушающие элементы управления формы, хотя я не уверен, когда это будет сделано, поскольку событие submit никогда не запускается, и можно отправить форму без запуска события click на кнопке отправки или
  • Используйте атрибут novalidate , хотя я все равно потеряю проверку HTML5.

Так я правильно смотрю или что-то упустил?

28
задан Peter Mortensen 5 July 2019 в 19:55
поделиться