HTML Form Etiketleri Rehberi: Veri ve Etkileşim

HTML Formları: Dijital Etkileşimin Kalbi

HTML Formları, modern web'in statik bir bilgi kaynağı olmaktan çıkıp "dinamik ve iki yönlü bir iletişim" platformuna dönüşmesini sağlayan temel araçtır.

Bir web sitesindeki tüm dijital işlemlerin kayıt , giriş , alışveriş , geri bildirim başlangıç noktası kullanıcıdan veri toplama mekanizmasıdır.

Formlar, internetin etkileşimli ve işlevsel olmasını sağlayan kilit mekanizmayı oluşturur.

Mimari Amaç ve Rolü

Formlar, sadece bir dizi giriş alanını bir araya getirmekten ibaret değildir; bunlar,verinin toplanması, yapılandırılması ve sunucuya iletilmesi sürecini yöneten mantıksal bir birim görevi görür.

Yapısal Kapsayıcı: <form> etiketi, içerdiği tüm kontrol elementlerinin ( <input>, <textarea>, <select> vb. ) tek bir paket halinde hedeflenen sunucuya ( action ) ve belirtilen yöntemle ( method ) gönderilmesini garanti eden bir sözleşme sunar.

İstemci-Sunucu Köprüsü:

Formlar, istemci tarafında ( tarayıcıda ) oluşturulur ve kullanıcı etkileşimi ile doldurulur, ancak formun asıl amacı olan veri işleme için sunucu tarafındaki bir uygulamaya ( Python, PHP, Node.js gibi dillerle yazılmış ) mutlak suretle ihtiyaç duyarlar ve HTML, veriyi gönderir; sunucu, veriyi işler.

Kullanılabilirlik ve Erişilebilirlik:

İyi tasarlanmış formlar, Kullanıcı Deneyimi ve Erişilebilirlik ilkelerini esas alır.

Doğru şekilde etiketlenmiş ( <label> ) ve klavye ile erişilebilir formlar, görme engelli kullanıcılar dahil, herkesin verilerini doğru, hızlı ve hatasız bir şekilde gönderebilmesini garanti eder.

<form> etiketi, HTML'de kullanıcıdan veri toplamayı amaçlayan tüm etkileşimli kontrol öğelerini ( <input>, <textarea>, <button> vb. ) içeren bir kapsayıcı ( container ) görevi görür.

Bir form, içerisinde barındırdığı verilerin "nasıl, nereye ve hangi yöntemle" gönderileceğini tanımlayan ana yapıdır.

Formun kendisi görsel olarak bir şey görüntülemez, ancak altındaki girdilerin mantıksal birimini oluşturur.

Bir web sayfasında giriş yapma, kayıt olma veya arama yapma gibi işlemleri gerçekleştirmek için toplanan verilerin

sunucuya iletilmesi gerekir.

İşte <form> etiketi bu iletim sürecinin kurallarını belirleyen elementtir.

<form> etiketine uygulanan nitelikler ( attributes ), yalnızca görsel bir ayar değil, formun

"tüm iletişim mantığını ve güvenlik davranışını" yöneten hayati yapılandırmalardır.

Bu nitelikler, formun içerisinde toplanan kullanıcı verisinin ( girdiler, seçimler, dosyalar ) nihai olarak sunucuya ulaştırılması sürecinde protokolü, hedefi ve aktarım biçimini belirler.

Bu nitelikler, "tarayıcı ve sunucu arasındaki sözleşmeyi" tanımlar.

Tarayıcı, niteliklerde belirtilen kurallara göre veriyi paketler ve gönderir; sunucu ise aynı kuralları bekleyerek gelen veriyi ayrıştırır.

Niteliklerin Semantik ve Güvenlikteki Rolü

Form nitelikleri, sadece teknik gereklilikler değil, aynı zamanda "kullanıcı deneyimi (UX) ve güvenlik" açısından da kritik kararları temsil eder:

Veri Akış Kontrolü:

Form verisinin URL'de açıkça görünmesi mi yoksa gizli tutulması mı gerektiği gibi temel veri akış kararları bu niteliklerle alınır.

İşlem Tipi:

Formun bir veritabanı kaydını mı değiştireceği yoksa sadece bir arama mı yapacağı ayrımı, bu niteliklerle

"semantik olarak işaretlenir".

Kullanıcı Kolaylığı:

Kullanıcının daha önce girdiği bilgileri otomatik olarak doldurma izninin yönetilmesiyle hem hız hem de hassasiyet dengelenir.

Özetle, <form> nitelikleri, formun ne yapacağını değil, "nasıl yapacağını" belirleyen, tüm form sürecinin

omurgasını oluşturan yapılandırma ayarlarıdır.

Bu ayarlar olmadan, bir form sadece bir girdi elemanları yığını olarak kalır ve sunucuyla etkileşim kuramaz.

Action niteliği, bir HTML formunun en kritik yapı taşlarından biridir; zira formun temel amacını, yani toplanan verilerin tam olarak "nereye gönderileceğini" tanımlar.

Bu nitelik, formun beynidir ve gönderim işlemini yönlendirir.

İşlev ve Veri Yönlendirme

Kullanıcı form doldurma işlemini tamamlayıp gönder düğmesine ( <button type="submit"> veya <input type="submit"> ) tıkladığında, tarayıcı formun içinde bulunan tüm giriş alanlarındaki ( input, textarea vb. ) verileri toplar, bunları bir HTTP isteği olarak paketler ve action niteliğinde belirtilen URL'ye yollar.

Bu hedef adres şunlardan herhangi biri olabilir:

Sunucu Tarafı Script:

PHP, Python veya Node.js ile yazılmış bir dosya ( /login.php gibi ).

API Uç Noktası:

Modern uygulamalarda, verilerin işlenmesi için hedeflenen bir "web servisi adresi" ( [https://api.sitem.com/kayit] (https://api.sitem.com/kayit) gibi ).

Mevcut Sayfa:

Action niteliği boş bırakılırsa ( action="" ) veya hiç belirtilmezse, tarayıcı verileri varsayılan olarak mevcut sayfanın URL'sine gönderir.

Bu durumda, genellikle aynı sayfa üzerindeki bir sunucu kodu veya JavaScript, gelen veriyi işlemek üzere ayarlanmıştır.

URL Yapısı ve İlişkisi: action niteliği, "mutlak" ( absolute ) veya "göreceli" ( relative ) URL'leri kabul eder:

Mutlak URL:

Harici bir siteye veya tam yola gönderim yapar:

( action="[https://baska-bir-site.com/veri-al](https://baska-bir-site.com/veri-al)" ).

Göreli URL:

Mevcut site içindeki bir yola gönderim yapar ( action="/islemler/dogrula.jsp" ).

Action niteliği, formun nasıl davranacağı konusunda belirleyici olsa da, verinin nasıl gönderileceği bilgisi "method" niteliği ile belirlenir.

Bu iki nitelik "her zaman birlikte çalışarak" formun nihai davranışını oluşturur.

Method niteliği, formun içerisinde toplanan verilerin, action niteliğiyle belirlenen hedefe hangi "HTTP iletişim yöntemiyle" gönderileceğini tanımlar.

Bu nitelik, verinin sunucuya nasıl ulaştığı, URL'de görünüp görünmeyeceği ve veri hacmi limitleri gibi temel teknik ve güvenlik kararlarını belirler.

GET Yöntemi: Veri Talebi (Query)

GET yöntemi, veriyi sunucudan talep etmek veya mevcut verileri "sorgulamak" için tasarlanmıştır.

Veri İletimi:

Form verileri, hedef URL'nin sonuna, ? işaretinden sonra parametreler olarak ( Query String ) eklenerek gönderilir.

Örneğin:

action.php?kullanici=ahmet&sifre=123.

Görünürlük ve Paylaşılabilirlik:

Veriler tarayıcının URL çubuğunda açıkça görünür ve bu nedenle bu URL kolayca paylaşılabilir veya "yer imi" ( bookmark ) yapılabilir.

Kullanım Alanları:

Arama formları, filtreleme mekanizmaları ve sayfalama gibi sadece mevcut veriyi okuma amaçlı işlemler için idealdir.

Kısıtlamalar:

Tarayıcı ve sunucu limitleri nedeniyle URL uzunluğu kısıtlıdır (genellikle birkaç bin karakter).

En önemlisi, şifreler ve kredi kartı bilgileri gibi hassas veriler için güvenlik riski oluşturduğundan kesinlikle kullanılmamalıdır.

POST Yöntemi: Veri Gönderme ve Değişiklik

POST yöntemi, yeni verileri sunucuya göndermek, sunucu tarafında bir kayıt oluşturmak veya mevcut bir kaydı değiştirmek için tasarlanmış "standart yöntemdir".

Veri İletimi:

Form verileri, HTTP isteğinin gövdesinde ( body ) "gizlenerek" gönderilir, veri, URL'de görünmez ve kullanıcıdan gizlenir.

Güvenlik ve Veri Hacmi:

Veriler URL'de görünmediği için GET yöntemine göre "daha güvenlidir".

Ayrıca, veri gövdesinde gönderildiği için veri boyutu limitleri daha yüksektir ve büyük metin blokları veya dosya yüklemeleri için zorunludur.

Kullanım Alanları:

Kullanıcı kaydı, giriş yapma ve dosya yükleme gibi veritabanında değişiklik yapacak tüm işlemler için "önerilen" yöntemdir.

Method ve action İlişkisi

Method ve action nitelikleri daima birlikte çalışır: method, verinin "nasıl paketleneceğini" belirlerken; action, paketin hangi adrese gönderileceğini belirtir.

Çoğu zaman, kullanıcıların hassas veri girdiği her formda ( <input type="password"> dahil) method="POST" kullanılmalıdır.

Target niteliği, form verilerinin sunucuya gönderilmesinden sonra sunucudan gelen yanıt sayfasının ( onay mesajı ,

sonuç sayfası veya yönlendirme ) kullanıcıya hangi "tarama bağlamında" gösterileceğini belirler , bu nitelik,

kullanıcı deneyimini doğrudan etkiler.

İşlev ve Davranış Kontrolü

Target niteliği, temel olarak HTML'deki <a> (link) etiketinde kullanılan target niteliğiyle "tamamen aynı prensiple" çalışır.

UX Etkisi:

Target niteliğini _blank olarak ayarlamak, form gönderildikten sonra kullanıcının mevcut sekmeyi kaybetmemesini sağladığı için bazı durumlarda kullanışlı olabilir.

Ancak, bu durum kullanıcıya beklenmedik bir pencere açabilir ve akışı bölebilir; bu nedenle en yaygın ve kullanıcı dostu yöntem varsayılan _self değerini kullanmaktır.

Sunucudan yanıt geldikten sonra tarayıcıya, bu yanıtı "nereye yüklemesi gerektiğini" söyler.

Genel Bakış

Autocomplete niteliği, web tarayıcılarının form alanlarını kullanıcının daha önceki giriş verileriyle ( isim ,adres kredi kartı ,şifreler ) otomatik olarak doldurma yeteneğini etkinleştirir veya devre dışı bırakır.

Bu nitelik, hem "kullanıcı kolaylığı" hem de "güvenlik" açısından önemlidir.

İşlev ve Kapsam

Bu nitelik, tüm forma uygulanabileceği gibi, form içindeki tek tek <input> alanlarına da uygulanabilir.

Form seviyesinde ayarlandığında, formdaki tüm alanlar için geçerli olur; tek tek alanlarda ayarlandığında ise o alan için formu ezer.

Güvenlikteki Önemi

Autocomplete="off" kullanmak, özellikle "yüksek güvenlik gerektiren alanlarda" ( finansal işlemler,

tek kullanımlık kodlar ) istenmeyen veri kaydını önler.

Ancak, şifre alanları gibi bazı hassas alanlarda, tarayıcılar ( kullanıcının kendi güvenliği için ) bu talimatı

kasıtlı olarak görmezden gelebilir ve kullanıcıdan şifreyi kaydetmesini isteyebilir.

Modern web geliştirmede, on/off yerine "spesifik autocomplete tokenlarını" kullanmak, tarayıcıya neyi kaydetmesi ve neyi önermesi gerektiği konusunda daha kesin talimatlar verir.

Enctype niteliği (Encoding Type - Kodlama Tipi ), form verilerinin method="POST" ile sunucuya gönderilmeden önce hangi formatta "paketlenmesi ve kodlanması" gerektiğini belirleyen hayati bir ayardır.

Bu nitelik, özellikle metin, sayı ve ikili (binary) verilerin (dosyalar gibi) sunucu tarafında sorunsuz bir şekilde ayrıştırılabilmesi için temel bir gerekliliktir.

Bu niteliğin doğru seçimi, tarayıcı ile sunucu arasındaki veri iletişiminin kalitesini ve başarısını doğrudan etkiler.

İşlev ve Kullanım Gerekliliği

Enctype, tarayıcıya, formdaki karakterleri, özel sembolleri ve olası ekleri sunucuya iletmek üzere nasıl

"güvenli bir şekilde dönüştürmesi" gerektiğini söyler.

Çoğu standart metin gönderimi için varsayılan değer yeterli olsa da, veri tipleri karmaşıklaştıkça (özellikle dosya yükleme), kodlama tipinin bu karmaşık yapıyı destekleyecek şekilde değiştirilmesi zorunludur.

Varsayılan Metin Kodlaması : application/x-www-form-urlencoded

Bu, bir <form> etiketinde enctype niteliği belirtilmediğinde otomatik olarak kullanılan varsayılan tiptir.

Kullanım Amacı

Metin alanları, onay kutuları ve radyo düğmeleri gibi standart, düz metin verileri içeren girdiler için idealdir.

İşleyiş Mekanizması

Formdaki tüm verileri ( name-value çiftleri halinde ) tek bir dize (string) olarak kodlar.

Bu süreçte, form verilerinin URL uyumlu olması sağlanır:

Boşluk karakterleri, URL'de sorun yaratmaması için + işaretine dönüştürülür.

Özel karakterler sunucu tarafından doğru okunabilmesi için % ile başlayan onaltılık ( hexadecimal ) kodlamaya çevrilir.

Kısıtlama

Bu format, ikili verileri (binary data) temsil edemediği için dosya yüklemeyi ( file upload ) desteklemez.

İkili Veri Kodlaması: multipart/form-data

Bir formun kullanıcıdan dosya ( resim , PDF, , video vb. ) yüklemesi gerektiği durumlarda, bu kodlama tipinin kullanılması mutlak bir zorunluluktur.

Kullanım Amacı

Form yapısının içerisinde <input type="file"> alanı bulunduğunda kullanılmalıdır.

İşleyiş Mekanizması

Bu yöntem, verileri tek bir dize yerine, her form alanını ayrı ayrı sınırlandırılmış "parçalar" halinde ayırır.

Her parça kendi başlık (header) bilgisine (örneğin dosyanın adı ve içeriği) sahiptir.

Bu "çok parçalı" yapı, ikili verilerin bozulmadan ve doğru MIME tipleriyle birlikte sunucuya ulaştırılmasını sağlar.

Sunucu Tarafındaki Önemi

Sunucu tarafındaki diller bu multipart formatını tanır ve gelen parçaları ayırarak dosyaları işler.

Saf Metin Kodlaması: text/plain

Bu, nadiren kullanılan, özel bir durum kodlama tipidir.

Kullanım Amacı

Çoğunlukla hata ayıklama ( debugging ) veya çok basit test senaryoları için uygundur.

İşleyiş Mekanizması

Veriyi hiç kodlamadan gönderir. Boşluklar ve özel karakterler dönüştürülmez.

Risk

Veri güvenliği açısından sorunlar yaratabileceği için canlı (production) ortamlarda kullanılması önerilmez.

Method ve enctype Arasındaki Güçlü İlişki

Enctype niteliği, sadece form verileri HTTP isteğinin gövdesinde (body) gönderildiğinde anlamlıdır.

Bu da demektir ki:

Enctype niteliği, yalnızca method="POST" kullanıldığında işlevseldir.

Eğer method="GET" kullanılırsa, veriler URL'ye eklenir ve enctype niteliği tamamen göz ardı edilir.

Bu nedenle, dosya yükleme gerektiren tüm formlar zorunlu olarak POST metodunu kullanmalıdır.

Novalidate niteliği, formun gönderim sürecinde tarayıcının yerleşik "otomatik doğrulama" ( validation ) mekanizmasını tamamen atlamasını sağlamak için kullanılan bir Boolean ( mantıksal ) niteliktir.

Bir değer belirtilmesine gerek yoktur; niteliğin varlığı ( <form novalidate> ), işlevi etkinleştirir.

İşlev ve Tarayıcı Kontrolleri

Normal şartlar altında, HTML5 ile gelen standart doğrulama özellikleri tarayıcılar tarafından otomatik olarak kontrol edilir:

Zorunlu Alanlar

Required niteliği olan alanlar boş bırakılamaz.

Veri Tipleri

Bazı girdiler ( type="email", type="url" veya pattern gibi) bu niteliklere uymayan hatalı girdiler engellenir.

Uzunluk/Değer Kısıtlamaları

Minlength , maxlength min veya max gibi kısıtlamalar kontrol edilir.

Eğer <form novalidate> kullanılırsa, kullanıcı eksik veya hatalı veri girse bile, tarayıcı "hata mesajı göstermez" ve formu doğrudan action adresine göndermeye çalışır.

Kullanım Senaryoları ve Gerekçesi

Novalidate niteliği, çoğunlukla tarayıcının yerleşik doğrulaması yerine "daha karmaşık veya özelleştirilmiş" doğrulama kullanılması gerektiğinde tercih edilir:

Özelleştirilmiş Hata Mesajları

Geliştiriciler, tarayıcının varsayılan hata balonları yerine, özel JavaScript veya CSS ile biçimlendirilmiş hata mesajları göstermek isteyebilir.

Bu durumda tarayıcı doğrulaması devre dışı bırakılır.

Kapsamlı Sunucu Doğrulaması

Bazı doğrulamalar, yalnızca sunucudaki veritabanı sorgulanarak yapılabilir ( "Bu e-posta adresi zaten kayıtlı mı?" gibi ).

Bu tür durumlarda, tüm kontrolün sunucu tarafına ( server-side validation ) bırakılması gerekir.

Taslak Kaydetme

Kullanıcının formun tamamını doldurmadan verileri "taslak olarak kaydetmesine" izin veren senaryolarda kullanılır.

Güvenlik Notu

Unutulmamalıdır ki, novalidate sadece tarayıcının kullanıcı arayüzündeki kontrollerini devre dışı bırakır.

Asla sunucu tarafında doğrulama yapılmasından vazgeçilmemelidir

İstemci tarafı doğrulaması sadece UX'i hızlandırmak içindir; veri bütünlüğü için her zaman sunucuda doğrulama yapılmalıdır.

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Form Nitelikleri Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <div class="form-box">
        <h3>Dosya ve Kayıt Formu</h3>

        <form 
            action="/sunucu/kayit.php" 
            method="POST" 
            enctype="multipart/form-data" 
            novalidate 
            target="_self">

            <div class="form-group">
                <label for="ad">Adınız (*)</label>
                <input type="text" id="ad" name="ad" required>
            </div>

            <div class="form-group">
                <label for="sifre">Şifre (*)</label>
                <input type="password" id="sifre" name="sifre" required autocomplete="off">
            </div>

            <div class="form-group">
                <label for="dosya">Profil Fotoğrafı (Dosya Yükleme)</label>
                <input type="file" id="dosya" name="profil_foto" required>
            </div>

            <button type="submit">Kaydol (Doğrulama Atlandı)</button>
        </form>

        <p class="search-info" style="border-top: 1px dashed #ccc; padding-top: 10px;">
            **Açıklama:** `method="POST"`, `enctype="multipart/form-data"` (dosya için) ve `novalidate`
            (tarayıcı doğrulamasını atlar) kullanılmıştır.
        </p>
    </div>

    <div class="form-box">
        <h3>🔍 Harici Arama</h3>

        <form 
            action="https://www.google.com/search" 
            method="GET" 
            target="_blank" 
            autocomplete="off">

            <div class="form-group">
                <label for="sorgu">Arama Sorgusu</label>
                <input type="text" id="sorgu" name="q" placeholder="Google'da ara..." required>
            </div>

            <button type="submit">Arama Yap (Yeni Sekme)</button>
        </form>

        <p class="search-info" style="border-top: 1px dashed #ccc; padding-top: 10px;">
            **Açıklama:** `method="GET"`, `target="_blank"` (yeni sekmede aç) ve `autocomplete="off"` kullanılmıştır.
        </p>
    </div>

</body>

</html>

body {
    font-family: 'Georgia', serif;
    background-color: #e6e6e6;
    display: flex;
    justify-content: space-around;
    padding: 40px;
    flex-wrap: wrap;
}

.form-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    width: 45%;
    min-width: 300px;
    margin-bottom: 20px;
    border-top: 5px solid #8e44ad;
    /* Mor renk */
}

h3 {
    color: #8e44ad;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #bdc3c7;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

input:not([type="submit"]) {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

button {
    width: 100%;
    padding: 12px;
    background-color: #9b59b6;
    /* Daha açık mor */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #8e44ad;
}

.search-info {
    font-size: 0.8em;
    color: #7f8c8d;
}

<form 
  action="/sunucu/kayit.php" 
  method="POST" 
  enctype="multipart/form-data" 
  novalidate 
  target="_self">

<form enctype="multipart/form-data">
    <input type="file" id="dosya" name="profil_foto" required>
</form>

<form novalidate>
    <input type="email" required>
    <button type="submit">Gönder</button>
</form>

<!-- Aynı sekmede aç -->
<form action="/sunucu/kayit.php" target="_self">
    ...
</form>

<!-- Yeni sekmede aç -->
<form action="https://www.google.com/search" target="_blank">
    ...
</form>

<form 
    action="https://www.google.com/search" 
    method="GET" 
    target="_blank" 
    autocomplete="off">
    <input type="text" name="q" required>
    <button type="submit">Ara</button>
</form>

<form autocomplete="off">
    <input type="text" name="sorgu">
    <input type="password" autocomplete="off">
</form>

body {
  font-family: 'Georgia', serif;
  background-color: #e6e6e6;
  display: flex;
  justify-content: space-around;
  padding: 40px;
  flex-wrap: wrap;
}

.form-box {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  width: 45%;
  min-width: 300px;
  margin-bottom: 20px;
  border-top: 5px solid #8e44ad;
}

h3 {
  color: #8e44ad;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #bdc3c7;
}

.form-group {
                                margin-bottom: 15px;
                              }

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

input:not([type="submit"]) {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #9b59b6;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #8e44ad;
}

.search-info {
  font-size: 0.8em;
  color: #7f8c8d;
}

<input> etiketi, bir HTML formundaki en temel ve en çok yönlü etkileşimli elementtir. Kullanıcıların formlara

veri girmesini sağlayan bir alandır.

Metin, sayı, tarih, şifre ve düğmeler gibi çok çeşitli veri türlerini tek bir etiket çatısı altında sunar.

Tanım ve Yapısal Rolü

<input> etiketi, <form> kapsayıcısının içerisinde yer alarak, toplanan verilerin sunucuya iletilmek üzere paketlenmesine olanak tanır.

Diğer form elemanları gibi, <input> da kapanış etiketi gerektirmez ( self-closing / void element ).

Bu elementin sahip olduğu inanılmaz çeşitlilik ve esneklik, neredeyse tamamen type niteliği tarafından belirlenir.

Tarayıcı, type değerine göre hem girdinin görsel sunumunu hem de kabul edeceği veri formatını değiştirir.

Temel Bileşenler ve Veri İletimi

Bir <input> etiketinin anlamlı bir form verisi olabilmesi için genellikle iki ana niteliğe ihtiyacı vardır:

Attribute type

Girdi alanının ne tür bir veri alacağını ve nasıl davranacağını tanımlar ( text, email, password, checkbox, submit ).

Attribute name

Bu attribute niteliği kritik önemdedir.

Bu, verinin sunucuya gönderilirken kullanılacağı anahtarı veya değişken adını belirtir.

Eğer name niteliği eksikse, o girdi alanındaki veri sunucuya asla gönderilmez.

<input> etiketi, tek başına çok az anlam ifade eder; onun gerçek gücü ve çok yönlülüğü, kendisine uygulanan nitelikler aracılığıyla ortaya çıkar.

Bu nitelikler, tarayıcıya, girdi alanının "ne tür bir veri alacağını, nasıl görüneceğini", nasıl davranacağını ve hangi kısıtlamalara tabi olacağını söyler.

Bu nitelikler üç ana kategoriye ayrılabilir:

Fonksiyonel Nitelikler (Kimlik ve Veri Tipi)

Bunlar, formun çalışması için zorunlu olan niteliklerdir.

En önemlisi, alanın amacını belirleyen type ve sunucuya gönderilecek verinin anahtar adını belirleyen name niteliğidir.

Kısıtlama ve Doğrulama Nitelikleri (Validation)

Bunlar, kullanıcının girebileceği veriyi sınırlandırır ve required min, max, minlength ve maxlength gibi nitelikler,

veri bütünlüğünü sağlamak ve tarayıcının yerleşik doğrulama mekanizmalarını tetiklemek için kullanılır.

Görsel ve Kullanıcı Deneyimi (UX) Nitelikleri

Bu nitelikler, alana daha iyi bir görünüm ve daha iyi bir kullanıcı deneyimi sağlar.

Bu kategoriye ait nitelikler placeholder, value, readonly ve disabled gibi niteliklerdir.

<input> niteliklerinin etkin kullanımı, yalnızca doğru veri toplamakla kalmaz, aynı zamanda kullanıcı deneyimini hızlandırır (type="email" ile mobil klavyenin @ sembolünü öne çıkarması) ve formların erişilebilirliğini artırır.

Type niteliği, bir <input> elementinin hangi türde bir giriş alanı olacağını tanımlayan ve dolayısıyla elementin "görünümünü, davranışını ve kabul edeceği veri formatını" kökten değiştiren en kritik niteliktir.

<input> etiketinin çok yönlülüğü tamamen bu niteliğe bağlıdır.

İşlev ve Davranış Çeşitliliği

Tarayıcılar, type değerine göre hem kullanıcı arayüzünü (UI) hem de veri işleme mekanizmasını otomatik olarak ayarlar:

Metinsel Girdiler

type="text" gibi basit metin girişleri sağlarken; type="password" girilen karakterleri "gizleyerek" güvenlik sağlar.

Seçim Girdileri

type="checkbox" tek başına bir onay kutusu oluşturur; type="radio" ise gruplandırıldığında kullanıcının

birden fazla seçenekten yalnızca birini seçmesine izin verir.

Zengin Girdiler (HTML5)

Modern tarayıcılarda type niteliği, "karmaşık arayüzler" sunar:

type="date", kullanıcının elle yazmak yerine bir takvim arayüzü kullanarak tarih seçmesini sağlar.

type="color", kullanıcıya renk seçici (color picker) arayüzü sunar.

type="range", değer seçimi için bir kaydırıcı (slider) oluşturur.

Mobil Uyum ve Kullanıcı Deneyimi (UX)

Type niteliği, mobil cihazlarda kullanıcı deneyimini önemli ölçüde iyileştirir:

type="email" kullanıldığında, mobil klavye otomatik olarak @ işaretini öne çıkarır.

type="tel" kullanıldığında, mobil klavye otomatik olarak sayısal tuş takımını açar.

type="number" kullanıldığında, tarayıcı sadece rakam girişine izin verir ve genellikle alanın yanında artırma/azaltma düğmeleri

( spinbox ) gösterir.

Name niteliği, bir <input> alanının form verileri sunucuya gönderildiğinde tanımlanacağı "anahtarı" veya değişken adını belirler.

Bu nitelik, formun semantik değil, fonksiyonel açıdan en önemli parçasıdır.

Kritik Fonksiyonu: Sunucu Erişimi

Name niteliği, bir <input> elementinin kullanıcıdan aldığı değerin ( value ), action adresindeki sunucu tarafı betiği ( script ) tarafından "okunabilmesi için bir köprü" görevi görür.

Veri Paketleme

Kullanıcı gönder düğmesine bastığında, tarayıcı formdaki verileri "name ve value çiftleri" halinde paketler

( name1=value1&name2=value2 ).

Sunucu Tarafı İşleme:

Sunucu tarafındaki bir dil ( PHP, Node.js, Python ), bu name değerini kullanarak kullanıcının girdiği veriye erişir ve onu işler.

Örneğin:

Bir PHP betiğinde kullanıcı adını almak için $_POST['kullanici_adi'] yapısı kullanılır, buradaki 'kullanici_adi' doğrudan input'un name değeridir.

Uyarı:

Eğer bir <input> elementinde name niteliği eksikse, o giriş alanına girilen veri sunucuya gönderilmez ve

tamamen yok sayılır.

Kullanım ve Anlamlılık

Name değeri, alfanümerik olmalı ve alanın amacını net bir şekilde yansıtmalıdır ( email_adresi, siparis_miktari ).

Benzersizlik:

Normalde her <input> alanının "kendi benzersiz name" değeri olmalıdır.

Tekrarlanan İsimler (Radyo ve Checkbox):

type="radio" ve type="checkbox" gibi seçim elementlerinde, "bir grup içindeki tüm seçeneklerin" aynı name değerine sahip olması gerekir.

Bu, sunucunun birden fazla seçenek arasından hangisinin seçildiğini tek bir anahtar üzerinden kontrol etmesini sağlar. ( Tüm radyo düğmeleri name="odeme_yontemi" olmalıdır. )

Id niteliği, bir HTML belgesi içindeki ilgili <input> (ve diğer tüm elementlere) "benzersiz bir tanımlayıcı" (ID) atar.

Form verilerinin sunucuya gönderilmesi için zorunlu olmamasına rağmen, bu nitelik erişilebilirlik ve istemci tarafı programlama için kritik bir öneme sahiptir.

Temel İşlevi: Label ile İlişkilendirme

Id'nin formlarda en yaygın ve önemli kullanımı, onu <label> etiketi ile "ilişkilendirmektir".

Erişilebilirlik Artışı:

<label> etiketinin for niteliği, karşılık geldiği <input> elementinin id değerini almalıdır.

( <label for="eposta_alani">E-posta</label> ).

Bu bağlantı sağlandığında:

Kullanıcı etiketin metnine tıkladığında, tarayıcı otomatik olarak ilişkili giriş alanına odaklanır (focus).

Bu, özellikle küçük hedef alanları olan mobil cihazlarda veya onay kutularında kullanıcı deneyimini ( UX ) büyük ölçüde iyileştirir.

Ekran okuyucular, kullanıcı <input> alanına geldiğinde, etiketi okuyarak alanın amacını doğru bir şekilde açıklar.

Bu, formun Web Erişilebilirlik Yönergelerine ( WCAG ) uygunluğunu artırır.

JavaScript ve CSS ile Manipülasyon

Id, elementin "benzersizliğini" garanti ettiği için, JavaScript ve CSS'te de sıklıkla hedefleme aracı olarak kullanılır:

JavaScript Seçimi:

Geliştiriciler, JavaScript'te document.getElementById('benzersiz_id') yöntemini kullanarak belirli bir form elemanını hızlı ve kesin bir şekilde seçebilir.

CSS Hedefleme:

CSS'te #benzersiz_id seçicisi ile o spesifik elemente özel stiller uygulanabilir.

Value niteliği, bir <input> elementinin temel içeriğini belirler.

Bu niteliğin işlevi, <input>'un tipine göre iki ana kategoride değerlendirilir:

Görsel ve Varsayılan Değer:

Metin tabanlı alanlarda kullanıcıya gösterilen başlangıç değerini belirler.

İletilen Değer:

Seçim tabanlı elementlerde ( radyo , onay kutusu ) ve düğmelerde sunucuya gönderilecek kesin veriyi tanımlar.

Metinsel Girdilerde Kullanımı

type="text", type="email", type="number" gibi metin giriş alanlarında value niteliği, kullanıcının alanı doldurmaya başlamadan önce göreceği varsayılan içeriği sağlar.

Ön Doldurma (Pre-filling):

Özellikle kullanıcı girişini hatırlamak, bir formdaki bilgileri düzenlemek veya sabit bir değeri göstermek için kullanılır.

Kullanıcı Deneyimi (UX):

Formun bir bölümünü otomatik olarak doldurarak kullanıcının işini kolaylaştırır ve kullanıcı, bu varsayılan değeri değiştirebilir.

Seçim ve Düğme Girdilerinde Kullanımı (İletilen Değer)

Value niteliğinin en kritik işlevi, type="radio" ve type="checkbox" gibi elementlerdeki veri iletimini yönetmesidir:

Radyo ve Onay Kutuları:

Bu elementler seçildiğinde, sunucuya gönderilen veri, ekrandaki metin değil, bu elementin value niteliğinde belirtilen teknik değerdir.

Geliştiriciler, sunucunun anlayacağı kısa, net anahtarlar ( value="kredi_karti" ) atar.

Düğmeler (submit, reset, button):

Bu tipler için value niteliği, düğmenin üzerinde yazacak olan metni belirler ( value="Girişi Tamamla" ).

Placeholder niteliği, metin giriş alanları ( type="text", type="email", type="password", type="number", vb. ) boşken, kullanıcıya alanın amacını veya beklenen veri formatını açıklayan "kısa, soluk bir ipucu metni" gösterir.

Temel İşlevi ve Kullanıcı Deneyimi:

Bu nitelik, kullanıcının formu doldururken ek kılavuzluk sağlaması açısından kritik öneme sahiptir:

Kılavuzluk:

Kullanıcı metin yazmaya başladığı an, bu ipucu metni otomatik olarak kaybolur ve girdi alanı boşalır.

Bu, kullanıcının alana ne girmesi gerektiği konusunda hızlı bir bağlam sağlar.

Format Önerisi:

Bazen sadece alanın adını değil, beklenen veri formatının bir örneğini de göstermek için kullanılır ( placeholder="adiniz.soyadi@ornek.com" ).

Görsel ve Geçici:

Placeholder metni, <input>'un gerçek value değeri değildir; bu metin sunucuya gönderilmez ve sadece görsel bir yardımcıdır.

Bu özelliği onu, alanın doldurulması zorunlu olan ve sunucuya gönderilmesi gereken varsayılan değerleri belirten value niteliğinden ayırır.

Yanlış Kullanımdan Kaçınma

Placeholder metinleri kısa ve açıklayıcı olmalıdır.

<label> etiketinin yerine kullanılmamalıdır.

Bunun sebebi, kullanıcı yazmaya başladığında ipucu kaybolur, bu da kullanıcının ne girdiğini unutmasına neden olabilir.

Ekran okuyucular, form alanının amacını öğrenmek için öncelikle <label> etiketine bakar. Yalnızca placeholder kullanmak, Erişilebilirliği ciddi şekilde düşürür.

Required niteliği, HTML5 ile gelen bir Boolean form doğrulama özelliğidir.

Bu niteliğin bir <input> elementinde bulunması, o giriş alanının formun sunucuya gönderilmeden önce input alanının

"mutlaka doldurulması gerektiğini" belirtir.

İşlev ve Tarayıcı Kontrolü

Required niteliği, istemci tarafı doğrulamanın temelini oluşturur:

Gönderimin Engellenmesi:

Kullanıcı bu alana hiçbir veri girmeden formu göndermeye çalıştığında, tarayıcı formun action adresine gitmesini engeller.

Otomatik Uyarı:

Tarayıcı, engellemenin nedeni olarak alanı işaret eden ve kullanıcıya doldurması gerektiğini söyleyen

yerleşik bir uyarı mesajı balonu ( validation bubble ) gösterir.

Bu mesaj, tarayıcının diline göre otomatik olarak çevrilir.

Kullanım Kolaylığı (UX):

Bu özellik sayesinde, hatalı veya eksik form verisi sunucuya ulaşmadan filtrelenir, bu da sunucu üzerindeki yükü azaltır ve kullanıcıya anında geri bildirim sağlar.

Kullanım ve Erişilebilirlik

Required niteliği, type="text", type="email", type="number", type="password", type="checkbox" ve textarea gibi birçok form elementinde kullanılabilir.

Erişilebilirlik (Accessibility):

Required niteliği kullanıldığında, tarayıcı otomatik olarak alana aria-required="true" niteliğini ekler.

Bu, ekran okuyucuların görme engelli kullanıcılara alanın zorunlu olduğunu duyurmasını sağlayarak

formun erişilebilirliğini artırır.

İpucu

Bu doğrulama mekanizması yalnızca kullanıcı deneyimini iyileştirir ve hızlandırır.

Güvenlik ve veri bütünlüğü için, sunucu tarafında ek doğrulama yapmak her zaman zorunludur.

Disabled niteliği, bir <input> elementinin "tamamen devre dışı bırakılmasını" sağlayan bir Boolean niteliktir.

Bu niteliğin varlığı, ilgili form alanının yalnızca görsel olarak pasif görünmesini sağlamakla kalmaz, aynı zamanda işlevsel etkileşimini de tamamen ortadan kaldırır.

Etkileşim Kısıtlamaları

Disabled olarak işaretlenen bir alanda, kullanıcı hiçbir şekilde metin yazamaz, mevcut bir değeri değiştiremez, onay kutusunu/radyo düğmesini seçemez veya bu alana klavye navigasyonu ile odaklanamaz.

Tarayıcılar, devre dışı bırakılan alanları genellikle soluk bir tonda göstererek, kullanıcının bu alanın

geçici olarak kullanılamaz olduğunu hemen anlamasını sağlar.

Veri Gönderimi Üzerindeki Kritik Etkisi

Disabled niteliğinin en kritik teknik yönü, form verisi akışını etkilemesidir: Form gönderildiğinde, disabled olarak işaretlenmiş olan <input> elementinin değeri sunucuya gönderilmez.

Kullanım Amaçları ve readonly Farkı

Bu nitelik, genellikle belirli koşullar sağlanana kadar ( "Şartları Kabul Et" kutusunun işaretlenmesi) bir form alanının kullanılamaz olması gereken durumlarda kullanılır.

Disabled niteliği, sıkça karıştırıldığı readonly ( sadece okunabilir ) niteliğinden şu şekilde ayrılır:

Etkileşim:

Disabled alanı etkileşime tamamen kapar; readonly alanı ise etkileşime açıktır ( odaklanılabilir, kopyalanabilir ) ancak içeriği değiştirilemez.

Veri Gönderimi:

Disabled veri göndermezken, readonly niteliğine sahip alanın değeri form gönderildiğinde sunucuya iletilir.

Min ve max nitelikleri, sayısal, tarihsel veya zamansal girdiler için kabul edilebilir en düşük ve en yüksek değer aralığını belirleyen temel HTML5 doğrulama özellikleridir.

Bu nitelikler, kullanıcının "veri bütünlüğünü bozacak" veya uygulamanın mantığını aşacak değerleri girmesini önleyen

ilk savunma hattını oluşturur.

İşlev ve Uygulandığı Girdi Tipleri

Min ve max nitelikleri, yalnızca belirli veri türlerine sahip <input> elementlerinde işlevseldir.

Düz metin ( type="text" ) alanlarında kullanılamazlar, çünkü bu tiplerin bir sayısal veya tarihsel sınırı yoktur.

Tarayıcı Kontrolü ve Doğrulama Mekanizması

Bu nitelikler, istemci tarafı doğrulamanın önemli bir parçasıdır ve form gönderilmeden önce devreye girer:

Sınırlandırma

Kullanıcı, belirlenen değer aralığı dışında bir sayı girmeye çalıştığında, tarayıcı girdiyi bu sınırlar içinde tutmaya çalışır.

Uyarı ve Engel

Kullanıcı kısıtlamayı aşan bir değer girip formu göndermeye çalıştığında, tarayıcı formun action adresine gitmesini engeller.

Bunun yerine, kullanıcıya alanı düzeltmesini belirten yerleşik bir "uyarı mesajı balonu" gösterir.

Kullanıcı Deneyimi (UX)

Özellikle type="range" ( kaydırıcı ) kullanıldığında, min ve max nitelikleri kaydırıcının başlangıç ve bitiş noktalarını belirleyerek, seçimi görsel olarak sınırlandırır.

type="number" alanlarında ise bu sınırlar, artırma/azaltma düğmelerinin çalışma aralığını belirler.

Veri Bütünlüğü ve Kullanım Gerekçeleri

Min ve max niteliklerinin kullanılması, veri bütünlüğü için kritik öneme sahiptir:

Mantıksal Sınırlama

Bir üründen sipariş edilebilecek minimum miktarı ( min="1" ) veya bir tarih aralığını belirleyerek uygulamanın

iş mantığını korur.

Sunucu Yükünü Azaltma

Hatalı verilerin daha istemci tarafında filtrelenmesini sağlayarak sunucunun gereksiz istekleri işlemesini önler ve performansı artırır.

Src ve alt nitelikleri, bir <input> elementi için genel metin giriş alanlarında değil, özel bir düğme tipi olan type="image" ile birlikte kullanıldığında anlam kazanır.

Bu, standart type="submit" düğmesinin yerine bir resim kullanılarak formun gönderilmesini sağlayan görsel bir kontrol mekanizmasıdır.

Src Niteliği: Görsel Kaynağın Belirlenmesi

Src ( Source - Kaynak ) niteliği, düğmenin görsel olarak temsil edilmesi için kullanılacak resim dosyasının URL'sini belirtir.

Zorunluluk

type="image" olarak tanımlanan bir <input> elementi için src niteliğinin kullanılması zorunludur.

Aksi takdirde, tarayıcı düğmeyi düzgün bir şekilde görüntüleyemez.

İşlevi

Tıpkı bir <img> etiketindeki gibi, tarayıcı bu URL'yi kullanarak resmi indirir ve form gönderim düğmesi olarak kullanıcının ekranına yerleştirir.

Koordinat Gönderimi

Bu niteliğin en önemli özelliği, kullanıcı görsel düğmeye tıkladığında, tarayıcının aynı zamanda

tıklanan noktanın koordinatlarını ( x ve y değerleri ) da sunucuya göndermesidir.

Bu, harita üzerinde seçim yapma veya görsel tıklama bölgelerini analiz etme gibi gelişmiş senaryolarda kullanılabilir.

Alt Niteliği: Erişilebilir Açıklama ve Alternatif Metin

Alt ( Alternative Text ) niteliği, src ile yüklenen görselin içeriğini metinsel olarak tanımlayan hayati bir niteliktir.

Erişilebilirlik (Accessibility)

Alt metni, görme engelli kullanıcılar için kritik öneme sahiptir.

Ekran okuyucular, görseli betimlemek ve düğmenin amacını açıklamak için bu metni okur ( "Aramayı Başlat düğmesi" ).

Yedekleme

Eğer resim dosyası src adresinde bulunamazsa, tarayıcı resmin yerine alt niteliğinde belirtilen metni görüntüler.

Bu, formun işlevselliğini ve kullanıcı deneyimini korur.

SEO Önemi

Arama motorları botları, görselin içeriğini anlamak için bu metni kullanır ve sayfanın bağlamını daha iyi kavrar.

Bu nitelikler, <input type="image"> ile birleştiğinde, yardımcı teknolojiler ve arama motorları tarafından

"doğru bir şekilde anlaşılmasını" sağlayan eksiksiz ve erişilebilir bir çözüm sunar.

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Input Nitelikleri Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <div class="form-container">
        <h2>Kullanıcı Bilgi Formu</h2>

        <form action="/islem.php" method="POST">

            <div class="form-group">
                <label for="ad_soyad">Adınız Soyadınız (*)</label>
                <input type="text" id="ad_soyad" name="tam_isim" placeholder="Tam adınızı giriniz..." required>
                <p class="info-text">Bu alan zorunludur (`required`).</p>
            </div>

            <div class="form-group">
                <label for="yas">Yaşınız</label>
                <input type="number" id="yas" name="yas_degeri" min="18" max="65" placeholder="18 ile 65 arası">
                <p class="info-text">Yaş 18'den küçük, 65'ten büyük olamaz (`min/max`).</p>
            </div>

            <div class="form-group">
                <label for="mail">E-posta Adresi (*)</label>
                <input type="email" id="mail" name="eposta_adresi" placeholder="ornek@alanadi.com" required>
                <p class="info-text">Geçerli e-posta formatı girmelisiniz (`type="email"`).</p>
            </div>

            <div class="form-group">
                <label for="ulkem">Ülke Kodu</label>
                <input type="text" id="ulkem" name="ulke_kodu" value="TR (Türkiye)" disabled>
                <p class="info-text">Bu alan devre dışıdır, değeri sunucuya gitmeyecektir (`disabled`).</p>
            </div>

            <button type="submit">Formu Doğrula ve Gönder</button>
        </form>
    </div>

</body>

</html>

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f9fc;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
}

.form-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 400px;
    border-left: 5px solid #3498db;
}

h2 {
    color: #2c3e50;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
    font-size: 0.95em;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

input:focus {
    border-color: #3498db;
    outline: none;
}

input[disabled] {
    background-color: #ecf0f1;
    cursor: not-allowed;
}

.info-text {
    font-size: 0.8em;
    color: #7f8c8d;
    margin-top: 5px;
}

button {
    width: 100%;
    padding: 12px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #2980b9;
}

<input type="text" id="ad_soyad" name="tam_isim" placeholder="Tam adınızı giriniz..." required>

<input type="number" id="yas" name="yas_degeri" min="18" max="65" placeholder="18 ile 65 arası">

<input type="email" id="mail" name="eposta_adresi" placeholder="ornek@alanadi.com" required>

<input type="text" id="ulkem" name="ulke_kodu" value="TR (Türkiye)" disabled>

<div class="form-group">
  <label for="ad_soyad">Adınız Soyadınız (*)</label>
  <input type="text" id="ad_soyad" name="tam_isim" required>
  <p class="info-text">Bu alan zorunludur (`required`).</p>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f7f9fc;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px;
}

.form-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 400px;
  border-left: 5px solid #3498db;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

input:focus {
  border-color: #3498db;
  outline: none;
}

input[disabled] {
  background-color: #ecf0f1;
  cursor: not-allowed;
}

.info-text {
  font-size: 0.8em;
  color: #7f8c8d;
  margin-top: 5px;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}

<textarea> etiketi, kullanıcının bir forma "birden fazla satır metin girmesine" olanak tanıyan özel bir form kontrol elementidir.

<input type="text"> etiketinin tek bir satırla sınırlı olmasının aksine, <textarea> yorumlar, mesajlar ,

detaylı açıklamalar veya uzun notlar gibi kapsamlı girdiler için tasarlanmıştır.

Bu etiket, <form> yapısının ayrılmaz bir parçasıdır.

Girdiği metin, form gönderildiğinde <form>'un method ve action niteliklerine uygun olarak sunucuya iletilir.

Diğer form elementlerinin aksine, <textarea> bir kapanış etiketi ( </textarea> ) gerektirir.

Kullanıcının girdiği veya önceden doldurulmuş olan metin, bu "açılış ve kapanış etiketleri arasında" yer alır.

Bu elementin en dikkat çekici özelliği, varsayılan olarak "yeniden boyutlandırılabilir" olmasıdır; yani kullanıcılar, tarayıcı tarafından sağlanan bir tutamaç aracılığıyla alanı ihtiyaçlarına göre genişletip daraltabilirler.

Ancak bu davranış, CSS ile kontrol edilebilir ve istenirse devre dışı bırakılabilir.

<textarea> etiketine uygulanan nitelikler, bu "çok satırlı metin giriş alanının" boyutunu, davranışını, içeriğini ve kullanıcının girebileceği veriye getirilen kısıtlamaları belirler.

Bu nitelikler, <textarea>'nın sadece veri toplamaktan öte, kullanıcıya düzenli ve kısıtlı bir alanda rahatça yazma imkanı sunmasını sağlar.

En önemli nitelikler, alanın sunucuya gönderilirken tanınmasını sağlayan name niteliği, erişilebilirlik için gerekli olan id niteliği ve alanın görünür başlangıç boyutunu ayarlayan rows ve cols gibi boyutlandırma nitelikleridir.

Diğer birçok form elemanında olduğu gibi, veri bütünlüğünü sağlamak için zorunluluk ve metin uzunluğu kısıtlamaları

( maxlength gibi ) gibi doğrulama nitelikleri de mevcuttur.

Bu nitelikler topluca, geliştiricinin kullanıcının girdiği uzun metin üzerinde tam kontrol sahibi olmasını ve iyi bir kullanıcı deneyimi sunmasını amaçlar.

Name niteliği, <textarea> elementinin işlevsel açıdan en kritik niteliğidir.

Bu nitelik, kullanıcı tarafından girilen uzun metin içeriğinin form gönderildiğinde sunucuya hangi "anahtar isim" ( key ) altında gönderileceğini belirler.

Veri Eşlemesi

Tarayıcı formu paketlerken, <textarea> içindeki metni alır ve bu metni name niteliğiyle eşleştirir

( mesaj_icerigi=Kullanıcının_yazdığı_metin ).

Sunucu Erişimi

Form verilerini işleyen sunucu tarafı betikleri ( PHP Python Node.js gibi ), tam olarak bu name niteliği değerini kullanarak kullanıcının girdiği uzun metin verisine erişir.

Örneğin:

Bir PHP ortamında bu veriye $_POST['yorum_metni'] şeklinde erişilir.

Not

Tıpkı <input> elementlerinde olduğu gibi, eğer bir <textarea> etiketinde name niteliği niteliği eksikse, o alana girilen tüm metin içeriği sunucuya iletilmez ve yok sayılır.

Bu nedenle, bir form elemanının veri göndermesi amaçlanıyorsa, name niteliği zorunludur.

<textarea> etiketinde kullanılan rows ( Satırlar ) ve cols ( Sütunlar ) nitelikleri, kullanıcının uzun metin girişi yapacağı alanın "başlangıçtaki görsel boyutunu" belirlemek için kullanılır.

Bu nitelikler, piksel veya yüzde gibi mutlak ölçüler yerine, alanın tahmini olarak kaç satır ve sütun karakteri barındırabileceğini belirten, karakter birimi tabanlı kısıtlamalardır.

Bu, özellikle eski tarayıcılar ve temel Erişilebilirlik: gereksinimleri için kritik bir başlangıç yapılandırması sunar.

Rows (Satırlar): Yüksekliğin Kontrolü

Rows niteliği, <textarea> elementinin yüksekliğini tanımlar; yani, dikey olarak kaç satır metnin

kaydırma çubuğuna ihtiyaç duymadan görünür olacağını belirtir.

Tarayıcı, bu değere dayanarak alana gerekli minimum yüksekliği verir.

Kullanıcı, belirlenen satır sayısından daha fazla metin girmeye başladığında, tarayıcı otomatik olarak bir dikey kaydırma çubuğu (scroll bar) ekler.

Bu sayede alanın yüksekliği sabit kalsa bile tüm metnin görüntülenmesi sağlanır.

Cols (Sütunlar): Genişliğin Kontrolü

Cols niteliği ise <textarea> elementinin genişliğini tanımlar; yani, yatay olarak ortalama kaç karakterin sığabileceğini belirtir.

Bu, alanın başlangıçtaki yatay kapladığı boyutu ayarlar. Ancak, günümüz modern web tasarımında CSS'in yaygın kullanımı nedeniyle, genişlik genellikle width özelliği ile yönetilir.

Bu durumda cols değeri, sadece tarayıcıya metin akışı için bir başlangıç kılavuzu sunmaktan öteye geçmez.

Boyutlandırma ve Kullanıcı Deneyimi (UX)

Hem rows hem de cols, <textarea> alanının varsayılan boyutunu belirler.

Kullanıcı, tarayıcının yerleşik işlevselliği sayesinde alanı serbestçe yeniden boyutlandırabilir.

Ancak bu nitelikleri doğru ayarlamak, formun sayfada gereğinden küçük görünmeden, kullanıcının beklentisine uygun bir alan sunması için iyi bir başlangıç noktası sağlar.

Özellikle mobil cihazlarda, kullanıcının ilk bakışta yeterli alana sahip olduğunu düşünmesi için bu varsayılan ayarların önemi büyüktür.

Maxlength niteliği, bir <textarea> elementine ( ve ayrıca <input type="text"> ve <input type="password"> gibi alanlara) uygulanabilen ve kullanıcının o alana girebileceği "maksimum karakter sayısını" belirleyen bir kısıtlama niteliğidir.

Bu, form veri bütünlüğünü sağlamanın ve sunucu kaynaklarını korumanın en basit yollarından biridir.

İşlev ve Karakter Kontrolü

Maxlength, kullanıcının yalnızca belirlenen sayıdaki karakteri girmesini sağlayarak, "veri taşmasını" ( data overflow ) ve sunucu tarafında aşırı uzun verilerin işlenmesini önler:

Girdi Engeli

Tarayıcı, kullanıcı bu nitelikte belirtilen sayıdan fazla karakter yazmaya çalıştığında, ek klavye girdilerini otomatik olarak yok sayar.

Kullanıcının daha fazla yazması engellenir, bu da istemci tarafında anında geri bildirim sağlar.

Boşluk ve Yeni Satırlar:

Nitelik, boşlukları, noktalama işaretlerini ve <textarea>'nın en önemli özelliği olan yeni satır (line break) karakterlerini de tek bir karakter olarak sayar.

Bu, özellikle çok satırlı metinlerde kısıtlamanın doğru uygulanması için kritik öneme sahiptir.

Kullanım Senaryoları ve Gerekçesi

Maxlength kullanımı, uygulama mantığı ve veritabanı gereksinimleri açısından zorunludur:

Mesaj Uzunluğu:

Bir veritabanı tablosundaki ilgili alanın belirli bir karakter limitine ( 255 karakter gibi ) sahip olduğu durumlarda kullanılır.

Bu, veritabanına sığmayacak uzunlukta verinin gelmesini baştan engeller.

Veritabanı Kısıtlamaları:

Kullanıcılardan alınan yorumlar veya biyografiler gibi içeriğin, platform kurallarına (sosyal medya gönderi limitleri gibi) uymasını sağlamak için idealdir.

Performans ve Güvenlik:

Aşırı büyük veri bloklarının sunucuya gönderilmesini engelleyerek, hem ağ trafiğini azaltır hem de bazı temel

hizmet reddi (DoS) saldırılarını önler.

Kullanıcı deneyimini iyileştirmek adına genellikle bir JavaScript sayacı ile birlikte kullanılır; böylece kullanıcıya

kaç karakter hakkı kaldığı anlık olarak gösterilebilir.

Ancak, her form kısıtlamasında olduğu gibi, güvenlik ve veri bütünlüğü için bu kontrolün sunucu tarafında da tekrarlanması esastır.

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Textarea Nitelikleri</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <div class="form-container">
        <h2>Geri Bildirim Alanı</h2>

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

            <div class="form-group">
                <label for="yorum_alani">Yorumunuz (*)</label>
                <textarea 
                    id="yorum_alani" 
                    name="yorum_metni" 
                    rows="8" 
                    cols="50" 
                    maxlength="500"
                    placeholder="Lütfen yorumunuzu buraya (en fazla 500 karakter) yazınız." 
                    required></textarea>
                <p>**maxlength="500"** sınırı aktif, **required** olduğu için boş bırakılamaz.</p>
            </div>

            <button type="submit">Geri Bildirim Gönder</button>
        </form>
    </div>

</body>

</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f0f3f6;
    display: flex;
    justify-content: center;
    padding: 40px;
}

.form-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 450px;
}

h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #34495e;
}

textarea {
    /* Başlangıç Boyutları rows ve cols ile belirlenmiştir */
    width: 100%;
    padding: 10px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    /* Sadece dikey yeniden boyutlandırmaya izin verir */
}

textarea:focus {
    border-color: #3498db;
    outline: none;
}

button {
    padding: 10px 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.form-group p {
    font-size: 0.85em;
    color: #7f8c8d;
}

<textarea 
 id="yorum_alani" 
 name="yorum_metni" 
 rows="8" 
 cols="50" 
 maxlength="500"
 placeholder="Lütfen yorumunuzu buraya (en fazla 500 karakter) yazınız." 
 required></textarea>

<textarea maxlength="500" name="yorum_metni" required></textarea>

<textarea 
placeholder="Lütfen yorumunuzu buraya (en fazla 500 karakter) yazınız." 
required></textarea>

<textarea name="yorum_metni" required></textarea>

<div class="form-group">
    <label for="yorum_alani">Yorumunuz (*)</label>
    <textarea id="yorum_alani" name="yorum_metni" required></textarea>
</div>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f3f6;
  display: flex;
  justify-content: center;
  padding: 40px;
}

.form-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 450px;
}

h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 5px;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #bdc3c7;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

textarea:focus {
  border-color: #3498db;
  outline: none;
}

button {
  padding: 10px 15px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.form-group p {
  font-size: 0.85em;
  color: #7f8c8d;
}

Erişilebilirlik ( A11Y ), web formlarının, engelli kullanıcılar ( görme , işitme, motor veya bilişsel engelli ) dahil olmak üzere, herkes tarafından "algılanabilir, , kullanılabilir ve anlaşılabilir" olmasını sağlamayı amaçlayan bir dizi kural ve pratikler bütünüdür.

Bir formun erişilebilir olması, sadece yasal bir zorunluluk değil, aynı zamanda etik bir sorumluluk ve iyi bir kullanıcı deneyiminin temelini oluşturur.

Temel Prensip: Semantik Bütünlük

Erişilebilirliğin anahtarı, elementlerin "semantik bütünlüğünü" korumaktır.

Yardımcı teknolojiler ( ekran okuyucular gibi ), sayfa içeriğini yorumlamak için HTML etiketlerinin anlamına

( semantiğine ) güvenirler.

Erişilebilirliğin Dört Kuralı

Erişilebilir bir form oluşturmak için odaklanılması gereken "en önemli alanlar" şunlardır:

Etiketleme (Labeling):

Tüm form kontrol elementlerinin ( <input>, <textarea>, <select> ) kendilerine ait, anlamlı bir <label> etiketine sahip olması gerekir.

<label> ve <input> arasındaki ilişki, <label for="..."> ve <input id="..."> nitelikleri aracılığıyla kurulmalıdır.

Bu bağlantı, ekran okuyucuların bir "alanın amacını doğru bir şekilde duyurmasını" sağlar.

Klavye Erişimi (Keyboard Navigation):

Formdaki her etkileşimli elemente sadece fare ile değil, klavye ( özellikle Tab tuşu ) ile erişilebilmelidir.

Disabled veya görsel olarak engellenen öğeler hariç, kullanıcı klavyeyle form üzerinde gezinebilmeli ve seçim yapabilmelidir.

Hata Yönetimi ve Geri Bildirim:

Kullanıcı formu hatalı veya eksik doldurduğunda, hata mesajları açık, anlaşılır ve ekran okuyucular tarafından

"fark edilebilir bir şekilde" sunulmalıdır ( aria-live bölgeleri ).

Hatanın ne olduğu ve nasıl düzeltileceği net olarak belirtilmelidir.

Talimatlar ve Bağlam:

Form alanlarının karmaşık olduğu durumlarda, talimatlar sadece placeholder içinde değil, label'ın yanında veya

aria-describedby gibi niteliklerle verilmelidir.

Erişilebilirliği ihmal edilen formlar, engelli kullanıcılar için tamamen kullanılamaz hale gelir; doğru uygulandığında ise, herkes için "daha net" , "daha hızlı" ve "daha hatasız" bir form deneyimi sunulmuş olur.

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Label Kullanımı</title>
    <style>
       
    </style>
</head>

<body>

    <div class="form-group correct">
        <p style="color: #2ecc71; font-weight: bold;">✅ DOĞRU: Label Bağlantılı</p>
        <label for="email">E-posta Adresi (*)</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group wrong">
        <p style="color: #e74c3c; font-weight: bold;">❌ YANLIŞ: Placeholder Kullanımı</p>
        <input type="email" name="eposta_yanlis" placeholder="E-posta Adresi">
    </div>

</body>

</html>

body {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f9fc;
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #ffffff;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #34495e;
    cursor: pointer;
}

input[type="email"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 250px;
}

/* Yanlış kullanım vurgusu */
.wrong {
    border-left: 5px solid #e74c3c;
}

.correct {
    border-left: 5px solid #2ecc71;
}

<div class="form-group correct">
    <label for="email">E-posta Adresi (*)</label>
    <input type="email" id="email" name="email" required>
</div>

<div class="form-group wrong">
    <input type="email" name="eposta_yanlis" placeholder="E-posta Adresi">
</div>

<div class="form-group correct">
    <p style="color: #2ecc71; font-weight: bold;">✅ DOĞRU: Label Bağlantılı</p>
    ...
</div>

<div class="form-group wrong">
    <p style="color: #e74c3c; font-weight: bold;">❌ YANLIŞ: Placeholder Kullanımı</p>
    ...
</div>

body {
  font-family: Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f7f9fc;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #ffffff;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #34495e;
  cursor: pointer;
}

input[type="email"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 250px;
}

.wrong {
  border-left: 5px solid #e74c3c;
}

.correct {
  border-left: 5px solid #2ecc71;
}

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>ARIA Describedby</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <div class="form-group">
        <p style="font-weight: bold;">ARIA ile Yardımcı Metin Bağlantısı</p>

        <label for="phone">Telefon Numarası</label>
        <input 
            type="tel" 
            id="phone" 
            name="phone" 
            aria-describedby="phone-help" 
            aria-required="true"
        >

        <span id="phone-help" class="help-text">
            Format: 555-xxx-xxxx. Bu metin, ekran okuyucuya okunur.
        </span>
    </div>

</body>

</html>

body {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f9fc;
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #3498db;
    border-radius: 4px;
    background-color: #ecf0f1;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #34495e;
}

input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.help-text {
    font-size: 0.8em;
    color: #2980b9;
    margin-top: 5px;
    display: block;
}

<input 
    type="tel" 
    id="phone" 
    name="phone" 
    aria-describedby="phone-help" 
    aria-required="true"
>

<span id="phone-help" class="help-text">
    Format: 555-xxx-xxxx. Bu metin, ekran okuyucuya okunur.
</span>

<input 
    type="tel" 
    id="phone" 
    name="phone" 
    aria-required="true"
>

<input aria-describedby="phone-help">

<span id="phone-help" class="help-text">
    Format: 555-xxx-xxxx. Bu metin, ekran okuyucuya okunur.
</span>

.help-text {
  font-size: 0.8em;
  color: #2980b9;
  margin-top: 5px;
  display: block;
}

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Fieldset Kullanımı</title>
</head>

<body>

    <fieldset>
        <legend>İletişim Tercihleri</legend>

        <input type="checkbox" id="newsletter" name="preferences">
        <label for="newsletter">Bülten e-postaları almak istiyorum</label>

        <br><br>

        <input type="checkbox" id="notifications" name="preferences">
        <label for="notifications">Bildirimler gönderilsin</label>
    </fieldset>

</body>

</html>

body {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f9fc;
    padding: 20px;
}

fieldset {
    border: 2px solid #9b59b6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

legend {
    font-size: 1.1em;
    font-weight: bold;
    color: #8e44ad;
    padding: 0 10px;
}

label {
    margin-left: 5px;
}

<fieldset>
    <legend>İletişim Tercihleri</legend>
    
    <input type="checkbox" id="newsletter" name="preferences">
    <label for="newsletter">Bülten e-postaları almak istiyorum</label>
    
    <input type="checkbox" id="notifications" name="preferences">
    <label for="notifications">Bildirimler gönderilsin</label>
</fieldset>

<input type="checkbox" id="newsletter" name="preferences">
                              <input type="checkbox" id="notifications" name="preferences">

fieldset {
  border: 2px solid #9b59b6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

legend {
  font-size: 1.1em;
  font-weight: bold;
  color: #8e44ad;
  padding: 0 10px;
}

label {
  margin-left: 5px;
}

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Klavye Gezintisi</title>
</head>

<body>

    <p>Aşağıdaki alanda klavye ile (Tab tuşu) gezinmeyi deneyin.</p>

    <div class="form-actions" role="group" aria-label="Form işlemleri">
        <button type="submit">Gönder</button>
        <button type="reset">Temizle</button>
        <a href="#" role="button">İptal</a>
    </div>

</body>

</html>

body {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f9fc;
    padding: 20px;
}

.form-actions {
    padding: 15px;
    border: 1px dashed #7f8c8d;
    border-radius: 4px;
    display: flex;
    gap: 10px;
}

.form-actions * {
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    color: white;
    text-align: center;
}

button[type="submit"] {
    background-color: #1abc9c;
}

button[type="reset"] {
    background-color: #f39c12;
}

a[role="button"] {
    background-color: #34495e;
}

/* Klavye odağını belirginleştirme */
*:focus {
    outline: 3px solid #3498db;
    outline-offset: 1px;
}

<div class="form-actions" role="group" aria-label="Form işlemleri">
    <button type="submit">Gönder</button>
    <button type="reset">Temizle</button>
    <a href="#" role="button">İptal</a>
</div>

<button type="submit">Gönder</button>
                              <button type="reset">Temizle</button>

<a href="#" role="button">İptal</a>

.form-actions {
                                padding: 15px;
                                border: 1px dashed #7f8c8d;
                                border-radius: 4px;
                                display: flex;
                                gap: 10px;
                              }

.form-actions * {
  padding: 10px 15px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  color: white;
  text-align: center;
}

button[type="submit"] {
  background-color: #1abc9c;
}

button[type="reset"] {
  background-color: #f39c12;
}

a[role="button"] {
  background-color: #34495e;
}

*:focus {
  outline: 3px solid #3498db;
  outline-offset: 1px;
}

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Doğrulama Durumları Örneği</title>

</head>

<body>

    <div class="form-group">
        <label for="sifre_giris">Şifre</label>
        <input type="password" id="sifre_giris" name="sifre" aria-describedby="sifre-hata-mesaji" aria-invalid="false">
        <span id="sifre-hata-mesaji" class="error-text">
            Şifre en az 8 karakter olmalıdır!
        </span>
    </div>

    <button onclick="testHataDurumu()">Hata Durumunu Simüle Et</button>

    <script src="script.js?v=1.0.150"></script>

</body>

</html>

.error-text {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
    display: none;
    /* Başlangıçta hatayı gizle */
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input {
    padding: 8px;
    border: 1px solid #ccc;
}

/* aria-invalid=true olduğunda görsel stil değişikliği */
input[aria-invalid="true"] {
    border-color: red;
    background-color: #ffe8e8;}

function testHataDurumu() {
const sifreInput = document.getElementById("sifre_giris");
const hataMesaji = document.getElementById("sifre-hata-mesaji");
                              
// 1. ARIA niteliğini güncelle
sifreInput.setAttribute("aria-invalid", "true");
                              
// 2. Hata mesajını görünür yap
hataMesaji.style.display = "block";
                              
// Opsiyonel: Konsola bilgi yazdır
console.log("Şifre alanı hatalı olarak işaretlendi.");}

<input 
    type="password" 
    id="sifre_giris" 
    name="sifre" 
    aria-describedby="sifre-hata-mesaji" 
    aria-invalid="false"
>

<button onclick="testHataDurumu()">Hata Durumunu Simüle Et</button>

<script src="script.js?v=1.0.150"></script>

.error-text {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
    display: none;
    /* Başlangıçta hatayı gizle */
}

input[aria-invalid="true"] {
    border-color: red;
    background-color: #ffe8e8;
}

function testHataDurumu() {
  const sifreInput = document.getElementById("sifre_giris");
  const hataMesaji = document.getElementById("sifre-hata-mesaji");
  
  // ...
}

// 1. ARIA niteliğini güncelle
sifreInput.setAttribute("aria-invalid", "true");

// 2. Hata mesajını görünür yap
hataMesaji.style.display = "block";

// Opsiyonel: Konsola bilgi yazdır
console.log("Şifre alanı hatalı olarak işaretlendi.");

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Live Region Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

    <button onclick="kaydetVeDuyur()">Kaydet ve Durumu Duyur</button>

    <div aria-live="polite" aria-atomic="true" id="form-durum-mesaji">
        İşlem durumu: Bekleniyor...
    </div>

    <script src="script.js?v=1.0.150"></script>

</body>

</html>

#form-durum-mesaji {
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    margin-top: 15px;
    min-height: 20px;
    /* Görünür olması için minimum yükseklik */
}

button {
    padding: 10px 15px;
    background-color: #27ae60;
    color: white;
    border: none;
    cursor: pointer;
}

function kaydetVeDuyur() {
const liveRegion = document.getElementById("form-durum-mesaji");

// 1. Mesajı güncelleyerek canlı bölgenin içeriğini değiştir
liveRegion.textContent = "İşlem Başarılı! Verileriniz sunucuya kaydedildi.";

// 2. Bir süre sonra farklı bir durum mesajı yayınlayabiliriz (ekran okuyucu bunu tekrar duyurur)
setTimeout(() => {
  liveRegion.textContent = "İşlem durumu: Tamamlandı.";
}, 3000); // 3 saniye sonra güncellenir}

<link rel="stylesheet" href="style.css?v=1.0.150">

<div aria-live="polite" aria-atomic="true" id="form-durum-mesaji">
                                  İşlem durumu: Bekleniyor...
                              </div>

#form-durum-mesaji {
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    margin-top: 15px;
    min-height: 20px;
    /* Görünür olması için minimum yükseklik */
}

// 1. Mesajı güncelleyerek canlı bölgenin içeriğini değiştir
liveRegion.textContent = "İşlem Başarılı! Verileriniz sunucuya kaydedildi.";

// 2. Bir süre sonra farklı bir durum mesajı yayınlayabiliriz
setTimeout(() => {
  liveRegion.textContent = "İşlem durumu: Tamamlandı.";
}, 3000); // 3 saniye sonra güncellenir