From 85c36d462d9d5baf5296be994675f4b1189bff3e Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Wed, 14 Jul 2021 01:23:40 -0400 Subject: fix various fixable flaws in Learn tree (ru) (#1429) * fix various fixable flaws in Learn tree (ru) * Update index.html * Update index.html * removed error-chrome-win7.png * error-opera-macos.png Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> --- .../basic_native_form_controls/all-buttons.png | Bin 0 -> 10974 bytes .../basic_native_form_controls/all-checkbox.png | Bin 0 -> 5722 bytes .../basic_native_form_controls/all-datalist.png | Bin 0 -> 11460 bytes .../all-multi-lines-select.png | Bin 0 -> 29071 bytes .../all-multi-lines-text-field.png | Bin 0 -> 14295 bytes .../forms/basic_native_form_controls/all-radio.png | Bin 0 -> 6173 bytes .../all-search-field.png | Bin 0 -> 10796 bytes .../basic_native_form_controls/all-select.png | Bin 0 -> 29525 bytes .../all-single-line-text-field.png | Bin 0 -> 9586 bytes .../datalist-firefox-macos.png | Bin 0 -> 4135 bytes .../basic_native_form_controls/datalist-safari.png | Bin 0 -> 3159 bytes .../basic_native_form_controls/email-invalid.png | Bin 0 -> 5862 bytes .../forms/basic_native_form_controls/index.html | 68 ++++++++++----------- .../sending_and_retrieving_form_data/index.html | 40 ++++++------ 14 files changed, 54 insertions(+), 54 deletions(-) create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-buttons.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-checkbox.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-datalist.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-radio.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-search-field.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-select.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/datalist-safari.png create mode 100644 files/ru/learn/forms/basic_native_form_controls/email-invalid.png (limited to 'files/ru/learn/forms') diff --git a/files/ru/learn/forms/basic_native_form_controls/all-buttons.png b/files/ru/learn/forms/basic_native_form_controls/all-buttons.png new file mode 100644 index 0000000000..1f43c4f1fb Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-buttons.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png b/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png new file mode 100644 index 0000000000..2769f0594d Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-checkbox.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-datalist.png b/files/ru/learn/forms/basic_native_form_controls/all-datalist.png new file mode 100644 index 0000000000..f89c3e1eb9 Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-datalist.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png new file mode 100644 index 0000000000..bae88512cb Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-select.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png new file mode 100644 index 0000000000..6c6bc1862f Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-multi-lines-text-field.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-radio.png b/files/ru/learn/forms/basic_native_form_controls/all-radio.png new file mode 100644 index 0000000000..e5a36ca200 Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-radio.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-search-field.png b/files/ru/learn/forms/basic_native_form_controls/all-search-field.png new file mode 100644 index 0000000000..83e4c0ff3a Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-search-field.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-select.png b/files/ru/learn/forms/basic_native_form_controls/all-select.png new file mode 100644 index 0000000000..fde1fbf68b Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-select.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png b/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png new file mode 100644 index 0000000000..84cccbee6a Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/all-single-line-text-field.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png b/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png new file mode 100644 index 0000000000..4e7466691e Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/datalist-firefox-macos.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png b/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png new file mode 100644 index 0000000000..c1c6e68cd3 Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/datalist-safari.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/email-invalid.png b/files/ru/learn/forms/basic_native_form_controls/email-invalid.png new file mode 100644 index 0000000000..25ab5fcacd Binary files /dev/null and b/files/ru/learn/forms/basic_native_form_controls/email-invalid.png differ diff --git a/files/ru/learn/forms/basic_native_form_controls/index.html b/files/ru/learn/forms/basic_native_form_controls/index.html index 996ff8bede..7da1a16864 100644 --- a/files/ru/learn/forms/basic_native_form_controls/index.html +++ b/files/ru/learn/forms/basic_native_form_controls/index.html @@ -23,10 +23,10 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм -

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

+

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

-

Note: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к HTML forms element reference, и в частости к нашей обширной ссылке <input> types.

+

Note: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к HTML forms element reference, и в частости к нашей обширной ссылке <input> types.

Стандартные атрибуты

@@ -75,7 +75,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

Текстовые поля {{htmlelement("input")}}  являются самыми базовыми виджетами форм. Эти поля наиболее удобны для пользовательского ввода различной информации. Однако, некоторые текстовые поля отличаются от данного и используются для специфических нужд. Мы уже видели несколько простых примеров.

-

Note: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

+

Note: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

Все текстовые поля имеют общие атрибуты:

@@ -83,8 +83,8 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
@@ -105,7 +105,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

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

-

Screenshots of single line text fields on several platforms.

+

Screenshots of single line text fields on several platforms.

HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.

@@ -117,14 +117,14 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

Когда используется этот type, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:

-

An invalid email input showing the message Please enter an email address.

+

An invalid email input showing the message Please enter an email address.

It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.

On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.

-

Note: You can find out more about form validation in the article Form data validation.

+

Note: You can find out more about form validation in the article Form data validation.

Password field

@@ -147,7 +147,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.

-

Screenshots of search fields on several platforms.

+

Screenshots of search fields on several platforms.

Phone number field

@@ -168,7 +168,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
Note: Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.
-

Note: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

+

Note: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

Multi-line text fields

@@ -179,7 +179,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).

-

Screenshots of multi-lines text fields on several platforms.

+

Screenshots of multi-lines text fields on several platforms.

Note: You can find an example of a multi-line text field on GitHub at multi-line-text-field.html (see it live also). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to none using CSS.

@@ -257,7 +257,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм   </optgroup> </select> -

Screenshots of single line select box on several platforms.

+

Screenshots of single line select box on several platforms.

If an {{HTMLElement("option")}} element is set with a value attribute, that attribute's value is sent when the form is submitted. If the value attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.

@@ -275,7 +275,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <option>Lemon</option> </select> -

Screenshots of multi-lines select box on several platforms.

+

Screenshots of multi-lines select box on several platforms.

Note: All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.
@@ -300,9 +300,9 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм   <option>Pear</option> </datalist> -
Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
+
Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
-
Screenshots of datalist on several platforms.
+
Screenshots of datalist on several platforms.
@@ -336,11 +336,11 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм Safari 6 - Screenshot of the datalist element fallback with Safari on Mac OS + Screenshot of the datalist element fallback with Safari on Mac OS Firefox 18 - Screenshot of the datalist element with Firefox on Mac OS + Screenshot of the datalist element with Firefox on Mac OS @@ -368,7 +368,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм

Including the checked attribute makes the checkbox checked automatically when the page loads.

-

Screenshots of check boxes on several platforms.

+

Screenshots of check boxes on several platforms.

Radio button

@@ -396,7 +396,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм   </ul> </fieldset> -

Screenshots of radio buttons on several platforms.

+

Screenshots of radio buttons on several platforms.

Buttons

@@ -448,7 +448,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
  • With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a value attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.
    • -

    Screenshots of buttons on several platforms.

    +

    Screenshots of buttons on several platforms.

    Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.

    @@ -569,7 +569,7 @@ beans.oninput = function() {

    File picker

    -

    HTML forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

    +

    HTML forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

    To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to file. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.

    @@ -606,7 +606,7 @@ beans.oninput = function() { 
    http://foo.com?pos.x=123&pos.y=456
    -

    This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.

    +

    This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.

    Meters and progress bars

    @@ -669,7 +669,7 @@ beans.oninput = function() {

    {{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

    @@ -677,15 +677,15 @@ beans.oninput = function() {

    In this module

    diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html index 155242dff0..d152e456b0 100644 --- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html @@ -12,7 +12,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн Предварительные знания: - Базовая компьютерная грамотность, понимание HTML и базовые знания по HTTP и программированию на стороне сервера. + Базовая компьютерная грамотность, понимание HTML и базовые знания по HTTP и программированию на стороне сервера. Задача: @@ -27,7 +27,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн

    О клиентской/серверной архитектуре

    -

    WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.A basic schema of the Web client/server architecture

    +

    WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.A basic schema of the Web client/server architecture

    На стороне клиента HTML-форма - это не более чем удобный способ настройки HTTP-запроса для отправки данных на сервер. Это позволяет пользователю предоставлять информацию для доставки в HTTP-запросе .

    @@ -65,7 +65,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн

    Атрибут {{htmlattrxref("method","form")}}

    -

    Этот атрибут определяет способ отправки данных. Протокол HTTP предоставляет несколько способов выполнить запрос;  Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод GET и метод POST.

    +

    Этот атрибут определяет способ отправки данных. Протокол HTTP предоставляет несколько способов выполнить запрос;  Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод GET и метод POST.

    Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.

    @@ -91,7 +91,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн

    Поскольку используется метод GET, вы увидите URL www.foo.com/?say=Hi&to=Mom, который появится в адресной строке браузера при отправке формы.

    -

    Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (?), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (&). В этом случае мы передаём две части данных на сервер:

    +

    Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (?), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (&). В этом случае мы передаём две части данных на сервер:

    • say, со значением Hi
      • @@ -156,7 +156,7 @@ say=Hi&to=Mom

      Затем вы можете получить данные формы, как показано на рисунке ниже.

      -

      +

      Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

      @@ -184,7 +184,7 @@ say=Hi&to=Mom

      Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: php-example.html — который содержит те же данные, которые вы видели раньше:  method : post и action из php-example.php. Когда данные переданы на отправку (submit), они переданы в форму php-example.php, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение: Hi Mom.

      -

      +

      Примечание: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать MAMP (Mac and Windows) и/или AMPPS (Mac, Windows, Linux).

      @@ -217,7 +217,7 @@ if __name__ == "__main__":
    -

    Примечание: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно установить Python/PIP, потом установить Flask используя команду: pip3 install flask. После этого, вы сможете запустить файл из примера, используя команду: python3 python-example.py, потом открыть localhost:5000 в своём браузере.

    +

    Примечание: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно установить Python/PIP, потом установить Flask используя команду: pip3 install flask. После этого, вы сможете запустить файл из примера, используя команду: python3 python-example.py, потом открыть localhost:5000 в своём браузере.

    Другие языки и фреймворки

    @@ -251,7 +251,7 @@ if __name__ == "__main__":
    • Указать {{htmlattrxref("method","form")}} атрибут POST, поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.
    • Установить в {{htmlattrxref("enctype","form")}} значение multipart/form-data, потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).
      • -
    • Подключите один или более File picker виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.
      • +
    • Подключите один или более File picker виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.

    Пример:

    @@ -322,7 +322,7 @@ if __name__ == "__main__":

    Заключение

    -

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

    +

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

    Смотрите также

    @@ -339,15 +339,15 @@ if __name__ == "__main__":

    В этом модуле

    -- cgit v1.2.3-54-g00ecf