Skip to content

Commit 20b115e

Browse files
authored
fix: wrong anchor link in sign in best practices articles (GoogleChrome#9171)
to work the way it is, it would need an empty title (I tried, but it was weird).
1 parent 0de7c9d commit 20b115e

File tree

7 files changed

+13
-14
lines changed
  • src/site/content
    • en/identity/sign-in-form-best-practices
    • es/identity/sign-in-form-best-practices
    • ja/identity/sign-in-form-best-practices
    • ko/identity/sign-in-form-best-practices
    • pt/identity/sign-in-form-best-practices
    • ru/identity/sign-in-form-best-practices
    • zh/identity/sign-in-form-best-practices

7 files changed

+13
-14
lines changed

src/site/content/en/identity/sign-in-form-best-practices/index.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ Here is an example of a simple sign-in form that demonstrates all of the best pr
5151
features](#element-attributes): `type`, `name`, `autocomplete`, `required`.
5252
* Give input `name` and `id` attributes stable values that don't change
5353
between page loads or website deployments.
54-
* Put sign-in [in its own <form> element](#single-form).
54+
* Put sign-in [in its own <form> element](#form).
5555
* [Ensure successful form submission](#submission).
5656
* Use [`autocomplete="new-password"`](#new-password) and [`id="new-password"`](#new-password) for
5757
the password input in a sign-up form, and for the new password in a reset-password form.
@@ -106,7 +106,6 @@ devices, enables a range of built-in browser features, makes it simpler to build
106106
basic functional sign-in for older browsers, and can still work even if
107107
JavaScript fails.
108108

109-
{: #single-form }
110109
{% Aside 'gotchas' %}
111110
A common mistake is to wrap a whole web page in a single form, but this is liable
112111
to cause problems for browser password managers and autofill. Use a different

src/site/content/es/identity/sign-in-form-best-practices/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ El siguiente es un ejemplo de un formulario de inicio de sesión simple que mues
3737
- [Etiquete cada entrada con una `<label>`](#label).
3838
- Utilice los atributos de los elementos para [acceder a las funciones integradas del navegador](#element-attributes): `type`, `name`, `autocomplete`, `required`.
3939
- Otórgueles a los atributos de entrada `name` e `id` valores que no cambien entre cargas de página o implementaciones de sitios web.
40-
- Coloque el inicio de sesión [en su propio elemento &lt;form&gt;](#single-form).
40+
- Coloque el inicio de sesión [en su propio elemento &lt;form&gt;](#form).
4141
- [Asegure el envío exitoso del formulario](#submission).
4242
- Utilice [`autocomplete="new-password"`](#new-password) e [`id="new-password"`](#new-password) para ingresar la contraseña en un formulario de registro y para la nueva contraseña en un formulario de restablecimiento de contraseña.
4343
- Utilice [`autocomplete="current-password"`](#current-password) e [`id="current-password"`](#current-password) para ingresar la contraseña de inicio de sesión.
@@ -65,7 +65,7 @@ Utilice elementos creados para el trabajo: `<form>`, `<label>` y `<button>`. Est
6565

6666
Es posible que tenga la tentación de agrupar las entradas en un `<div>` y manejar el envío de datos de entrada únicamente con JavaScript. Por lo general, es mejor usar un elemento plano [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) a la antigua. Esto hace que su sitio sea accesible para lectores de pantalla y otros dispositivos de asistencia, habilita una variedad de funciones integradas del navegador, simplifica la creación de un inicio de sesión funcional básico para navegadores más antiguos y aún puede funcionar incluso si JavaScript falla.
6767

68-
{: #single-form } {% Aside 'gotchas' %} Un error común es agrupar una página web completa en un solo formulario, pero esto puede causar problemas a los administradores de contraseñas del navegador y a la función autocompletar. Utilice un elemento &lt;form&gt; diferente para cada componente de la interfaz de usuario que necesite un formulario. Por ejemplo, si tiene un inicio de sesión y un espacio de búsqueda en la misma página, debe usar dos elementos de formulario. {% endAside %}
68+
{% Aside 'gotchas' %} Un error común es agrupar una página web completa en un solo formulario, pero esto puede causar problemas a los administradores de contraseñas del navegador y a la función autocompletar. Utilice un elemento &lt;form&gt; diferente para cada componente de la interfaz de usuario que necesite un formulario. Por ejemplo, si tiene un inicio de sesión y un espacio de búsqueda en la misma página, debe usar dos elementos de formulario. {% endAside %}
6969

7070
### Utilice `<label>` {: #label }
7171

src/site/content/ja/identity/sign-in-form-best-practices/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ codelabs:
3737
- [各入力に `<label>` タグを付ける](#label)
3838
- 要素の属性を使って、[組み込みのブラウザ機能にアクセスする](#element-attributes) (`type``name``autocomplete``required`)。
3939
- 入力の `name``id` 属性に、ページの読み込みやウェブサイトのデプロイ中に変更されない安定した値を指定する。
40-
- サインインを[独自の &lt;form&gt; 要素に配置する](#single-form)
40+
- サインインを[独自の &lt;form&gt; 要素に配置する](#form)
4141
- [フォームが正常に送信されることを確認する](#submission)
4242
- サインアップフォームのパスワード入力と reset-password フォームの新しいパスワードに、[`autocomplete="new-password"`](#new-password)[`id="new-password"`](#new-password) を使用する。
4343
- サインインパスワードの入力に、[`autocomplete="current-password"`](#current-password)[`id="current-password"`](#current-password) を使用する。
@@ -65,7 +65,7 @@ codelabs:
6565

6666
入力を `<div>` 要素でラップして、送信されてくる入力データを純粋に JavaScript だけで処理しようと考えることがあるかもしれません。多くの場合は、昔ながらの [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) 要素を使用する方がベターでしょう。これにより、スクリーンリーダーや他の支援デバイスがサイトにアクセスできるようになり、ブラウザのさまざまな組み込み機能が有効になり、古いブラウザーに対してベーシックで実用的なサインインを簡単に構築できるようになり、JavaScript が失敗した場合でも機能させることができます。
6767

68-
{: #single-form } {% Aside 'gotchas' %} ウェブページ全体を 1 つのフォームでラップするというミスがよく見られます。これはブラウザーのパスワードマネージャーと自動入力機能にとって問題となる恐れがあります。フォームを必要とする UI コンポーネントごとに別の &lt;form&gt; を使用します。たとえば、同じページにサインイン機能と検索機能がある場合は、2 つのフォーム要素を使用する必要があります。{% endAside %}
68+
{% Aside 'gotchas' %} ウェブページ全体を 1 つのフォームでラップするというミスがよく見られます。これはブラウザーのパスワードマネージャーと自動入力機能にとって問題となる恐れがあります。フォームを必要とする UI コンポーネントごとに別の &lt;form&gt; を使用します。たとえば、同じページにサインイン機能と検索機能がある場合は、2 つのフォーム要素を使用する必要があります。{% endAside %}
6969

7070
### `<label>` を使用する {: #label }
7171

src/site/content/ko/identity/sign-in-form-best-practices/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ codelabs:
3737
- [각 입력에`<label>` 레이블을 지정하십시오](#label).
3838
- 요소 속성을 사용하여 [내장 브라우저 기능(](#element-attributes)`type`, `name`, `autocomplete`, `required`)에 액세스합니다.
3939
- 입력 `name``id` 속성은 페이지 로드나 웹사이트 배포 간에 변하지 않는 안정적인 값을 부여합니다.
40-
- [자체 &lt;form&gt; 요소에](#single-form) 로그인을 넣습니다.
40+
- [자체 &lt;form&gt; 요소에](#form) 로그인을 넣습니다.
4141
- [성공적인 양식 제출을 확인하십시오](#submission) .
4242
- 로그인 양식의 비밀번호 입력과 재설정 비밀번호 형식의 새 비밀번호 입력에는 [`autocomplete="new-password"`](#new-password)[`id="new-password"`](#new-password)를 사용합니다.
4343
- 로그인 비밀번호 입력에 [`autocomplete="current-password"`](#current-password)[`id="current-password"`](#current-password)를 사용합니다.
@@ -65,7 +65,7 @@ codelabs:
6565

6666
`<div>`로 래핑하고 순수 자바스크립트로 입력 데이터 제출을 처리하고 싶을 수 있습니다. [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) 요소를 사용하는 것이 좋습니다. 이렇게 하면 화면 판독기 및 기타 보조 장치에서 사이트에 액세스할 수 있고, 다양한 내장 브라우저 기능이 활성화되고, 이전 브라우저를 위한 기본 기능 로그인을 더 간단하게 구축할 수 있으며, JavaScript가 실패하더라도 계속 작동할 수 있습니다.
6767

68-
{: #single-form } {% Aside 'gotchas' %} 일반적인 실수는 전체 웹페이지를 단일 형식으로 래핑하는 것이지만 이는 브라우저 비밀번호 관리자 및 자동 완성에 문제를 일으킬 수 있습니다. 양식이 필요한 각 UI 구성 요소에 대해 다른 &lt;form&gt;을 사용합니다. 예를 들어 동일한 페이지에서 로그인과 검색이 있는 경우 두 개의 양식 요소를 사용해야 합니다. {% endAside %}
68+
{% Aside 'gotchas' %} 일반적인 실수는 전체 웹페이지를 단일 형식으로 래핑하는 것이지만 이는 브라우저 비밀번호 관리자 및 자동 완성에 문제를 일으킬 수 있습니다. 양식이 필요한 각 UI 구성 요소에 대해 다른 &lt;form&gt;을 사용합니다. 예를 들어 동일한 페이지에서 로그인과 검색이 있는 경우 두 개의 양식 요소를 사용해야 합니다. {% endAside %}
6969

7070
### `<label>` 사용 {: #label }
7171

src/site/content/pt/identity/sign-in-form-best-practices/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Aqui está um exemplo de um formulário de login simples que demonstra todas as
3737
- [Rotule cada entrada com um `<label>`](#label).
3838
- Use atributos de elemento para [acessar os recursos integrados do navegador](#element-attributes) : `type`, `name`, `autocomplete`, `required`.
3939
- Dê ao `name` entrada e aos `id` valores estáveis que não mudam entre carregamentos de página ou implantações de site.
40-
- Coloque o login [em seu próprio elemento &lt;form&gt;](#single-form).
40+
- Coloque o login [em seu próprio elemento &lt;form&gt;](#form).
4141
- [Garanta o envio bem-sucedido do formulário](#submission).
4242
- Use [`autocomplete="new-password"`](#new-password) e [`id="new-password"`](#new-password) para a entrada de senha em um formulário de inscrição e para a nova senha em um formulário de redefinição de senha.
4343
- Use [`autocomplete="current-password"`](#current-password) e [`id="current-password"`](#current-password) para inserir a senha de login.
@@ -65,7 +65,7 @@ Use elementos construídos para o trabalho: `<form>`, `<label>` e `<button>`. Is
6565

6666
Você pode ficar tentado a envolver as entradas em um `<div>` e lidar com o envio de dados de entrada puramente com JavaScript. Geralmente é melhor usar um elemento [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form). Isso torna seu site acessível para leitores de tela e outros dispositivos de assistência, permite uma variedade de recursos integrados do navegador, torna mais simples construir login funcional básico para navegadores mais antigos e ainda pode funcionar mesmo se o JavaScript falhar.
6767

68-
{: # single-form} {% Aside 'gotchas' %} Um erro comum é embrulhar uma página da web inteira em um único formulário, mas isso pode causar problemas para gerenciadores de senhas do navegador e preenchimento automático. Use um &lt;form&gt; diferente para cada componente de IU que precisa de um formulário. Por exemplo, se você fizer login e pesquisar na mesma página, deverá usar dois elementos de formulário. {% endAside %}
68+
{% Aside 'gotchas' %} Um erro comum é embrulhar uma página da web inteira em um único formulário, mas isso pode causar problemas para gerenciadores de senhas do navegador e preenchimento automático. Use um &lt;form&gt; diferente para cada componente de IU que precisa de um formulário. Por exemplo, se você fizer login e pesquisar na mesma página, deverá usar dois elementos de formulário. {% endAside %}
6969

7070
### Use `<label>` {: #label}
7171

src/site/content/ru/identity/sign-in-form-best-practices/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ codelabs:
3737
- [Для каждого поля ввода данных создайте соответствующую подпись `<label>`](#label).
3838
- Для [доступа к встроенным функциям браузера](#element-attributes) используйте атрибуты элементов: `type`, `name`, `autocomplete` и `required`.
3939
- Присвойте атрибутам `name` и `id` стабильные значения, которые не будут изменяться между загрузками страницы или развертываниями веб-сайта.
40-
- Поместите форму входа в систему в [отдельный элемент <form>](#single-form).
40+
- Поместите форму входа в систему в [отдельный элемент <form>](#form).
4141
- [Примите все меры для успешной отправки формы](#submission).
4242
- Для ввода пароля в форме регистрации и для ввода нового пароля в форме сброса пароля используйте параметры [`autocomplete="new-password"`](#new-password) и [`id="new-password"`](#new-password).
4343
- Для ввода пароля при входе в систему используйте параметры [`autocomplete="current-password"`](#current-password) и [`id="current-password"`](#current-password).
@@ -65,7 +65,7 @@ codelabs:
6565

6666
У вас может возникнуть соблазн вложить поля ввода данных в элементы `<div>` и отправлять входные данные исключительно с помощью JavaScript. В общем случае лучше использовать старый простой элемент [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form). Благодаря этому ваш сайт будет доступен для программ чтения с экрана и других устройств, обеспечивающих специальные возможности, вы сможете использовать ряд встроенных функций браузера, вам будет проще создавать базовые функциональные средства для входа в систему для старых браузеров, и это все будет работать даже в случае сбоя JavaScript.
6767

68-
{: #single-form} {% Aside 'gotchas' %} Одна из распространенных ошибок — вложить всю веб-страницу в одну форму; это может привести к проблемам, связанным с диспетчерами паролей и функциями автозаполнения в браузерах. Используйте отдельный элемент <form> для каждого компонента пользовательского интерфейса, для работы которого требуется форма. Например, если на одной странице имеется функция входа в систему и функция поиска, следует использовать два элемента формы. {% endAside %}
68+
{% Aside 'gotchas' %} Одна из распространенных ошибок — вложить всю веб-страницу в одну форму; это может привести к проблемам, связанным с диспетчерами паролей и функциями автозаполнения в браузерах. Используйте отдельный элемент <form> для каждого компонента пользовательского интерфейса, для работы которого требуется форма. Например, если на одной странице имеется функция входа в систему и функция поиска, следует использовать два элемента формы. {% endAside %}
6969

7070
### Используйте элемент `<label>` {: #label }
7171

src/site/content/zh/identity/sign-in-form-best-practices/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ codelabs:
3737
- [使用 `<label>` 标记每个输入](#label)
3838
- 使用元素属性[访问内置浏览器功能](#element-attributes)`type``name``autocomplete``required`
3939
- 为输入 `name``id` 属性提供稳定的值,使其在页面加载或网站部署之间不会改变。
40-
- 将登录[放在它自己的 &lt;form&gt; 元素中](#single-form)
40+
- 将登录[放在它自己的 &lt;form&gt; 元素中](#form)
4141
- [确保成功提交表单](#submission)
4242
-[`autocomplete="new-password"`](#new-password)[`id="new-password"`](#new-password) 用于注册表单中的输入密码,以及重置密码表单中的新密码。
4343
-[`autocomplete="current-password"`](#current-password)[`id="current-password"`](#current-password) 用于登录密码输入。
@@ -65,7 +65,7 @@ codelabs:
6565

6666
您可能想将输入包装在 `<div>` 中并纯粹使用 JavaScript 处理输入数据提交。通常最好使用普通的旧 [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) 元素。这使屏幕阅读器和其他辅助设备可以访问您的站点,启用一系列内置浏览器功能,从而使得为旧浏览器构建基本功能登录变得更简单,并且即使 JavaScript 失败也仍然可以工作。
6767

68-
{: #single-form } {% Aside 'gotchas' %} 一个常见的错误是将整个网页包装在一个表单中,这很容易导致浏览器密码管理器和自动填充出现问题。为每个需要表单的 UI 组件使用不同的 &lt;form&gt;。例如,如果您在同一页面上进行登录和搜索,则应使用两个表单元素。 {% endAside %}
68+
{% Aside 'gotchas' %} 一个常见的错误是将整个网页包装在一个表单中,这很容易导致浏览器密码管理器和自动填充出现问题。为每个需要表单的 UI 组件使用不同的 &lt;form&gt;。例如,如果您在同一页面上进行登录和搜索,则应使用两个表单元素。 {% endAside %}
6969

7070
### 使用`<label>` {: #label }
7171

0 commit comments

Comments
 (0)