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 03118e5c1..d6b5bec02 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -1,67 +1,66 @@ -# Form properties and methods +# Form özellikleri ve metodları -Forms and control elements, such as `` have a lot of special properties and events. +Formlar ve kontrol elemanları, `` gibi, birçok özel işleme ve özelliklere sahiptir. -Working with forms will be much more convenient when we learn them. +From elemanlarını öğrendiğimizde, formlarla çalışmak çok daha kolay olacaktır. -## Navigation: form and elements +## Navigasyon: form ve elemanları -Document forms are members of the special collection `document.forms`. +Form dökümanları özel bir dizi olan `document.forms` üyleridir. -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. +Bu, "adlandırılmış koleksiyon" olarak adlandırılan bir durumdur: hem isimlendirilmiş hem de sıralanmıştır. Belgede forma ulaşmak için hem adı hem de numarasını kullanabiliriz. ```js no-beautify -document.forms.my - the form with name="my" -document.forms[0] - the first form in the document +document.forms.my; // "my" isimli form +document.forms[0]; // döküman içindeki ilk form ``` -When we have a form, then any element is available in the named collection `form.elements`. +Yeni bir form oluşturulduğunda içerisindeki bütün elemanlar `form.elements` isimli adlandırılmış koleksiyonda erişilebilir haldedir. -For instance: +Örneğin: ```html run height=40
- - + +
``` -There may be multiple elements with the same name, that's often the case with radio buttons. +Formlarda aynı isme sahip birden fazla eleman olabilir. Böyle bir durumla daha çok radyo tipindeki input elemanlarında karşılaşırız. -In that case `form.elements[name]` is a collection, for instance: +Bu durumda `form.elements[name]` bir koleksiyon döner, örneğin: ```html run height=40
- - +
``` -These navigation properties do not depend on the tag structure. All elements, no matter how deep they are in the form, are available in `form.elements`. +Bu navigasyon özellikleri etiket yapılarına bağlı değildir. Bütün elemanlar, formun neresinde olursa olsun, `form.elements` koleksiyonu içerisinde bulunur. +````smart header=""Alt formlar" olarak alan kümeleri" +Bir form bir veya birden fazla `
` elemanına sahip olabilir. Bunlar ayrıca `elements` özelliklerine sahiptirler. -````smart header="Fieldsets as \"subforms\"" -A form may have one or many `
` elements inside it. They also support the `elements` property. - -For instance: +Örneğin: ```html run height=80 @@ -79,58 +78,59 @@ For instance: let fieldset = form.elements.userFields; alert(fieldset); // HTMLFieldSetElement - // we can get the input both from the form and from the fieldset - alert(fieldset.elements.login == form.elements.login); // true + // input elemanına hem form hemde fieldset kullanarak ulaşabiliriz. + alert(fieldset.elements.login == form.elements.login); // doğru */!* ``` ```` -````warn header="Shorter notation: `form.name`" -There's a shorter notation: we can access the element as `form[index/name]`. +````warn header="Kısa gösterimi: `form.name`" +Daha kısa bir gösterim mevcut: `form[index/name]` ile bu elamana ulaşabiliriz. -Instead of `form.elements.login` we can write `form.login`. +`form.elements.login` yerine `form.login` yazabiliriz. -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). +Bu da çalışır fakat, burada ufak bir problem var:eğer bir elamana erişirsek ve daha sonra ismini(`name`) değiştirirsek bu eleman eski ismiyle hala erişilebilir durumdadır.(aynı zamanda yeni ismiylede erişeliebilir). -That's easy to see in an example: +Aşağıdaki örnekte bunu kolaylıkla görebiliriz: ```html run height=40
- +
``` -That's usually not a problem, because we rarely change names of form elements. +Bu durum genelde bir sorun oluşturmaz çünkü, form elemanların ismini hemen hemen hiç değiştirmeyiz. ```` -## Backreference: element.form +## Geriye referans: element.form + -For any element, the form is available as `element.form`. So a form references all elements, and elements -reference the form. +Herhangi bir eleman için form, `element.form` olarak erişilebilir. Bu sayede bir form, tüm elemanlara referans eder ve elemanlar da forma referans eder. -Here's the picture: + +Konuyu görselleştirmek için bir resim: ![](form-navigation.svg) -For instance: +Örneğin: ```html run height=40
@@ -139,53 +139,58 @@ For instance: ``` -## Form elements +## Form elemanları + +Birazda form kontrol elemanlarından bahsedelim, özelliklerine dikkat etmelisin. -Let's talk about form controls, pay attention to their specific features. +### input ve textarea -### input and textarea +Tipi checkbox olan elemanların değerlerine `input.value` (metin tipinde) veya `input.checked` (mantıksal tipde) ulaşılabilir. -We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes. -Like this: +Bunun gibi: ```js -input.value = "New value"; -textarea.value = "New text"; +input.value = "Yeni değer"; +textarea.value = "Yeni metin"; -input.checked = true; // for a checkbox or radio button +input.checked = true; // checkbox veya radio button tipleri için ``` -```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`. It stores only the HTML that was initially on the page, not the current value. +```warn header=" `textarea.innerHTML` yerine `textarea.value` kullanmalısın" + +Lütfen şunu unutma, içeriğini iç içe geçmiş HTML olarak saklasa da, asla textarea.innerHTML kullanmamalıyız. Bu sadece sayfa ilk yüklendiğinde olan HTML'i saklar, mevcut değeri değil. + ``` -### select and option +### select ve option -A `` 3 önemli özelliği vardır: -1. `select.options` -- the collection of `