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
Forms and control elements, such as `<input>`have a lot of special properties and events.
3
+
Formlar ve kontrol elemanları, `<input>`gibi, birçok özel işleme ve özelliklere sahiptir.
4
4
5
-
Working with forms will be much more convenient when we learn them.
5
+
Fromları öğrendiğimizde, onlarla çalışmak çok daha kolay olacak.
6
6
7
-
## Navigation: form and elements
7
+
## Navigasyon: form and elemanlar
8
8
9
-
Document forms are members of the special collection `document.forms`.
9
+
Form dökümanları özel bir dizi olan `document.forms` üyleridir.
10
10
11
-
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.
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.
12
12
13
13
```js no-beautify
14
-
document.forms.my- the form with name="my"
15
-
document.forms[0]- the first form in the document
14
+
document.forms.my; //"my" isimli form
15
+
document.forms[0]; // döküman içindeki ilk form
16
16
```
17
17
18
-
When we have a form, then any element is available in the named collection `form.elements`.
18
+
Yeni bir form oluşturulduğunda içerisindeki bütün elemanlar `form.elements` isimli adlandırılmış koleksiyonda erişilebilir haldedir.
19
19
20
-
For instance:
20
+
Örneğin:
21
21
22
22
```html run height=40
23
23
<formname="my">
24
-
<inputname="one"value="1">
25
-
<inputname="two"value="2">
24
+
<inputname="one"value="1" />
25
+
<inputname="two"value="2" />
26
26
</form>
27
27
28
28
<script>
29
-
//get the form
30
-
let form =document.forms.my; // <form name="my"> element
29
+
//forma ulaşmak için
30
+
let form =document.forms.my; // <form name="my"> form elemanı
31
31
32
-
//get the element
33
-
let elem =form.elements.one; // <input name="one"> element
32
+
//form elemanına ulaşmak için
33
+
let elem =form.elements.one; // <input name="one"> input elemanı
34
34
35
35
alert(elem.value); // 1
36
36
</script>
37
37
```
38
38
39
-
There may be multiple elements with the same name, that's often the case with radio buttons.
39
+
Formlarda aynı isme sahip birden fazla eleman olabilir. Böyle bir durumla daha çok radyo tipindeki input elemanlarında karşılaşırız.
40
40
41
-
In that case `form.elements[name]`is a collection, for instance:
41
+
Bu durumda `form.elements[name]`bir koleksiyondur, örneğin:
alert(ageElems[0].value); // 10, the first input value
54
+
alert(ageElems[0].value); // 10, ilk input değeri
55
55
</script>
56
56
```
57
57
58
-
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`.
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.
59
59
60
+
````smart header=""Alt formlar" olarak alan kümeleri"
61
+
Bir form bir veya birden fazla `<fieldset>` elemanına sahip olabilir. Bunlar ayrıca `elements` özelliklerine sahiptirler.
60
62
61
-
````smart header="Fieldsets as \"subforms\""
62
-
A form may have one or many `<fieldset>` elements inside it. They also support the `elements` property.
63
-
64
-
For instance:
63
+
Örneğin:
65
64
66
65
```html run height=80
67
66
<body>
@@ -79,58 +78,59 @@ For instance:
79
78
let fieldset = form.elements.userFields;
80
79
alert(fieldset); // HTMLFieldSetElement
81
80
82
-
// we can get the input both from the form and from the fieldset
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).
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).
96
95
97
-
That's easy to see in an example:
96
+
Aşağıdaki örnekte bunu kolaylıkla görebiliriz:
98
97
99
98
```html run height=40
100
99
<formid="form">
101
-
<inputname="login">
100
+
<inputname="login" />
102
101
</form>
103
102
104
103
<script>
105
-
alert(form.elements.login==form.login); //true, the same <input>
104
+
alert(form.elements.login==form.login); //doğru, aynı <input>
106
105
107
-
form.login.name="username"; //change the name of the input
106
+
form.login.name="username"; //input'un ismini değiştir
108
107
109
-
// form.elements updated the name:
110
-
alert(form.elements.login); //undefined
111
-
alert(form.elements.username); // input
108
+
// form.elements isim etiketini güncelledi:
109
+
alert(form.elements.login); //tanımsız
110
+
alert(form.elements.username); // input
112
111
113
-
*!*
114
-
//the direct access now can use both names: the new one and the old one
115
-
alert(form.username==form.login); //true
116
-
*/!*
112
+
*!*
113
+
//doğrudan erişim için iki isimde kullanılabilir: yeni isim ve eski isim
114
+
alert(form.username==form.login); //doğru
115
+
*/!*
117
116
</script>
118
117
```
119
118
120
-
That's usually not a problem, because we rarely change names of form elements.
119
+
Bu durum genelde bir sorun oluşturmaz çünkü, form elemanların ismini hemen hemen hiç değiştirmeyiz.
121
120
122
121
````
123
122
124
-
## Backreference: element.form
123
+
## Geriye referans: element.form
124
+
125
125
126
-
For any element, the form is available as `element.form`. So a form references all elements, and elements
127
-
reference the form.
126
+
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.
128
127
129
-
Here's the picture:
128
+
129
+
Konuyu görselleştirmek için bir resim:
130
130
131
131
132
132
133
-
For instance:
133
+
Örneğin:
134
134
135
135
```html run height=40
136
136
<form id="form">
@@ -139,53 +139,58 @@ For instance:
139
139
140
140
<script>
141
141
*!*
142
-
// form -> element
142
+
// form -> eleman
143
143
let login = form.login;
144
144
145
-
// element -> form
145
+
// eleman -> form
146
146
alert(login.form); // HTMLFormElement
147
147
*/!*
148
148
</script>
149
149
```
150
150
151
-
## Form elements
151
+
## Form elemanları
152
+
153
+
Birazda form kontrol elemanlarından bahsedelim, özelliklerine dikkat etmelisin.
152
154
153
-
Let's talk about form controls, pay attention to their specific features.
155
+
### input ve textarea
154
156
155
-
### input and textarea
157
+
Tipi checkbox olan elemanların değerlerine `input.value` (metin tipinde) veya `input.checked` (mantıksal tipde) ulaşılabilir.
156
158
157
-
We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes.
158
159
159
-
Like this:
160
+
Bunun gibi:
160
161
161
162
```js
162
-
input.value = "New value";
163
-
textarea.value = "New text";
163
+
input.value = "Yeni değer";
164
+
textarea.value = "Yeni metin";
164
165
165
-
input.checked = true; // for a checkbox or radio button
166
+
input.checked = true; // checkbox veya radio button tipleri için
166
167
```
167
168
168
-
```warn header="Use `textarea.value`, not `textarea.innerHTML`"
169
-
Please note that even though `<textarea>...</textarea>` 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.
169
+
```warn header=" `textarea.innerHTML` yerine `textarea.value` kullanmalısın"
170
+
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.
172
+
170
173
```
171
174
172
-
### select and option
175
+
### select ve option
173
176
174
-
A `<select>` element has 3 important properties:
177
+
A `<select>` 3 önemli özelliği vardır:
175
178
176
-
1. `select.options` -- the collection of `<option>` elements,
177
-
2. `select.value` -- the value of the currently selected option,
178
-
3. `select.selectedIndex` -- the number of the currently selected option.
179
+
1. `select.options` -- `<option>` elemanlarından oluşan bir dizi,
180
+
2. `select.value` -- halihazırda seçilmiş olan seçeneğin değeri,
181
+
3. `select.selectedIndex` -- halihazırda seçilmiş olan seçeneğin dizin numarası.
179
182
180
-
So we have three ways to set the value of a `<select>`:
183
+
`<select>` elemanınına değer atamak için üç farklı yol mevcut:
181
184
182
-
1. Find the needed `<option>` and set `option.selected` to `true`.
183
-
2. Set `select.value` to the value.
184
-
3. Set `select.selectedIndex` to the number of the option.
185
185
186
-
The first way is the most obvious, but `(2)` and `(3)` are usually more convenient.
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.
191
+
192
+
193
+
İşte bir örnek:
189
194
190
195
```html run
191
196
<select id="select">
@@ -195,16 +200,16 @@ Here is an example:
195
200
</select>
196
201
197
202
<script>
198
-
// all three lines do the same thing
203
+
// üç satırda aynı işi yapıyor
199
204
select.options[2].selected = true;
200
205
select.selectedIndex = 2;
201
206
select.value = 'banana';
202
207
</script>
203
208
```
204
209
205
-
Unlike most other controls, `<select multiple>` allows multiple choice. In that case we need to walk over `select.options` to get all selected values.
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.
206
211
207
-
Like this:
212
+
Şu şekilde:
208
213
209
214
```html run
210
215
<select id="select" *!*multiple*/!*>
@@ -214,75 +219,80 @@ Like this:
214
219
</select>
215
220
216
221
<script>
217
-
// get all selected values from multi-select
222
+
// multi-select ile seçilmiş bütün seçeknelere ulaşma
218
223
let selected = Array.from(select.options)
219
224
.filter(option => option.selected)
220
225
.map(option => option.value);
221
226
222
-
alert(selected); // blues,rock
227
+
alert(selected); // blues,rock
223
228
</script>
224
229
```
230
+
Daha detaylı bilgi edinmek için: <https://html.spec.whatwg.org/multipage/forms.html#the-select-element> sayfasını ziyaret edin.
225
231
226
-
The full specification of the `<select>` element is available in the specification <https://html.spec.whatwg.org/multipage/forms.html#the-select-element>.
227
232
228
-
### new Option
233
+
### new Option (yeni Seçenek)
229
234
230
-
This is rarely used on its own. But there's still an interesting thing.
235
+
Bu yöntem çoğu zaman tek başına kullanılmaz fakat bahsedilmesi gereken bir durum var.
231
236
232
-
In the specification of [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create `<option>` elements:
237
+
[Seçenek elemanı](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) dökümantasyonunda `<option>` oluşturmak için kısa ve hoş bir notasyon mevcut:
233
238
234
239
```js
235
240
option = new Option(text, value, defaultSelected, selected);
236
241
```
237
242
238
-
Parameters:
243
+
Değişkenler:
239
244
240
-
- `text` -- the text inside the option,
241
-
- `value` -- the option value,
242
-
- `defaultSelected` -- if `true`, then `selected` HTML-attribute is created,
243
-
- `selected` -- if `true`, then the option is selected.
245
+
- `text` -- seçenek içindeki metin,
246
+
- `value` -- seçeneğin değeri,
247
+
- `defaultSelected` -- eğer `true`, ise `selected` HTML-attribute oluşturulur,
248
+
- `selected` -- eğer `true`, ise, seçenek işaretlenir.
244
249
245
-
For instance:
250
+
Örneğin:
246
251
247
252
```js
248
253
let option = new Option("Text", "value");
249
-
// creates <option value="value">Text</option>
254
+
// <option value="value">Text</option> oluşturur
250
255
```
251
256
252
-
The same element selected:
257
+
Aynı eleman seçildi:
253
258
254
259
```js
255
260
let option = new Option("Text", "value", true, true);
256
261
```
257
262
258
-
```smart header="Additional properties of `<option>`"
259
-
Option elements have additional properties:
263
+
```smart header="`<option>` ek özellikleri"
264
+
Seçenek elemanlarının ek özellikleri vardır:
260
265
261
266
`selected`
262
-
: Is the option selected.
267
+
: seçenek seçildi mi.
263
268
264
269
`index`
265
-
: The number of the option among the others in its `<select>`.
270
+
: `<select>` seçeneklerinin dizin numarası.
266
271
267
272
`text`
268
-
: Text content of the option (seen by the visitor).
273
+
: Seçenekte belirtilen metin (kullanıcı tarafından görülür).
269
274
```
270
275
271
-
## Summary
276
+
## Özet
272
277
273
-
Form navigation:
278
+
From navigasyonu:
274
279
275
280
`document.forms`
276
-
: A form is available as `document.forms[name/index]`.
281
+
: Form `document.forms[name/index]` olarak mevcuttur..
277
282
278
-
`form.elements`
279
-
: Form elements are available as `form.elements[name/index]`, or can use just `form[name/index]`. The `elements` property also works for `<fieldset>`.
283
+
`form.elements`
284
+
: Form elemanlarına `form.elements[name/index]` kullanarak ulaşılabilir yada or `form[name/index]` kullanılarak ulaşılabilir. `elements` özelliği `<fieldset>` için de çalışır.
280
285
281
286
`element.form`
282
-
: Elements reference their form in the `form` property.
283
287
284
-
Value is available as `input.value`, `textarea.value`, `select.value` etc, or `input.checked` for checkboxes and radio buttons.
285
288
286
-
For `<select>` we can also get the value by the index `select.selectedIndex` or through the options collection `select.options`. The full specification of this and other elements is in the specification <https://html.spec.whatwg.org/multipage/forms.html>.
289
+
:Elemanlar, form özelliğinde kendi `form`larına referans yaparlar.
290
+
291
+
Değerlere `input.value`, `textarea.value`, `select.value` v.b., yada `input.checked` kullanarak checkbox ve radio buttons tipindeki input'lar için ulaşılabilir.
292
+
287
293
288
-
These are the basics to start working with forms. We'll meet many examples further in the tutorial. In the next chapter we'll cover `focus` and `blur` events that may occur on any element, but are mostly handled on forms.
294
+
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>.
296
+
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