worldwide open-source software - software:development:web:docs:web:html:attributes

accept

anonymous@undisclosed.example.com (Anonymous) — Fri, 25 Aug 2023 18:11:33 +0000

HTML атрибут: accept (принять)

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

Попробуй

Обзор

Свойство Accept является атрибутом типа файла <input>. Он поддерживался в <form>элементе, но был удален в пользу файла .

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

Например, существует несколько способов идентификации файлов Microsoft Word, поэтому сайт, принимающий файлы Word, может использовать <input> следующий код:

HTML

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

Принимая во внимание, что если вы принимаете медиафайл, вы можете включить любой формат этого типа мультимедиа:

HTML

<input type="file" id="soundFile" accept="audio/*" />
<input type="file" id="videoFile" accept="video/*" />
<input type="file" id="imageFile" accept="image/*" />

Атрибут accept не проверяет типы выбранных файлов; он предоставляет браузерам подсказки, помогающие пользователям выбрать правильные типы файлов. Пользователи по-прежнему могут (в большинстве случаев) переключить опцию в средстве выбора файлов, которая позволяет переопределить ее и выбрать любой файл по своему желанию, а затем выбрать неправильные типы файлов.

По этой причине вам следует убедиться, что ожидаемое требование проверено на стороне сервера.

Примеры

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

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

Уникальные спецификаторы типов файлов

Уникальный спецификатор типа файла — это строка, описывающая тип файла, который может быть выбран пользователем в <input> элементе type file. Каждый уникальный спецификатор типа файла может принимать одну из следующих форм:

Допустимое расширение имени файла без учета регистра, начинающееся с точки («».«). Например: .jpg, .pdf, или .doc.
Действительная строка типа MIME без расширений.
Строка, audio/* означающая «любой аудиофайл».
Строка, video/* означающая «любой видеофайл».
Строка, image/* означающая «любой файл изображения».

Атрибут accept принимает в качестве значения строку, содержащую один или несколько уникальных спецификаторов типов файлов, разделенных запятыми. Например, средство выбора файлов, которому требуется контент, который может быть представлен в виде изображения, включая как стандартные форматы изображений, так и файлы PDF, может выглядеть так:

HTML

<input type="file" accept="image/*,.pdf" />

Использование файловых входов

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

Включение multiple атрибута, как показано выше, указывает, что одновременно можно выбрать несколько файлов. Пользователь может выбрать несколько файлов из средства выбора файлов любым способом, который позволяет выбранная им платформа (например, удерживая нажатой кнопку Shift или Control и затем щелкнув). Если вы хотите, чтобы пользователь выбирал только один файл для каждого <input>, опустите multiple атрибут.

Ограничение допустимых типов файлов

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

Приемлемые типы файлов можно указать с помощью accept атрибута, который принимает разделенный запятыми список разрешенных расширений файлов или типов MIME. Некоторые примеры:

accept=«image/png» или accept=».png«— принимает файлы PNG.
accept=«image/png, image/jpeg» или accept=».png, .jpg, .jpeg«— Принимать файлы PNG или JPEG.
accept=«image/*»— Принять любой файл с image/* типом MIME. (Многие мобильные устройства также позволяют пользователю делать снимки с помощью камеры, когда она используется.)
accept=».doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document« — принимайте все, что схожи с документом MS Word.

Давайте посмотрим на более полный пример:

autocomplete

anonymous@undisclosed.example.com (Anonymous) — Wed, 30 Aug 2023 16:50:26 +0000

HTML атрибут: autocomplete (автозаполнение)

Атрибут HTML autocomplete позволяет веб-разработчикам указать, какие разрешения должен иметь пользовательский агент для автоматической помощи при заполнении значений полей формы, а также указания браузеру относительно типа информации, ожидаемой в поле.

Он доступен для <input> элементов, которые принимают текстовое или числовое значение в качестве входных данных, <textarea> элементов, <select> элементов и <form> элементов.

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

Если элемент <input>, <select> или <textarea> не имеет autocomplete атрибута, браузеры используют атрибут autocomplete владельца формы элемента, который является либо <form> элементом, потомком которого является элемент, либо атрибутом <form> которого id указан formатрибут элемента (см. <form> autocomplete атрибут).

Примечание. Чтобы обеспечить автозаполнение, пользовательским агентам могут потребоваться элементы: <input> / <select> / <textarea>

Иметь name и/или id атрибут
Быть потомками <form> элемента
Форма для кнопки отправки (sumbit)

Попробуй

Значения

«off»	Браузеру не разрешено автоматически вводить или выбирать значение для этого поля. Возможно, документ или приложение предоставляет собственную функцию автозаполнения или соображения безопасности требуют, чтобы значение поля не вводилось автоматически.
	Примечание. В большинстве современных браузеров установка autocomplete« off» не помешает менеджеру паролей спрашивать пользователя, хотят ли они сохранить информацию об имени пользователя и пароле, или автоматически заполнять эти значения в форме входа на сайт. См. атрибут автозаполнения и поля входа.
«on»	Браузеру разрешено автоматически завершать ввод. Никаких указаний относительно типа данных, ожидаемых в поле, не предоставляется, поэтому браузер может принять собственное решение.
«name»	ожидается, что в поле будет указано полное имя человека. Обычно предпочтительнее использовать « name» вместо того, чтобы разбивать имя на компоненты, поскольку это позволяет избежать широкого разнообразия человеческих имен и их структуры; однако вы можете использовать следующие `autocomplete` значения, если вам нужно разбить имя на компоненты:
	«honorific-prefix» :Префикс или титул, например «Миссис», «Мистер», «Мисс», «Мисс», «Доктор» или «Мадемуазель».
	«given-name» :Данное (или «имя») имя.
	«additional-name» :Второе имя.
	«family-name» :Фамилия (или «фамилия»)
	«honorific-suffix» :Суффикс, например «младший», «бакалавр наук», «доктор философии», «MBASW» или «IV».
	«nickname» :Псевдоним или псевдоним.
«email»	адрес электронной почты.
«username»	имя пользователя или имя учетной записи.
«new-password»	Новый пароль. При создании новой учетной записи или изменении паролей это поле следует использовать для поля «Введите новый пароль» или «Подтвердите новый пароль», а не общего поля «Введите текущий пароль», которое может присутствовать. Это может использоваться браузером как для предотвращения случайного ввода существующего пароля, так и для оказания помощи в создании безопасного пароля (см. также Предотвращение автозаполнения с помощью autocomplete="new-password").
«current-password»	текущий пароль пользователя.
«one-time-code»	одноразовый пароль (OTP) для проверки информации пользователя. Чаще всего это номер телефона, используемый в качестве дополнительного фактора при входе в систему.
«organization-title»	должность или должность, которую человек имеет в организации, например «Старший технический писатель», «Президент» или «Помощник командира отряда».
«organization»	название компании или организации, например «Acme Widget Company» или «Девочки-скауты Америки».
«street-address»	Адрес. Это может быть несколько строк текста, и он должен полностью идентифицировать местоположение адреса на втором административном уровне (обычно город), но не должен включать название города, почтовый индекс или индекс или название страны.
	«shipping» :адрес для отправки товара. Его можно комбинировать с другими токенами, такими как `«shipping street-address»` и `«shipping address-level2»`.
	«billing» : почтовый адрес, который необходимо связать с используемой формой оплаты. Его можно комбинировать с другими токенами, такими как `«billing street-address»` и `«billing address-level2»`.
«address-line1», «address-line2», «address-line3»	каждая отдельная строка адреса. Они должны присутствовать только в том случае, если `«street-address»` отсутствует.
«address-level4»	Самый детальный административный уровень для адресов, имеющих четыре уровня.
«address-level3»	Третий административный уровень для адресов с минимум тремя административными уровнями.
«address-level2»	Второй административный уровень , в адресах с минимум двумя из них. В странах с двумя административными уровнями это обычно город, поселок, деревня или другой населенный пункт, в котором расположен адрес.
«address-level1»	Первый административный уровень по адресу. Обычно это провинция, в которой расположен адрес. В Соединенных Штатах это будет штат. В Швейцарии кантон. В Великобритании почтовый город.
«country»	код страны или территории.
«country-name»	название страны или территории.
«postal-code»	почтовый индекс (в США это почтовый индекс).
«cc-name»	Полное имя, напечатанное или связанное с платежным инструментом, например кредитной картой. Использование поля полного имени обычно предпочтительнее, чем разбиение имени на части.
«cc-given-name»	Имя (имя), указанное на платежном инструменте, таком как кредитная карта.
«cc-additional-name»	второе имя, указанное на платежном инструменте или кредитной карте.
«cc-family-name»	фамилия, указанная на кредитной карте.
«cc-number»	номер кредитной карты или другой номер, определяющий способ оплаты, например номер счета.
«cc-exp»	дата истечения срока действия способа оплаты, обычно в формате «ММ/ГГ» или «ММ/ГГГГ».
«cc-exp-month»	Месяц, в котором истекает срок действия способа оплаты.
«cc-exp-year»	год истечения срока действия способа оплаты.
«cc-csc»	код безопасности платежного инструмента; на кредитных картах это трехзначный проверочный номер, указанный на обратной стороне карты.
«cc-type»	тип платежного инструмента (например, «Visa» или «Master Card»).
«transaction-currency»	Валюта, в которой должна осуществляться транзакция.
«transaction-amount»	Сумма, указанная в валюте transaction-currencyтранзакции, указанной в параметре « », для формы платежа.
«language»	Предпочтительный язык, указанный в виде допустимого языкового тега BCP 47.
«bday»	дата рождения в виде полной даты.
«bday-day»	день месяца даты рождения.
«bday-month»	Месяц года даты рождения.
«bday-year»	Год рождения.
«sex»	гендерная идентичность (например, «Женский», «Фаафафине», «Хиджра», «Мужской», «Недвоичный») в виде текста произвольной формы без новых строк.
«tel»	полный номер телефона, включая код страны. Если вам нужно разбить номер телефона на компоненты, вы можете использовать эти значения для этих полей.
	«tel-country-code» :Код страны, например «1», для США, Канады и других регионов Северной Америки и некоторых частей Карибского бассейна.
	«tel-national» :Полный номер телефона без компонента кода страны, включая внутренний префикс страны. Для номера телефона «1-855-555-6502» значение этого поля будет «855-555-6502».
	«tel-area-code» :Код города с любым внутренним префиксом страны, если это необходимо.
	«tel-local» :Номер телефона без кода страны или города. Его можно разделить на две части для телефонных номеров, у которых есть номер обмена, а затем номер внутри обмена. Для номера телефона «555-6502» используйте « tel-local-prefix» для «555» и « tel-local-suffix» для «6502».
«tel-extension»	добавочный телефонный код внутри телефонного номера, например номер комнаты или люкса в отеле или добавочный номер офиса в компании.
«impp»	URL-адрес конечной точки протокола обмена мгновенными сообщениями, например «xmpp: username@example.net».
«url»	URL-адрес, например домашняя страница или адрес веб-сайта компании, в зависимости от контекста других полей формы.
«photo»	URL-адрес изображения, представляющего человека, компанию или контактную информацию, указанную в других полях формы.
«webauthn»	ключи доступа, генерируемые API веб-аутентификации по запросу условного navigator.credentials.get() вызова (т.е. того, который включает mediation 'conditional'). Дополнительные сведения см. в разделе Вход с паролем через автозаполнение формы.

Более подробную информацию см. в стандарте WHATWG .|

Примечание. Этот autocomplete атрибут также определяет, будет ли Firefox — в отличие от других браузеров — сохранять динамическое отключенное состояние и (если применимо) динамическую проверку элемента <input>, <textarea> элемента или всей <form> страницы при загрузке страницы. Функция сохранения включена по умолчанию. Установка значения атрибута autocomplete на off отключает эту функцию. Это работает даже тогда, когда autocomplete атрибут обычно не применяется из-за его type. См. ошибку Firefox 654072.

Примеры

Административные уровни в адресах

Четыре поля административного уровня (address-level1до address-level4) описывают адрес с точки зрения возрастающей точности в пределах страны, в которой расположен адрес. Каждая страна имеет свою собственную систему административных уровней и может располагать уровни в разном порядке при написании адресов.

address-level1 всегда представляет самое широкое административное деление; это наименее конкретная часть адреса, не считая названия страны.

Гибкость макета формы

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

Вариации

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

Соединенные Штаты

Типичный домашний адрес в США выглядит так:

432 Anywhere St, Примервилль, Калифорния 95555

В Соединенных Штатах наименее конкретной частью адреса является штат, в данном случае «CA» (официальное сокращение Почтовой службы США от «Калифорния»). Таково address-level1 состояние или «CA» в данном случае.

Вторая по значимости часть адреса — это название города или поселка, как и address-level2 «Exampleville» в этом примере адреса.

В адресах США не используются уровни 3 и выше.

Великобритания

Формы ввода адреса в Великобритании должны содержать один уровень адреса и одну, две или три адресные строки, в зависимости от адреса. Полный адрес будет выглядеть так:

103 Фрогмарч-стрит Аппер-Уэппинг Винчелси TN99 8ZZ

Уровни адресов:

address-level1: Почтовый город — в данном случае «Уинчелси».
address-line2: Местность — в данном случае «Аппер-Уаппинг».
address-line1: Характеристики дома/улицы — «Фрогмарч-стрит, 103».

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

Китай

В Китае может использоваться до трех административных уровней: провинция, город и район.

Почтовый индекс из 6 цифр не всегда требуется, но при его наличии он для ясности помещается отдельно с этикеткой. Например:

北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元邮编:100005

Япония

Адрес в Японии обычно записывается в одну строку в порядке от менее конкретной к более конкретной части (в обратном порядке по отношению к США ). В адресе имеется два или три административных уровня. Дополнительную строку можно использовать для отображения названий зданий и номеров комнат. Почтовый индекс указан отдельно. Например:

〒 381-0000 長野県長野市某町 123

«〒» и следующие семь цифр обозначают почтовый индекс.

address-level1 используется для обозначения префектур или мегаполиса Токио; В данном случае «長野県» (префектура Нагано). address-level2 обычно используется для городов, округов, поселков и деревень; В данном случае «長野市» (город Нагано). «某町 123» address-line1 состоит из названия участка и номера участка.

capture

anonymous@undisclosed.example.com (Anonymous) — Wed, 30 Aug 2023 17:46:32 +0000

HTML атрибут: capture (захват)

Атрибут capture указывает, что (необязательно) должен быть записан новый файл и какое устройство следует использовать для захвата этого нового носителя типа, определенного атрибутом accept.

Значения включают user и environment. Атрибут захвата поддерживается для типа входного файла.

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

Значение	Описание
user	Следует использовать камеру и/или микрофон, обращенную к пользователю.
environment	Следует использовать направленную наружу камеру и/или микрофон.

Примечание. Ранее Capture был логическим атрибутом, который, если он присутствовал, запрашивал использование устройства захвата мультимедиа устройства, такого как камера или микрофон, вместо запроса ввода файла.

Попробуй

Примеры

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

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

crossorigin

anonymous@undisclosed.example.com (Anonymous) — Wed, 30 Aug 2023 22:07:14 +0000

HTML атрибут: crossorigin (перекрестное происхождение)

Атрибут crossorigin , действительный для элементов <audio>, <img>, <link>, <script> и <video>, обеспечивает поддержку CORS определяя, как элемент обрабатывает запросы из разных источников, тем самым позволяя настраивать запросы CORS для извлеченных данных элемента. В зависимости от элемента атрибут может быть атрибутом настроек CORS.

Атрибут контента crossorigin в элементах мультимедиа является атрибутом настроек CORS.

Эти атрибуты перечисляются и имеют следующие возможные значения:

anonymous	В запросе используются заголовки CORS, а флаг учетных данных установлен в значение `'same-origin`'. Обмен учетными данными пользователя через файлы cookie, SSL-сертификаты на стороне клиента или HTTP-аутентификацию не осуществляется , если пункт назначения не совпадает с источником.
use-credentials	В запросе используются заголовки CORS, установлен флаг учетных данных `'include`' и учетные данные пользователя всегда включены.
""	Установка имени атрибута в пустое значение, например `crossorigin` или `crossorigin=«»`, аналогично anonymous.

Недопустимое ключевое слово и пустая строка будут обрабатываться как anonymous ключевое слово.

По умолчанию (то есть, когда атрибут не указан) CORS вообще не используется. Пользовательский агент не будет запрашивать разрешение на полный доступ к ресурсу, и в случае запроса между источниками будут применяться определенные ограничения в зависимости от типа соответствующего элемента:

Элемент	Ограничения
<img>, <audio>, <video>	Когда ресурс помещается в <canvas>, элемент помечается как испорченный.
script	Доступ к журналу ошибок через window.onerror будет ограничен.
link	Запрос без соответствующего `crossorigin` заголовка может быть отклонен.

Примечание. Этот crossorigin атрибут не поддерживается rel="icon" в браузерах на базе Chromium. См. открытый выпуск Chromium.

Пример: crossorigin с <script> элементом

Вы можете использовать следующий <script> элемент, чтобы указать браузеру выполнить сценарий файла script-defer.js находящегося в папке «js» для смены цвета прямоугольника при наведении мыши. Ниже приведен код файла script-defer.js

JavaScript

example.onmouseover = function() {
example.style.background= "red";
};
 
example.onmouseleave = function() {
example.style.background= "yellow";
};

Пример: веб-манифест с учетными данными

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

Пример: <video> и <audio> с перекрестным происхождением

Теги <video> и <audio> с атрибутом Crossorigin

dirname

anonymous@undisclosed.example.com (Anonymous) — Wed, 30 Aug 2023 23:13:31 +0000

HTML атрибут: dirname (имя каталога)

Атрибут dirname можно использовать для <textarea> элементов <input> и он описывает направление текстового содержимого элемента во время отправки формы. Браузер использует значение этого атрибута, чтобы определить, ориентирован ли введенный пользователем текст слева направо или справа налево. При использовании значение направленности текста элемента включается в данные отправки формы вместе со dirname значением атрибута в качестве имени поля.

Примечания по использованию

Атрибут dirname можно использовать для любого <textarea> элемента или любого <input> элемента с типом text, search, tel, url или email.

Формат передаваемых данных — {dirname_value}={direction} это {dirname_value} значение атрибута dirname и {direction} направление текста. Например, если пользователь вводит «Hello» в элементе с атрибутами name=«comment» и dirname=«comment-direction», данные отправки формы в URL-кодировке для GET запросов будут иметь вид comment=Hello&comment-direction=ltr. Направленность является одной из следующих:

rtl	Текст, вводимый пользователем, пишется справа налево.
ltr	Текст, вводимый пользователем, ведется слева направо.

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

Примеры

Направленность элемента Textarea

В этом примере dir=«auto» атрибут элемента textarea позволяет автоматически определять направление текста на основе текста, введенного пользователем:

HTML

<form method="get" action="https://www.example.com/submit">
  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
  <textarea name="comment" dir="auto" dirname="comment-direction">example</textarea>
  <br>
  <button type="submit">Send my greetings</button>
</form>

Когда пользователь отправляет форму, пользовательский агент включает два поля: одно вызывается comment со значением «سيب», а другое — comment-direction со значением «rtl». Тело отправки в URL-коде выглядит следующим образом:

URL

https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl

Направленность входного элемента

В этом примере dir=«auto» атрибут элемента ввода позволяет автоматически определять направление текста на основе текста, введенного пользователем:

Когда пользователь отправляет форму, пользовательский агент включает два поля: одно со comment-input значением «Hello», а другое comment-direction со значением «ltr»:

URL

https://www.example.com/submit?comment-input=Hello&comment-direction=ltr

Наследование направленности

Следующие элементы <input> и <textarea> не имеют dir атрибута, поэтому они наследуют явную направленность своего родительского элемента, а именно rtl:

Тело отправки в URL-коде выглядит следующим образом:

URL

https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl

disabled

anonymous@undisclosed.example.com (Anonymous) — Thu, 31 Aug 2023 08:42:14 +0000

HTML атрибут: disabled (отключен)

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

Попробуй

Обзор

Если disabled атрибут указан в элементе управления формой, элемент и его потомки элемента управления формой не участвуют в проверке ограничений. Часто браузеры выделяют такие элементы управления серым цветом и не получают никаких событий просмотра, таких как щелчки мыши или события, связанные с фокусом.

Атрибут disabledподдерживается <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea> и <input>.

Этот логический отключенный атрибут указывает, что пользователь не может взаимодействовать с элементом управления или его дочерними элементами управления. Если этот атрибут не указан, элемент управления наследует свою настройку от содержащего его элемента, например fieldset; если нет содержащего элемента с disabled установленным атрибутом, а сам элемент управления не имеет атрибута, то элемент управления включен. Если объявлено в <optgroup>, выбор остается интерактивным (если не отключено иное), но ни один из элементов в группе параметров не может быть выбран.

Примечание. Если a <fieldset> отключен, все элементы управления дочерней формой отключены, за исключением элементов управления формы в файле <legend>.

Если к вспомогательному элементу disabled применен атрибут, :disabled к нему также применяется псевдокласс. И наоборот, элементы, которые поддерживают disabled атрибут, но не имеют набора атрибутов, соответствуют псевдоклассу :enabled.

Этот логический атрибут не позволяет пользователю взаимодействовать с кнопкой. Если этот атрибут не установлен, кнопку все равно можно отключить из содержащего ее элемента, например <fieldset>; если содержащего элемента с установленным атрибутом нет disabled, кнопка активна.

Firefox, в отличие от других браузеров, будет сохранять динамическое отключенное состояние при <button> загрузке страниц. Используйте :autocomplete атрибут для управления этой функцией.

Взаимодействие атрибутов

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

Поскольку значение отключенного поля не может быть изменено, :required оно не оказывает никакого влияния на входные данные с disabled указанным атрибутом. Кроме того, поскольку элементы становятся неизменяемыми, большинство других атрибутов, таких как :pattern, не действуют, пока элемент управления не будет включен.

Примечание. Атрибут required не разрешен для входных данных с disabled указанным атрибутом.

Удобство использования

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

Если он присутствует во вспомогательных элементах, :disabled псевдокласс будет соответствовать. Если атрибут не включен, :enabled псевдокласс будет соответствовать. Если элемент не поддерживает отключенный атрибут, атрибут не будет иметь никакого эффекта, в том числе не приведет к сопоставлению с псевдоклассами :disabled и :enabled.

Проверка ограничений

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

Примеры

Когда элементы управления формой отключены, многие браузеры по умолчанию отображают их более светлым, серым цветом. Ниже приведены примеры отключенного флажка, переключателя <option> и <optgroup>, а также некоторых элементов управления формой, которые отключаются с помощью атрибута Disable, установленного в <fieldset> элементе-предке. S <option> отключены, но <select> сам нет. Мы могли бы отключить все <select>, добавив атрибут к этому элементу, а не к его потомкам.

elementtiming

anonymous@undisclosed.example.com (Anonymous) — Thu, 31 Aug 2023 09:29:16 +0000

HTML атрибут: elementtiming (наблюдение)

Атрибут elementtiming используется для указания того, что элемент помечен для отслеживания PerformanceObserver объектами, использующими этот «element» тип. Более подробную информацию смотрите в PerformanceElementTiming интерфейсе.

Этот атрибут может применяться к <img>, <image> элементам внутри <svg>, плакатным изображениям <video> элементов, элементам, имеющим background-image, и элементам, содержащим текстовые узлы, например <p>.

В DOM этот атрибут отображается как PerformanceElementTiming.

Применение

Значение, заданное для, elementtiming становится идентификатором наблюдаемого элемента.

Хорошими претендентами на элементы, которые вы, возможно, захотите наблюдать, являются:

Основное изображение статьи.
Название поста в блоге
Изображения в карусели для торгового сайта.
Изображение постера для основного видео на странице.

Примеры

for

anonymous@undisclosed.example.com (Anonymous) — Thu, 31 Aug 2023 09:59:51 +0000

HTML атрибут: for (для)

Атрибут for является разрешенным атрибутом для <label> и <output>. При использовании на <label> элементе он указывает элемент формы, который описывает эта метка. При использовании с <output> элементом он позволяет установить явную связь между элементами, которые представляют значения, используемые в выходных данных.

Применение

При использовании в качестве атрибута <label> атрибут for имеет значение, соответствующее id элементу формы, к которому он относится.

При использовании в качестве атрибута <output> атрибут for имеет значение, которое представляет собой разделенный пробелами список значений id элементов, которые используются для создания выходных данных.

В следующем примере форма предоставляет ползунок, значение которого может находиться в диапазоне от 0и 100, а также <input> элемент, в который можно ввести второе число. Два числа складываются, и результат отображается в элементе <output> каждый раз, когда изменяется значение любого из элементов управления.

Примеры

Использование атрибута для элементов <label> и <output>.

max

anonymous@undisclosed.example.com (Anonymous) — Thu, 31 Aug 2023 11:34:05 +0000

HTML атрибут: max (макс)

Атрибут max определяет максимальное значение, которое является приемлемым и допустимым для входных данных, содержащих атрибут. Если значение value элемента больше этого значения, элемент не проходит проверку (validation). Это значение должно быть больше или равно значению атрибута min. Если maxатрибут присутствует, но не указан или недействителен, maxзначение не применяется. Если max атрибут действителен и непустое значение превышает максимально допустимое для max атрибута, проверка ограничения предотвратит отправку формы.

Действителен для числовых типов ввода, включая типы date, Month, Week, Time, DateTime-local, Number и Range, а также элементов <progress> и <meter>. Атрибут max представляет собой число, указывающее наиболее положительное значение, которое элемент управления формы считается действительным.

Если значение превышает максимально допустимое значение, validityState.rangeOverflow будет true истина), и элемент управления будет соответствовать псевдоклассам :out-of-range и :invalid.

Синтаксис

Синтаксис для max значений по вводу type

Тип ввода	Синтаксис	Пример
date	yyyy-mm-dd	<input type=«date» max=«2019-12-25» step=«1»>
Month	yyyy-mm	<input type=«month» max=«2019-12» step=«12»>
Week	yyyy-W##	<input type=«week» max=«2019-W23» step=«»>
Time	hh:mm	<input type=«time» max=«17:00» step=«900»>
DateTime-local	yyyy-mm-ddThh:mm	<input type=«datetime-local» max=«2019-12-25T23:59»>
Number	<number>	<input type=«number» min=«0» step=«5» max=«100»>
Range	<number>	<input type=«range» min=«60» step=«5» max=«100»>

Примечание. Если данные, введенные пользователем, не соответствуют установленному максимальному значению, значение считается недействительным при проверке ограничений и будет соответствовать псевдоклассам :out-of-range и :invalid

См. раздел Проверка на стороне клиента и rangeOverflow дополнительную информацию.

Для <progress> элемента max атрибут описывает, сколько работы <progress> требует задача, указанная элементом. Если он присутствует, он должен иметь значение больше нуля и быть допустимым числом с плавающей запятой. Для <meter> элемента max атрибут определяет верхнюю числовую границу измеряемого диапазона. Оно должно быть больше минимального значения (min атрибута), если оно указано. В обоих случаях, если он опущен, значение по умолчанию равно 1.

Синтаксис max значений для других элементов

Тип ввода	Синтаксис	Пример
<progress>	<number>	<progress id=«file» max=«100» value=«70»> 70% </progress>
<meter>	<number>	<meter id=«fuel» min=«0» max=«100» low=«33» high=«66» optimum=«80» value=«40»> at 40/100</meter>

Проблемы доступности

Предоставьте инструкции, которые помогут пользователям понять, как заполнять форму и использовать отдельные элементы управления формой. Укажите все необходимые и необязательные входные данные, форматы данных и другую соответствующую информацию. При использовании max атрибута убедитесь, что это максимальное требование понятно пользователю. Предоставления инструкций внутри <label> может быть достаточно. Если вы предоставляете инструкции вне этикеток, что обеспечивает более гибкое позиционирование и дизайн, рассмотрите возможность использования aria-labelledby или aria-describedby.

maxlength

anonymous@undisclosed.example.com (Anonymous) — Thu, 31 Aug 2023 12:27:14 +0000

HTML атрибут: maxlength (максимальная длина)

Атрибут maxlength определяет максимальную длину строки, которую пользователь может ввести в файл <input> или <textarea>. Атрибут должен иметь целое значение 0 или выше.

Длина измеряется в кодовых единицах UTF-16, что (для большинства скриптов) эквивалентно количеству символов. Если maxlength не указано или указано недопустимое значение (invalid value), ввод не имеет максимальной длины.

Любое maxlength значение должно быть больше или равно значению minlength, если оно присутствует и допустимо. Ввод не пройдет проверку ограничения, если длина текстового значения поля превышает максимальную длину кодовых единиц UTF-16. Проверка ограничений применяется только тогда, когда значение изменяется пользователем.

Проверка ограничений

Хотя браузер обычно запрещает пользователю вводить больше текста, чем позволяет атрибут maxlength, если длина превышает допустимую maxlength, свойство tooLong объекта только для чтения ValidityState будет иметь значение true.

Попробуй

Примеры

min

anonymous@undisclosed.example.com (Anonymous) — Thu, 31 Aug 2023 13:22:21 +0000

HTML атрибут: min (минимум)

Атрибут min определяет минимальное значение, которое является приемлемым и действительным для входных данных, содержащих атрибут. Если значение value элемента меньше этого значения, элемент не проходит проверку (validation). Это значение должно быть меньше или равно значению атрибута max.

Некоторые типы входных данных имеют минимум по умолчанию. Если входные данные не имеют минимального значения по умолчанию и для него указано значение, min которое нельзя преобразовать в допустимое число (или минимальное значение не установлено), входные данные не имеют минимального значения.

Действителен для числовых типов ввода, включая типы date, Month, Week, Time, DateTime-local, Number и Range, а также элемента <meter>.

Синтаксис

Синтаксис для min значений по вводу type

Тип ввода	Синтаксис	Пример
date	yyyy-mm-dd	<input type=«date» min=«2019-12-25» step=«1»>
Month	yyyy-mm	<input type=«month» min=«2019-12» step=«12»>
Week	yyyy-W##	<input type=«week» min=«2019-W23» step=«»>
Time	hh:mm	<input type=«time» min=«09:00» step=«900»>
DateTime-local	yyyy-mm-ddThh:mm	<input type=«datetime-local» min=«2019-12-25T19:30»>
Number	<number>	<input type=«number» min=«0» step=«5» max=«100»>
Range	<number>	<input type=«range» min=«60» step=«5» max=«100»>

Примечание. Если данные, введенные пользователем, не соответствуют заданному минимальному значению, значение считается недопустимым при проверке ограничений и будет соответствовать псевдоклассам и :out-of-range и :invalid

См. раздел Проверка на стороне клиента и rangeOverflow дополнительную информацию.

Для <meter> элемента min атрибут определяет нижнюю числовую границу измеряемого диапазона. Оно должно быть меньше минимального значения (maxатрибута), если оно указано. В обоих случаях, если он опущен, значение по умолчанию равно 1.

Синтаксис min значений для других элементов

Тип ввода	Синтаксис	Пример
<meter>	<number>	<meter id=«fuel» min=«0» max=«100» low=«33» high=«66» optimum=«80» value=«40»> at 40/100</meter>

Влияние на шаг

Значение min и step определяет допустимые значения, даже если stepатрибут не включен (по step умолчанию ) 0.

Мы добавляем большую красную рамку вокруг недопустимых входных данных:

CSS

input:invalid {
  border: solid red 3px;
}

Поскольку step по умолчанию установлено значение 1, допустимыми значениями являются 7.2, 8.2, 9.2 и т. д. Значение 8 недопустимо. Поскольку мы включили недопустимое значение, поддерживающие браузеры будут отображать это значение как недопустимое.

Если это не указано явно, step по умолчанию используется значение 1 для number и rangeи 1 тип единицы измерения (секунда, неделя, месяц, день) для типов ввода даты/времени.

Проблемы доступности

Предоставьте инструкции, которые помогут пользователям понять, как заполнять форму и использовать отдельные элементы управления формой. Укажите все необходимые и необязательные входные данные, форматы данных и другую соответствующую информацию. При использовании min атрибута убедитесь, что это минимальное требование понятно пользователю. Предоставления инструкций внутри <label> может быть достаточно. Если вы предоставляете инструкции вне этикеток, что обеспечивает более гибкое позиционирование и дизайн, рассмотрите возможность использования aria-labelledby или aria-describedby.

minlength

anonymous@undisclosed.example.com (Anonymous) — Wed, 06 Sep 2023 17:49:29 +0000

HTML атрибут: minlength (минимальная длина)

Атрибут minlength определяет максимальную длину строки, которую пользователь может ввести в файл <input> или <textarea>. Атрибут должен иметь целое значение 0 или выше.

Длина измеряется в кодовых единицах UTF-16, что (для большинства скриптов) эквивалентно количеству символов. Если minlength не указано или указано недопустимое значение (invalid value), ввод не имеет минимальной длины. Это значение должно быть меньше или равно значению maxlength, в противном случае значение никогда не будет действительным, поскольку невозможно удовлетворить обоим критериям. Проверка ограничений применяется только тогда, когда значение изменяется пользователем.

Проверка ограничений

Ввод не пройдет проверку ограничения, если длина текстового значения поля меньше минимальной длины кодовых единиц UTF-16 с validityState.tooShort возвратом true (истина). Проверка ограничений применяется только тогда, когда значение изменяется пользователем. Если отправка не удалась, некоторые браузеры отобразят сообщение об ошибке с указанием минимальной требуемой длины и текущей длины.

Попробуй

Примеры

При добавлении minlength=«5» значение должно быть либо пустым, либо состоять из пяти символов или длиннее, чтобы быть действительным.

Мы можем использовать псевдоклассы для стилизации элемента в зависимости от того, допустимо ли значение. Значение будет действительным, если оно имеет нулевое значение (пустое) или имеет длину пять или более символов. Лайм недействителен, лимон действителен.