translation of the /2-ui/4-forms-controls/4-forms-submit

Author: Kirill255

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md

@@ -1,4 +1,4 @@
-A modal window can be implemented using a half-transparent `<div id="cover-div">` that covers the whole window, like this:
+Модальное окно может быть реализовано с помощью полупрозрачного `<div id="cover-div">`, который полностью перекрывает всё окно:
 
 ```css
 #cover-div {
@@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `<div id="cover-div">
 }
 ```
 
-Because the `<div>` covers everything, it gets all clicks, not the page below it.
+Так как он перекрывает вообще всё, все клики будет именно по этому `<div>`.
 
-Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.
+Также мы можем предотвратить прокрутку страницы, установив `body.style.overflowY='hidden'`.
 
-The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`.
+Форма должна лежать не в этом `<div>`, а рядом, чтобы не унаследовала полупрозрачность `opacity`.

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md

@@ -2,32 +2,32 @@ importance: 5
 
 ---
 
-# Modal form
+# Модальное диалоговое окно с формой
 
-Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.
+Создайте функцию `showPrompt(html, callback)`, которая выводит форму с `html`-сообщением, полем ввода и кнопками `OK/ОТМЕНА`.
 
-- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered.
-- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called.
+- Пользователь должен ввести что-то в текстовое поле и нажать `key:Enter` или кнопку "OK", после чего должна вызываться функция `callback(value)` со значением поля.
+- Если пользователь нажимает `key:Esc` или кнопку "ОТМЕНА", тогда вызывается `callback(null)`.
 
-In both cases that ends the input process and removes the form.
+В обоих случаях нужно завершить процесс ввода и закрыть диалоговое окно с формой.
 
-Requirements:
+Требования:
 
-- The form should be in the center of the window.
-- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it.
-- When the form is shown, the focus should be inside the `<input>` for the user.
-- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements.
+- Форма должна быть в центре окна.
+- *Модальное окно* -- значит, что никакое взаимодействие с остальной частью страницы невозможно, пока пользователь не закроет его.
+- При показе формы, фокус должен находиться сразу внутри `<input>`.
+- Клавиши `key:Tab`/`key:Shift+Tab` должны переключать фокус между полями формы, не позволяя ему переходить к другим элементам страницы.
 
-Usage example:
+Пример использования:
 
 ```js
-showPrompt("Enter something<br>...smart :)", function(value) {
+showPrompt("Введите что-нибудь<br>...умное :)", function(value) {
   alert(value);
 });
 ```
 
-A demo in the iframe:
+Демо в ифрейме:
 
 [iframe src="solution" height=160 border=1]
 
-P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal.
+P.S. Исходный HTML/CSS для формы с фиксированным позиционированием, но вы должны сделать его модальным.

2-ui/4-forms-controls/4-forms-submit/article.md

@@ -1,64 +1,66 @@
-# Form submission: event and method submit
+# Отправка формы: событие и метод submit
 
-The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.
+При отправке формы срабатывает событие `submit`, это обычно используется для проверки (валидации) формы перед её отправкой на сервер или для предотвращения отправки и обработки её с помощью JavaScript.
 
-The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.
+Метод `form.submit()` позволяет инициировать отправку формы из JavaScript. Мы можем использовать его для динамического создания и отправки наших собственных форм на сервер.
 
-Let's see more details of them.
+Давайте посмотрим на них подробнее.
 
-## Event: submit
+## Событие: submit
 
-There are two main ways to submit a form:
+Есть два основных способа отправить форму:
 
-1. The first -- to click `<input type="submit">` or `<input type="image">`.
-2. The second -- press `key:Enter` on an input field.
+1. Первый -- нажать кнопку `<input type="submit">` или `<input type="image">`.
+2. Второй -- нажать `key:Enter`, находясь на каком-нибудь поле.
 
-Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server.
+Оба действия сгенерируют событие `submit` на форме. Обработчик может проверить данные, и если есть ошибки, показать их и вызвать `event.preventDefault()`, тогда форма не будет отправлена на сервер.
 
-In the form below:
-1. Go into the text field and press `key:Enter`.
-2. Click `<input type="submit">`.
+В примере ниже:
 
-Both actions show `alert` and the form is not sent anywhere due to `return false`:
+1. Перейдите в текстовое поле и нажмите `key:Enter`.
+2. Нажмите `<input type="submit">`.
+
+Оба действия показывают `alert` и форма не отправится благодаря `return false`:
 
 ```html autorun height=60 no-beautify
 <form onsubmit="alert('submit!');return false">
-  First: Enter in the input field <input type="text" value="text"><br>
-  Second: Click "submit": <input type="submit" value="Submit">
+  Первый: Enter в текстовом поле: <input type="text" value="Текст"><br>
+  Второй: Нажмите "Отправить": <input type="submit" value="Отправить">
 </form>
 ```
 
-````smart header="Relation between `submit` and `click`"
-When a form is sent using `key:Enter` on an input field, a `click` event triggers on the `<input type="submit">`.
+````smart header="Взаимосвязь между `submit` и `click`"
+При отправке формы по нажатию `key:Enter` в текстовом поле, генерируется событие `click` на кнопке `<input type="submit">`.
+
+Это довольно забавно, учитывая что никакого клика не было.
 
-That's rather funny, because there was no click at all.
+Пример:
 
-Here's the demo:
 ```html autorun height=60
-<form onsubmit="return false">
- <input type="text" size="30" value="Focus here and press enter">
- <input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
+<form onsubmit="alert('submit!');return false">
+ <input type="text" size="30" value="При нажатии Enter будет click">
+ <input type="submit" value="Отправить" *!*onclick="alert('click!')"*/!*>
 </form>
 ```
 
 ````
 
-## Method: submit
+## Метод: submit
 
-To submit a form to the server manually, we can call `form.submit()`.
+Чтобы отправить форму на сервер вручную, мы можем вызвать метод `form.submit()`.
 
-Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing.
+При этом событие `submit` не генерируется. Предполагается, что если программист вызывает метод `form.submit()`, то он уже выполнил всю соответствующую обработку.
 
-Sometimes that's used to manually create and send a form, like this:
+Иногда это используют для генерации формы и отправки её вручную, например так:
 
 ```js run
 let form = document.createElement('form');
 form.action = 'https://google.com/search';
 form.method = 'GET';
 
-form.innerHTML = '<input name="q" value="test">';
+form.innerHTML = '<input name="q" value="javascript info">';
 
-// the form must be in the document to submit it
+// перед отправкой формы, её нужно вставить в document
 document.body.append(form);
 
 form.submit();