You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/4-forms-controls/1-form-elements/article.md
+22-28Lines changed: 22 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,25 +1,21 @@
1
1
# Form özellikleri ve metodları
2
2
3
-
Formlar ve kontrol elemanları, `<input>` gibi, birçok özel özellik ve işlemlere sahiptir.
3
+
Formlar ve kontrol elemanları, `<input>` gibi, birçok özel işleme ve özelliklere sahiptir.
4
4
5
-
Fromları öğrendiğimizde, onlarla çalışmak çok daha kolay olacaktır.
6
-
7
-
Forms and control elements, such as `<input>` have a lot of special properties and events.
5
+
Fromları öğrendiğimizde, onlarla çalışmak çok daha kolay olacak.
8
6
9
7
## Navigasyon: form and elemanlar
10
8
11
-
Form dökümanları özel bir koleksiyon üyesidir `document.forms`.
12
-
13
-
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.
9
+
Form dökümanları özel bir dizi olan `document.forms` üyleridir.
14
10
15
-
Bu"adlandırılmış koleksiyon" olarak isimlendirilerler: hem adlandırılmış hem de sıralanmıştır. Forma ulaşmak için formun adını ya da numarasını kullanabiliriz.
11
+
Bu, bir "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.
16
12
17
13
```js no-beautify
18
-
document.forms.my-"my" isimli form
19
-
document.forms[0]- döküman içindeki ilk form
14
+
document.forms.my; // "my" isimli form
15
+
document.forms[0]; // döküman içindeki ilk form
20
16
```
21
17
22
-
Yeni bir form oluşturulduğunda içerisindeki bütün elemanlar `form.elements` isimli koleksiyonda erişilebilir hale gelir.
18
+
Yeni bir form oluşturulduğunda içerisindeki bütün elemanlar `form.elements` isimli adlandırılmış koleksiyonda erişilebilir haldedir.
23
19
24
20
Örneğin:
25
21
@@ -62,8 +58,7 @@ Bu durumda `form.elements[name]` bir koleksiyondur, örneğin:
62
58
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.
63
59
64
60
````smart header=""Alt formlar" olarak alan kümeleri"
65
-
Bir form bir veya birden fazla `<fieldset>` elemanına sahip olabilir.
66
-
. Bunlar ayrıca `elements` özelliklerine sahiptirler
61
+
Bir form bir veya birden fazla `<fieldset>` elemanına sahip olabilir. Bunlar ayrıca `elements` özelliklerine sahiptirler.
67
62
68
63
Örneğin:
69
64
@@ -83,20 +78,20 @@ Bir form bir veya birden fazla `<fieldset>` elemanına sahip olabilir.
83
78
let fieldset = form.elements.userFields;
84
79
alert(fieldset); // HTMLFieldSetElement
85
80
86
-
// input elemanına form ve fieldset koleksiyonlarından ulaşabiliriz.
// input elemanına hem form hemde fieldset kullanarak ulaşabiliriz.
82
+
alert(fieldset.elements.login == form.elements.login); // doğru
88
83
*/!*
89
84
</script>
90
85
</body>
91
86
```
92
87
````
93
88
94
89
````warn header="Kısa gösterimi: `form.name`"
95
-
Daha kısa bir gösterimi mevcut: `form[index/name]` ile bu elamana ulaşabiliriz.
90
+
Daha kısa bir gösterim mevcut: `form[index/name]` ile bu elamana ulaşabiliriz.
96
91
97
92
`form.elements.login` yerine `form.login` yazabiliriz.
98
93
99
-
Bu da çalışır fakat, burada ufak bir problem var:eğer bir elamana ulaşırsak ve daha sonra ismini(`name`) değiştirirsek bu eleman eski ismiyle hala erişilebilr durumdadır.(aynı zamanda yeni ismiylede erişeliebilir).
94
+
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).
100
95
101
96
Aşağıdaki örnekte bunu kolaylıkla görebiliriz:
102
97
@@ -121,7 +116,7 @@ Aşağıdaki örnekte bunu kolaylıkla görebiliriz:
121
116
</script>
122
117
```
123
118
124
-
Bu durum genelde bir sorun oluşturmaz çünkü, form elemanların ismini genellikle değiştirmeyiz.
119
+
Bu durum genelde bir sorun oluşturmaz çünkü, form elemanların ismini hemen hemen hiç değiştirmeyiz.
125
120
126
121
````
127
122
@@ -155,8 +150,7 @@ Konuyu görselleştirmek için bir resim:
155
150
156
151
## Form elemanları
157
152
158
-
Birazda form kontrol elemanlarından bahsedelim, özelliklerine dikkat et.
159
-
Let's talk about form controls, pay attention to their specific features.
153
+
Birazda form kontrol elemanlarından bahsedelim, özelliklerine dikkat etmelisin.
160
154
161
155
### input ve textarea
162
156
@@ -169,10 +163,10 @@ Bunun gibi:
169
163
input.value = "Yeni değer";
170
164
textarea.value = "Yeni metin";
171
165
172
-
input.checked = doğru; // checkbox veya radio button tipleri için
166
+
input.checked = true; // checkbox veya radio button tipleri için
173
167
```
174
168
175
-
```warn header=" `textarea.innerHTML` yerine `textarea.value` kullan"
169
+
```warn header=" `textarea.innerHTML` yerine `textarea.value` kullanmalısın"
176
170
177
171
Lütfen şunu unutma, <textarea>...</textarea> 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.
178
172
@@ -182,15 +176,15 @@ Lütfen şunu unutma, <textarea>...</textarea> içeriğini iç içe geçmiş HTM
182
176
183
177
A `<select>` 3 önemli özelliği vardır:
184
178
185
-
1. `select.options` -- `<option>` elemanlarından oluşan bir koleksiyon,
179
+
1. `select.options` -- `<option>` elemanlarından oluşan bir dizi,
186
180
2. `select.value` -- halihazırda seçilmiş olan seçeneğin değeri,
187
181
3. `select.selectedIndex` -- halihazırda seçilmiş olan seçeneğin dizin numarası.
188
182
189
183
`<select>` elemanınına değer atamak için üç farklı yol mevcut:
190
184
191
185
192
186
1. Gerekli olan `<option>` seçeneğini bul ve `option.selected` değerini `true` olarak ayarla.
İlk seçenek en bariz olan fakat `(2)` ve `(3)` daha uygun.
@@ -213,7 +207,7 @@ A `<select>` 3 önemli özelliği vardır:
213
207
</script>
214
208
```
215
209
216
-
Diğer çoğu kontrolün aksine, <select multiple> çoklu seçime izin verir. Bu durumda, tüm seçilmiş değerleri almak için `select.options` üzerinde dizi metodları ile işlem yapmamız gerekir.
210
+
Diğer çoğu kontrolün aksine, <select multiple> çoklu seçime izin verir. Bu durumda, tüm seçilmiş değerlere ulaşmak için `select.options` üzerinde dizi metodları ile işlem yapmamız gerekir.
217
211
218
212
Şu şekilde:
219
213
@@ -225,7 +219,7 @@ Diğer çoğu kontrolün aksine, <select multiple> çoklu seçime izin verir. Bu
225
219
</select>
226
220
227
221
<script>
228
-
// multi-select ile seçilmiş bütün seçekneleri döndürme
222
+
// multi-select ile seçilmiş bütün seçeknelere ulaşma
229
223
let selected = Array.from(select.options)
230
224
.filter(option => option.selected)
231
225
.map(option => option.value);
@@ -266,7 +260,7 @@ Aynı eleman seçildi:
266
260
let option = new Option("Text", "value", true, true);
<select> için değeri ayrıca dizin numarasıyla select.selectedIndex veya seçenekler koleksiyonu select.options üzerinden alabiliriz. Bu ve diğer öğelerin tam belgesi belgede bulunabilir <https://html.spec.whatwg.org/multipage/forms.html>.
295
+
<select> için değeri ayrıca dizin numarasıyla select.selectedIndex veya seçenekler diziu select.options üzerinden alabiliriz. Bu ve diğer öğelerin tam belgesi belgede bulunabilir <https://html.spec.whatwg.org/multipage/forms.html>.
302
296
303
297
Bu bilgiler formlar ile çalışmak için temel bilgiler.Eğitimin ilerleyen bölümlerinde birçok örnekle karşılaşacağız. Bir sonraki bölümde, herhangi bir öğe üzerinde oluşabilecek, ancak çoğunlukla formlar üzerinde işlenen `focus` ve `blur` olaylarını ele alacağız.
0 commit comments