HTML name Attribute

eminbasbayan

3 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Formlar, kullanıcıların veri girmesini sağlar ve bu verilerin bir sunucuya gönderilmesi için kullanılır. Ancak, bu verilerin doğru şekilde etiketlenmesi ve organize edilmesi için önemli bir özellik vardır: name. Bu yazıda, name özelliğinin ne işe yaradığını, neden önemli olduğunu ve nasıl kullanıldığını öğreneceğiz.

1. `name` Özelliği Nedir?

name, bir form kontrolüne (örneğin, bir input) benzersiz bir etiket sağlar. Bu etiket, form gönderildiğinde sunucuya hangi verinin gönderildiğini belirtir. Bir form elemanına bir isim vermek, form verilerini düzenlemenin temel adımıdır.

Örnek:

<input type="text" name="username" placeholder="Kullanıcı Adı">

Yukarıdaki örnekte:

name="username", bu input elemanını tanımlar.
Kullanıcı "ahmet123" gibi bir değer girip formu gönderdiğinde, sunucuya şu şekilde bir veri gönderilir:
```
username=ahmet123
```

2. `name` Özelliğinin Rolü

Form Verilerini Etiketleme

Bir form gönderildiğinde, her bir form elemanına girilen değer, name özelliği aracılığıyla sunucuya etiketlenir. Örneğin:

<form action="/giris">
  <input type="text" name="username" placeholder="Kullanıcı Adı">
  <input type="password" name="password" placeholder="Şifre">
  <button type="submit">Gönder</button>
</form>

Kullanıcı formu şu şekilde doldurursa:

Kullanıcı Adı: ahmet123
Şifre: 123456

Form gönderildiğinde, şu veri sunucuya ulaşır:

username=ahmet123&password=123456

3. Neden `name` Kullanmalıyız?

Sunucu İletişimi:
- Sunucu, verileri name özelliği üzerinden tanır. Eğer name eklenmezse, sunucu bu veriyi işleyemez.
Düzenli Veri Gönderimi:
- Bir formda birden fazla input olduğunda, her input'un verisi name ile ayrıştırılır.
Zorunlu Özellik:
- Çoğu sunucu tarafı uygulama (PHP, Node.js, Python vb.), form verilerini işlerken name özelliğini kullanır.

4. Örnek: Birden Fazla `name` Özelliği

Aşağıdaki örnek, farklı input elemanları için nasıl name kullanıldığını gösterir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Örneği</title>
</head>
<body>
  <h1>Giriş Formu</h1>
  <form action="/gonder">
    <label for="username">Kullanıcı Adı:</label>
    <input type="text" id="username" name="username" placeholder="Kullanıcı Adı">

    <label for="password">Şifre:</label>
    <input type="password" id="password" name="password" placeholder="Şifre">

    <label for="age">Yaş:</label>
    <input type="number" id="age" name="age" placeholder="Yaş">

    <button type="submit">Gönder</button>
  </form>
</body>
</html>

Form Gönderimi Sonrası:

Eğer kullanıcı şu şekilde veri girerse:

Kullanıcı Adı: veli
Şifre: 123456
Yaş: 30

Sunucuya gönderilen veri şu şekilde olacaktır:

username=veli&password=123456&age=30

5. URL'de Gönderilen Veriler ve GET Metodu

Form, varsayılan olarak GET yöntemiyle veri gönderir. Bu, verilerin URL'de görünür olduğu anlamına gelir. Örneğin:

https://www.siteadi.com/gonder?username=veli&password=123456&age=30

Bu yöntem hızlı ve basittir, ancak şifre gibi hassas bilgilerin URL'de görünmesine neden olabilir. Bu nedenle POST metodu, hassas veri gönderiminde tercih edilir.

6. GET ve POST Yöntemleri

GET:

Veriler URL'de görünür.
Küçük veri setleri için uygundur (örneğin, arama formları).

POST:

Veriler URL'de görünmez, doğrudan sunucuya gönderilir.
Daha güvenlidir ve büyük veri setlerini destekler.

Bir formda POST yöntemi kullanmak için:

<form action="/gonder" method="POST">

7. Sonuç

name özelliği, bir formun işlevselliğinin temelini oluşturur. Her form kontrolüne benzersiz bir name atamak, verilerin sunucuya doğru şekilde iletilmesini sağlar. Bu özellik, form verilerini işlemek için kritik bir rol oynar ve form tasarımı yaparken asla atlanmamalıdır.