diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md index 781ce5d58..a6fab5291 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md +++ b/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 `
` that covers the whole window, like this: +Uma janela de modal pode ser implementada usando um elemento semitransparente `
` que cobre toda a janela, como por exemplo: ```css #cover-div { @@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `
} ``` -Because the `
` covers everything, it gets all clicks, not the page below it. +Por conta da `
` cobrir todo o espaço, irá capturar todos os cliques feito dentro nela, e não na página abaixo dela. -Also we can prevent page scroll by setting `body.style.overflowY='hidden'`. +Também podemos impedir a rolagem da página definindo `body.style.overflowY='hidden'`. -The form should be not in the `
`, but next to it, because we don't want it to have `opacity`. +O formulário não deve estar dentro da `
`, mas sim ao lado dela, porque não queremos que ele tenha `opacity`. diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index bf6841c92..eb66f4382 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -2,23 +2,23 @@ importance: 5 --- -# Modal form +# Formuário modal -Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`. +Crie uma função `showPrompt(html, callback)` onde mostra um formulário com uma mensagem `html`, um campo de entrada e botões `OK/CANCEL`. -- 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. +- Um usuário deve esprever algo dentro do campo de texto e pressionar `key:Enter` ou o botão de OK button, então é chamado o `callback(value)` com o valor que foi inserido. +- Porém, se o usuário pressionar `key:Esc` ou CANCEL, então `callback(null)` é chamado. -In both cases that ends the input process and removes the form. +Em ambos os casos, isso encerra o processo de entrada e remove o formulário. -Requirements: +Requisitos: -- 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 `` 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. +- O formulário deve estar no centro da janela. +- O formulário é um *modal*. Em outras palavras, não será possível interagir com o restante da página até que o usuário a feche. +- Quando o formulário for exibido, o foco do usuário deverá estar dentro do campo ``. +- As teclas `key:Tab`/`key:Shift+Tab` devem alternar o foco entre os campos do formulário, não permitindo que o foco saia para outros elementos da página. -Usage example: +Exemplo de uso: ```js showPrompt("Enter something
...smart :)", function(value) { @@ -26,8 +26,8 @@ showPrompt("Enter something
...smart :)", function(value) { }); ``` -A demo in the iframe: +Uma demonstração dentro de um 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. +Obs: O documento de origem contém HTML/CSS para o formulário com posicionamento fixo, mas cabe a você torná-lo um modal. diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index c00c559c0..a298985c5 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -1,39 +1,39 @@ -# Forms: event and method submit +# Formulários: evento e método 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. +O evento `submit` é disparado quando o formulário é submetido. Geralmente, é usado para validar o formulário antes de enviá-lo ao servidor ou para abortar o envio e processá-lo no 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. +O método `form.submit()` permite iniciar o envio de formulários a partir do JavaScript. Podemos usá-lo para criar e enviar dinamicamente nossos próprios formulários para o servidor. -Let's see more details of them. +Vamos ver mais detalhes sobre eles. -## Event: submit +## Evento: submit -There are two main ways to submit a form: +Há duas maneiras principais de enviar um formulário: -1. The first -- to click `` or ``. -2. The second -- press `key:Enter` on an input field. +1. A Primeira -- clicar em `` ou ``. +2. A Segunda -- pressione `key:Enter` em um campo de input. -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. +Ambas as ações levam a execução do evento `submit` no formulário. O handler pode verificar os dados, e se houver erros, será mostrado e chamado o `event.preventDefault()`, logo, o formulário não será enviado para o servidor. -In the form below: -1. Go into the text field and press `key:Enter`. -2. Click ``. +No formulário abaixo: +1. Vá para o campo de texto e pressione `key:Enter`. +2. Clique em ``. -Both actions show `alert` and the form is not sent anywhere due to `return false`: +Ambas as ações mostram um `alert` e o formulário não é enviado a lugar nenhum devido ao `return false`: ```html autorun height=60 no-beautify
- First: Enter in the input field
- Second: Click "submit": + Primeiro: Insira no campo de entrada
+ Segundo: Clique em "submit":
``` -````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 ``. +````smart header="Relação entre `submit` e `click`" +Quando um formulário é enviado usando `key:Enter` no campo de entrada, um evento de `click` dispara no ``. -That's rather funny, because there was no click at all. +Isso é até bem engraçado, porque não houve nenhum clique. -Here's the demo: +Aqui está uma demonstração: ```html autorun height=60
@@ -43,13 +43,13 @@ Here's the demo: ```` -## Method: submit +## Método: submit -To submit a form to the server manually, we can call `form.submit()`. +Para enviar um formulário ao servidor manualmente, podemos chamar `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. +Nesse caso, o evento `submit` não é gerado. Podemos presumir que, se o programador chamar `form.submit()`, o script já terá realizado todo o processamento relacionado. -Sometimes that's used to manually create and send a form, like this: +Às vezes, isso é usado para criar e enviar um formulário manualmente, como este: ```js run let form = document.createElement('form'); @@ -58,7 +58,7 @@ form.method = 'GET'; form.innerHTML = ''; -// the form must be in the document to submit it +// o formulário deve estar incluído no documento para que ele seja enviado. document.body.append(form); form.submit();