worldwide open-source software

Инструменты пользователя

Инструменты сайта

Вы посетили: • autocomplete
software:development:web:docs:web:html:attributes:autocomplete

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
software:development:web:docs:web:html:attributes:autocomplete [2023/08/25 21:11] – создано - внешнее изменение 127.0.0.1software:development:web:docs:web:html:attributes:autocomplete [2023/08/30 19:50] (текущий) – [Значения] vladpolskiy
Строка 1: Строка 1:
-====== HTML атрибут: accept (принять) ====== +====== HTML атрибут: autocomplete (автозаполнение) ====== 
-Атрибут acceptпринимает в качестве значения разделенный запятыми список одного или нескольких типов файлов или уникальные спецификаторы типов файлов , описывающие, какие типы файлов разрешены.+Атрибут HTML ''autocomplete'' позволяет веб-разработчикам указать, какие разрешения должен иметь [[software:development:web:docs:Glossary:User_agent|пользовательский агент]] для автоматической помощи при заполнении значений полей формы, а также указания браузеру относительно типа информации, ожидаемой в поле. 
 + 
 +Он доступен для [[software:development:web:docs:Web:HTML:Element:input|<input>]] элементов, которые принимают текстовое или числовое значение в качестве входных данных, [[software:development:web:docs:Web:HTML:Element:textarea|<textarea>]] элементов, [[software:development:web:docs:Web:HTML:Element:select|<select>]] элементов и [[software:development:web:docs:Web:HTML:Element:form|<form>]] элементов. 
 + 
 +Источник предлагаемых значений обычно зависит от браузера; обычно значения берутся из прошлых значений, введенных пользователем, но они также могут быть взяты из предварительно настроенных значений. Например, браузер может позволить пользователю сохранять свое имя, адрес, номер телефона и адреса электронной почты для целей автозаполнения. Возможно, браузер предлагает возможность сохранять зашифрованную информацию о кредитной карте для автоматического заполнения после процедуры аутентификации. 
 + 
 +Если элемент [[software:development:web:docs:Web:HTML:Element:input|<input>]], [[software:development:web:docs:Web:HTML:Element:select|<select>]] или [[software:development:web:docs:Web:HTML:Element:textarea|<textarea>]] не имеет ''autocomplete'' атрибута, браузеры используют атрибут ''autocomplete'' владельца формы элемента, который является либо [[software:development:web:docs:Web:HTML:Element:form|<form>]] элементом, потомком которого является элемент, либо атрибутом [[software:development:web:docs:Web:HTML:Element:form|<form>]] которого ''id'' указан formатрибут элемента (см. [[software:development:web:docs:Web:HTML:Element:form|<form>]] ''autocomplete'' атрибут). 
 + 
 +<WRAP left round tip 100%> 
 +**Примечание.** Чтобы обеспечить автозаполнение, пользовательским агентам могут потребоваться элементы: ''<input>'' / ''<select>'' / ''<textarea>'' 
 +  - Иметь ''name'' и/или ''id'' атрибут 
 +  - Быть потомками ''<form>'' элемента 
 +  - Форма для кнопки [[software:development:web:docs:Web:HTML:Element:input:submit|отправки (sumbit)]] 
 +</WRAP> 
  
 ===== Попробуй ===== ===== Попробуй =====
 <html> <html>
-<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-accept.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-autocomplete.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 </iframe> </iframe>
 </html> </html>
  
-===== Обзор ===== +===== Значения =====
-Свойство Accept является атрибутом типа [[software:development:web:docs:web:html:element:input:file|файла]] [[software:development:web:docs:web:html:element:input|<input>]]. Он поддерживался в <form>элементе, но был удален в пользу файла .+
  
-Поскольку данный тип файла может быть идентифицирован более чем одним способом, полезно предоставить подробный набор спецификаторов типов, когда вам нужны файлы определенного типа, или использовать подстановочный знак для обозначения допустимого типа любого формата.+{{tablelayout?colwidth="200px"}} 
 +|"off"|Браузеру не разрешено автоматически вводить или выбирать значение для этого поля. Возможно, документ или приложение предоставляет собственную функцию автозаполнения или соображения безопасности требуют, чтобы значение поля не вводилось автоматически.| 
 +| |<WRAP left round tip 100%>**Примечание.** В большинстве современных браузеров установка autocomplete« off» не помешает менеджеру паролей спрашивать пользователя, хотят ли они сохранить информацию об имени пользователя и пароле, или автоматически заполнять эти значения в форме входа на сайт. См. [[software:development:web:docs:Web:Security:Securing_your_site:Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields|атрибут автозаполнения и поля входа.]]</WRAP>| 
 +|**"on"**|Браузеру разрешено автоматически завершать ввод. Никаких указаний относительно типа данных, ожидаемых в поле, не предоставляется, поэтому браузер может принять собственное решение.| 
 +|**"name"**|ожидается, что в поле будет указано полное имя человека. Обычно предпочтительнее использовать « name» вместо того, чтобы разбивать имя на компоненты, поскольку это позволяет избежать широкого разнообразия человеческих имен и их структуры; однако вы можете использовать следующие ''autocomplete'' значения, если вам нужно разбить имя на компоненты:| 
 +| |**"honorific-prefix"** :Префикс или титул, например «Миссис», «Мистер», «Мисс», «Мисс», «Доктор» или «Мадемуазель».| 
 +| |**"given-name"** :Данное (или «имя») имя.| 
 +| |**"additional-name"** :Второе имя.| 
 +| |**"family-name"** :Фамилия (или «фамилия»)| 
 +| |**"honorific-suffix"** :Суффикс, например «младший», «бакалавр наук», «доктор философии», «MBASW» или «IV».| 
 +| |**"nickname"** :Псевдоним или псевдоним.| 
 +|**"email"** |адрес электронной почты.| 
 +|**"username"**|имя пользователя или имя учетной записи.| 
 +|**"new-password"**|Новый пароль. При создании новой учетной записи или изменении паролей это поле следует использовать для поля «Введите новый пароль» или «Подтвердите новый пароль», а не общего поля «Введите текущий пароль», которое может присутствовать. Это может использоваться браузером как для предотвращения случайного ввода существующего пароля, так и для оказания помощи в создании безопасного пароля (см. также [[software:development:web:docs:Web:Security:Securing_your_site:Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-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"**|Самый детальный [[software:development:web:docs:Web:HTML:Attributes:autocomplete#administrative_levels_in_addresses|административный уровень]] для адресов, имеющих четыре уровня.| 
 +|**"address-level3"**|Третий [[software:development:web:docs:Web:HTML:Attributes:autocomplete#administrative_levels_in_addresses|административный уровень]] для адресов с минимум тремя административными уровнями.| 
 +|**"address-level2"**|Второй [[software:development:web:docs:Web:HTML:Attributes:autocomplete#administrative_levels_in_addresses|административный уровень]] , в адресах с минимум двумя из них. В странах с двумя административными уровнями это обычно город, поселок, деревня или другой населенный пункт, в котором расположен адрес.| 
 +|**"address-level1"**|Первый [[software:development:web:docs:Web:HTML:Attributes:autocomplete#administrative_levels_in_addresses|административный уровень]] по адресу. Обычно это провинция, в которой расположен адрес. В Соединенных Штатах это будет штат. В Швейцарии кантон. В Великобритании почтовый город.| 
 +|**"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"**|Предпочтительный язык, указанный в виде допустимого [[https://en.wikipedia.org/wiki/IETF_language_tag|языкового тега 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|username@example.net]]».| 
 +|**"url"**|URL-адрес, например домашняя страница или адрес веб-сайта компании, в зависимости от контекста других полей формы.| 
 +|**"photo"**|URL-адрес изображения, представляющего человека, компанию или контактную информацию, указанную в других полях формы.| 
 +|**"webauthn"**|ключи доступа, генерируемые [[software:development:web:docs:Web:API:Web_Authentication_API|API веб-аутентификации]] по запросу условного [[software:development:web:docs:Web:API:CredentialsContainer:get|navigator.credentials.get()]] вызова (т.е. того, который включает mediation  'conditional'). Дополнительные сведения см. [[https://web.dev/passkey-form-autofill/|в разделе Вход с паролем через автозаполнение формы.]]| 
 +Более подробную информацию см. в [[https://html.spec.whatwg.org/multipage/forms.html#autofill|стандарте WHATWG]] .|
  
-Например, существует несколько способов идентификации файлов Microsoft Word, поэтому сайт, принимающий файлы Word, может использовать <input> следующий код:+<WRAP left round tip 100%>**Примечание.**  
 +Этот ''autocomplete'' атрибут также определяет, будет ли Firefox — в отличие от других браузеров — [[https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing|сохранять динамическое отключенное состояние и (если применимо) динамическую проверку]] элемента ''<input>'', ''<textarea>'' элемента или всей ''<form>'' страницы при загрузке страницы. Функция сохранения включена по умолчанию. Установка значения атрибута ''autocomplete'' на ''off'' отключает эту функцию. Это работает даже тогда, когда ''autocomplete'' атрибут обычно не применяется из-за его ''type''. См. [[https://bugzil.la/654072|ошибку Firefox 654072]]. 
 +</WRAP>
  
-<code html HTML> 
-<input 
-  type="file" 
-  id="docpicker" 
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" /> 
-</code> 
  
-Принимая во внимание, что если вы принимаете медиафайл, вы можете включить любой формат этого типа мультимедиа:+===== Примеры =====
  
-<code html HTML> +<html> 
-<input type="file" id="soundFile" accept="audio/*" /> +<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-autocomplete-cc-number.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> 
-<input type="file" id="videoFile" accept="video/*" /> +</iframe> 
-<input type="file" id="imageFile" accept="image/*" /> +</html>
-</code>+
  
-Атрибут ''accept'' не проверяет типы выбранных файлов; он предоставляет браузерам подсказки, помогающие пользователям выбрать правильные типы файлов. Пользователи по-прежнему могут (в большинстве случаев) переключить опцию в средстве выбора файлов, которая позволяет переопределить ее и выбрать любой файл по своему желанию, а затем выбрать неправильные типы файлов.+===== Административные уровни в адресах =====
  
-По этой причине вам следует убедиться, что ожидаемое требование проверено на стороне сервера.+Четыре поля административного уровня (''address-level1до address-level4'') описывают адрес с точки зрения возрастающей точности в пределах страны, в которой расположен адрес. Каждая страна имеет свою собственную систему административных уровней и может располагать уровни в разном порядке при написании адресов.
  
-===== Примеры =====+''address-level1'' всегда представляет самое широкое административное деление; это наименее конкретная часть адреса, не считая названия страны.
  
-Если задан тип ввода файла, открывающееся средство выбора файлов должно позволять выбирать только файлы правильного типа. Большинство операционных систем облегчают файлы, которые не соответствуют критериям и недоступны для выбора.+====Гибкость макета формы==== 
 +Учитывая, что разные страны пишут свой адрес по-разному, каждое поле находится в разных местах адреса и даже полностью различаются наборами и количеством полей, может быть полезно, если, когда это возможно, ваш сайт сможет переключиться на ожидаемый макет. вашими пользователями при представлении формы ввода адреса, учитывая страну, в которой находится адрес.
  
-<html> +====Вариации====
-<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-accept-1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
-</iframe> +
-</html>+
  
-Обратите внимание, что последний пример позволяет вам выбрать несколько изображений. См. [[software:development:web:docs:web:html:attributes:multiple|multiple]] атрибут для получения дополнительной информации.+Способ использования каждого административного уровня будет варьироваться от страны к стране. Ниже приведены несколько примеров; это не исчерпывающий список.
  
-===== Уникальные спецификаторы типов файлов =====+===Соединенные Штаты=== 
 +Типичный домашний адрес в США выглядит так:
  
-Уникальный спецификатор типа файла — это строка, описывающая тип файла, который может быть выбран пользователем в [[software:development:web:docs:web:html:element:input|<input>]] элементе type ''file''. Каждый уникальный спецификатор типа файла может принимать одну из следующих форм:+432 Anywhere St, Примервилль, Калифорния 95555
  
-  * Допустимое расширение имени файла без учета регистра, начинающееся с точки (""."). Например: ''.jpg'', ''.pdf'', или ''.doc''. +В Соединенных Штатах наименее конкретной частью адреса является штат, в данном случае «CA» (официальное сокращение Почтовой службы США от «Калифорния»). Таково ''address-level1'' состояние или «CA» в данном случае.
-  * Действительная строка типа MIME без расширений. +
-  * Строка, ''audio/*'' означающая «любой аудиофайл». +
-  * Строка, ''video/*'' означающая «любой видеофайл». +
-  * Строка, ''image/*'' означающая «любой файл изображения».+
  
-Атрибут ''accept'' принимает в качестве значения строку, содержащую один или несколько уникальных спецификаторов типов файлов, разделенных запятыми. Например, средство выбора файлов, которому требуется контент, который может быть представлен в виде изображения, включая как стандартные форматы изображений, так и файлы PDF, может выглядеть так:+Вторая по значимости часть адреса — это название города или поселка, как и ''address-level2'' «Exampleville» в этом примере адреса.
  
-<code html HTML> +В адресах США не используются уровни 3 и выше.
-<input type="file" accept="image/*,.pdf" /> +
-</code>+
  
-===== Использование файловых входов =====+===Великобритания===
  
-<html> +Формы ввода адреса в Великобритании должны содержать один уровень адреса и одну, две или три адресные строки, в зависимости от адреса. Полный адрес будет выглядеть так:
-<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-accept-2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
-</iframe> +
-</html>+
  
-Независимо от устройства или операционной системы пользователя, при вводе файла имеется кнопка, открывающая диалоговое окно выбора файла, позволяющее пользователю выбрать файл.+103 Фрогмарч-стрит Аппер-Уэппинг Винчелси TN99 8ZZ
  
-Включение [[software:development:web:docs:web:html:attributes:multiple|multiple]] атрибута, как показано выше, указывает, что одновременно можно выбрать несколько файлов. Пользователь может выбрать несколько файлов из средства выбора файлов любым способом, который позволяет выбранная им платформа (например, удерживая нажатой кнопку **Shift** или **Control** и затем щелкнув). Если вы хотите, чтобы пользователь выбирал только один файл для каждого [[software:development:web:docs:web:html:element:input|<input>]], опустите [[software:development:web:docs:web:html:attributes:multiple|multiple]] атрибут.+Уровни адресов:
  
-==== Ограничение допустимых типов файлов ====+  * ''address-level1'': Почтовый город — в данном случае «Уинчелси». 
 +  * ''address-line2'': Местность — в данном случае «Аппер-Уаппинг». 
 +  * ''address-line1'': Характеристики дома/улицы — «Фрогмарч-стрит, 103». 
 +Почтовый индекс отдельный. Обратите внимание, что на самом деле вы можете использовать только почтовый индекс и ''address-line1'' успешно доставлять почту в Великобритании, поэтому они должны быть единственными обязательными элементами, но обычно люди склонны предоставлять более подробную информацию.
  
-Часто вы не захотите, чтобы пользователь мог выбрать любой произвольный тип файла; вместо этого вы часто хотите, чтобы они выбирали файлы определенного типа или типов. Например, если ваш входной файл позволяет пользователям загружать изображение профиля, вы, вероятно, захотите, чтобы они выбрали веб-совместимые форматы изображений, такие как [[software:development:web:docs:glossary:JPEG|JPEG]] или [[software:development:web:docs:glossary:PNG|PNG]].+===Китай=== 
 +В Китае может использоваться до трех административных уровней: провинция, город и район.
  
-Приемлемые типы файлов можно указать с помощью [[software:development:web:docs:web:html:element:input:file#accept|accept]] атрибута, который принимает разделенный запятыми список разрешенных расширений файлов или типов MIME. Некоторые примеры:+Почтовый индекс из 6 цифр не всегда требуется, но при его наличии он для ясности помещается отдельно с этикеткой. Например:
  
-  * ''accept="image/png"'' или ''accept=".png"''— принимает файлы PNG. +北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元 邮编:100005
-  * ''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.+
  
-Давайте посмотрим на более полный пример:+===Япония=== 
 +Адрес в Японии обычно записывается в одну строку в порядке от менее конкретной к более конкретной части (в обратном порядке по отношению к США ). В адресе имеется два или три административных уровня. Дополнительную строку можно использовать для отображения названий зданий и номеров комнат. Почтовый индекс указан отдельно. Например: 
 + 
 +〒 381-0000 長野県長野市某町 123 
 + 
 +«〒» и следующие семь цифр обозначают почтовый индекс. 
 + 
 +''address-level1'' используется для обозначения префектур или мегаполиса Токио; В данном случае «長野県» (префектура Нагано). ''address-level2'' обычно используется для городов, округов, поселков и деревень; В данном случае «長野市» (город Нагано). «某町 123» ''address-line1'' состоит из названия участка и номера участка.
  
-<html> 
-<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-accept-3.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> 
-</iframe> 
-</html> 
software/development/web/docs/web/html/attributes/autocomplete.1692987093.txt.gz · Последнее изменение: — 127.0.0.1