From a8373c3da64b91db616a113685fb77b85336cf59 Mon Sep 17 00:00:00 2001 From: Otoniel Reyes Galay Date: Mon, 19 Oct 2020 23:54:23 -0400 Subject: [PATCH 01/21] Form elements traducido --- .../1-form-elements/article.md | 172 +++++++++--------- 1 file changed, 86 insertions(+), 86 deletions(-) diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index 01af1f400..9d2574dca 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -1,23 +1,23 @@ -# Form properties and methods +# Propiedades y Métodos de Formularios -Forms and control elements, such as `` have a lot of special properties and events. +Los formularios y controles, como `` Tienen muchos eventos y propiedades especiales. -Working with forms will be much more convenient when we learn them. +Trabajar con formularios será mucho más conveniente cuando los aprendamos. -## Navigation: form and elements +## Navegación: Formularios y elementos -Document forms are members of the special collection `document.forms`. +Los formularios del documento son miembros de la colección especial `document.forms`. -That's a so-called "named collection": it's both named and ordered. We can use both the name or the number in the document to get the form. +Esa es la llamada "Colección nombrada": es ambas cosas, nombrada y ordenada. Podemos usar el nombre o el número en el documento para conseguir el formulario. ```js no-beautify -document.forms.my - the form with name="my" -document.forms[0] - the first form in the document +document.forms.my - el formulario con name="my" +document.forms[0] - el primar formulario en el documento ``` -When we have a form, then any element is available in the named collection `form.elements`. +Cuando tenemos un formulario, cualquier elemento se encuentra disponible en la colección nombrada `form.elements`. -For instance: +Por ejemplo: ```html run height=40
@@ -26,19 +26,19 @@ For instance:
``` -There may be multiple elements with the same name, that's often the case with radio buttons. +Pueden haber múltiples elementos con el mismo nombre, tal es el caso de los controles tipo radio. -In that case `form.elements[name]` is a collection, for instance: +En ese caso `form.elements[name]` es una colección, por ejemplo: ```html run height=40
@@ -57,13 +57,13 @@ alert(ageElems[0]); // [object HTMLInputElement] ``` -These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in `form.elements`. +Estas propiedades de navegación no dependen de la estructura de las etiquetas. Todos los controles, sin importar qué tan profundos se encuentren en el formulario, están disponibles `form.elements`. -````smart header="Fieldsets as \"subforms\"" -A form may have one or many `
` elements inside it. They also have `elements` property that lists form controls inside them. +````smart header="Fieldsets como \"sub-formularios\"" +Un formulario puede tener uno o varios elementos `
` dentro. Estos también tienen la propiedad `elements` que enlista los controles del formulario dentro de ellos. -For instance: +Por ejemplo: ```html run height=80 @@ -81,7 +81,7 @@ For instance: let fieldset = form.elements.userFields; alert(fieldset); // HTMLFieldSetElement - // we can get the input by name both from the form and from the fieldset + // podemos obtener el input por su nombre tanto desde el formulario como desde el fieldset alert(fieldset.elements.login == form.elements.login); // true */!* @@ -89,14 +89,14 @@ For instance: ``` ```` -````warn header="Shorter notation: `form.name`" -There's a shorter notation: we can access the element as `form[index/name]`. +````warn header="Notación corta: `form.name`" +Hay una notación corta: podemos acceder el elemento como `form[index/name]`. -In other words, instead of `form.elements.login` we can write `form.login`. +En otras palabras, en lugar de `form.elements.login` podemos escribir `form.login`. -That also works, but there's a minor issue: if we access an element, and then change its `name`, then it is still available under the old name (as well as under the new one). +Esto también funciona, pero tiene un error menor: si accedemos un elemento, y cambiamos su `name`, se mantendrá disponible mediante el nombre anterior (así como mediante el nuevo). -That's easy to see in an example: +Esto es fácil de ver en un ejemplo: ```html run height=40 @@ -104,34 +104,34 @@ That's easy to see in an example: ``` -That's usually not a problem, because we rarely change names of form elements. +Esto usualmente no es un problema, porque raramente se cambian los nombres de los elementos de un formulario. ```` -## Backreference: element.form +## Referencia inversa: element.form -For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form. +Para cualquier elemento, el formulario está disponible como `element.form`. Así que un formulario referencia todos los elementos, y los elementos referencian el formulario. -Here's the picture: +Aquí la imagen: ![](form-navigation.svg) -For instance: +Por ejemplo: ```html run height=40
@@ -149,46 +149,46 @@ For instance: ``` -## Form elements +## Elementos del formulario -Let's talk about form controls. +Hablemos de los controles de los formularios. -### input and textarea +### input y textarea -We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes. +Podemos acceder sus valores como `input.value` (cadena) o `input.checked` (booleano) para casillas de verificación (checkboxes). -Like this: +De esta manera: ```js input.value = "New value"; textarea.value = "New text"; -input.checked = true; // for a checkbox or radio button +input.checked = true; // para checkboxes o radios ``` -```warn header="Use `textarea.value`, not `textarea.innerHTML`" -Please note that even though `` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it. +```warn header="Usa `textarea.value`, no `textarea.innerHTML`" +Observa que incluso aunque `` contenga su valor como HTML anidado, nunca deberíamos usar `textarea.innerHTML` para acceder a él. -It stores only the HTML that was initially on the page, not the current value. +Esto solo guarda el HTML que había inicialmente en la página, no su valor actual. ``` -### select and option +### select y option -A `` tiene 3 propiedades importantes: -1. `select.options` -- the collection of `