[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-html-formlari-giris-alanlari-dogrulama-ve-erisilebilirlik-ornekleri":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},21214,"HTML Formları: Giriş Alanları, Doğrulama ve Erişilebilirlik Örnekleri","Bu rehber, HTML form alan türlerini doğru seçmeyi, yerleşik doğrulamayı (required, pattern, minlength/maxlength) kullanmayı ve Constraint Validation API ile özel hata mesajları üretmeyi açıklar. Ayrıca label etiketleme ve ARIA nitelikleriyle erişilebilir form yapısına örnekler verir.","\u003Cp>HTML formları, kullanıcıdan veri toplamanın en yaygın yoludur. Ancak “çalışan bir form” ile “kolay doldurulan, anlaşılır hatalar veren ve erişilebilir bir form” arasında büyük fark vardır. Bu yazıda, \u003Cem>kodlama yapısı örnekleri\u003C/em> üzerinden üç ana konuyu birlikte ele alacağız: doğru giriş alanı türlerini seçme (\u003Cem>input types\u003C/em>), yerleşik form doğrulaması (\u003Cem>form validation\u003C/em>) ve erişilebilir etiketleme (\u003Cem>ARIA\u003C/em> nitelikleri).\u003C/p>\n\u003Cp>Not: Tarayıcıların yerleşik doğrulama mesajları ve bazı input davranışları değişkenlik gösterebilir. Kritik doğrulamaları her zaman sunucu tarafında da tekrar etmek iyi bir uygulamadır. MDN, HTML’nin yerleşik kısıt doğrulamasını ve Constraint Validation API’yi bu çerçevede anlatır. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN Constraint validation)\u003C/a>\u003C/p>\n\u003Chr>\n\u003Ch2>1) Doğru input türünü seçmek: veri kalitesi ve kullanıcı deneyimi\u003C/h2>\n\u003Cp>Birçok doğrulama ihtiyacını, JavaScript yazmadan sadece doğru \u003Cstrong>type\u003C/strong> seçerek karşılayabilirsiniz. Örneğin \u003Cstrong>type=\"email\"\u003C/strong> e‑posta formatına dair temel bir kontrol sağlar ve mobil cihazlarda uygun klavyeyi açabilir. Benzer şekilde \u003Cstrong>type=\"number\"\u003C/strong> sayı girişi için tarayıcıya ipucu verir. \u003Ca href=\"https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/input\">(MDN <input>)\u003C/a>\u003C/p>\n\u003Ch3>Yaygın input türleri ve ne zaman kullanılmalı?\u003C/h3>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Tür\u003C/th>\n\u003Cth>Ne için uygun?\u003C/th>\n\u003Cth>Pratik not\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>text\u003C/strong>\u003C/td>\n\u003Ctd>Genel metin\u003C/td>\n\u003Ctd>Ek kısıtlar için \u003Cem>minlength\u003C/em>, \u003Cem>maxlength\u003C/em>, \u003Cem>pattern\u003C/em> ekleyin.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>email\u003C/strong>\u003C/td>\n\u003Ctd>E‑posta adresi\u003C/td>\n\u003Ctd>Temel format kontrolü sağlar; yine de sunucuda doğrulayın. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN)\u003C/a>\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>tel\u003C/strong>\u003C/td>\n\u003Ctd>Telefon\u003C/td>\n\u003Ctd>Format ülkeye göre değişir; genelde \u003Cem>pattern\u003C/em> + açıklama metni gerekir.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>url\u003C/strong>\u003C/td>\n\u003Ctd>Web adresi\u003C/td>\n\u003Ctd>Tarayıcı URL formatına dair kontrol yapabilir.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>number\u003C/strong>\u003C/td>\n\u003Ctd>Sayı\u003C/td>\n\u003Ctd>\u003Cem>min\u003C/em>, \u003Cem>max\u003C/em>, \u003Cem>step\u003C/em> ile aralık belirleyin; tarayıcı farkları olabilir.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>date\u003C/strong>\u003C/td>\n\u003Ctd>Tarih\u003C/td>\n\u003Ctd>Tarih seçici arayüz tarayıcıya göre değişebilir; düz metin alternatifleri düşünün.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>password\u003C/strong>\u003C/td>\n\u003Ctd>Parola\u003C/td>\n\u003Ctd>\u003Cem>minlength\u003C/em> ve açıklayıcı yardım metni ekleyin; hata mesajlarını net tutun.\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\n\u003Ch3>Doğru alan adı (name) ve autocomplete: “görünmeyen” kalite artışı\u003C/h3>\n\u003Cp>Form alanlarınızın \u003Cstrong>name\u003C/strong> değerleri sunucu tarafı işleme için önemlidir. Ayrıca \u003Cstrong>autocomplete\u003C/strong> ipuçları (ör. \u003Cem>email\u003C/em>, \u003Cem>given-name\u003C/em>) uygun senaryolarda kullanıcıların formu daha hızlı doldurmasına yardımcı olabilir. Yine de otomatik doldurmayı her senaryoda varsaymak doğru değildir (ör. paylaşımlı cihazlar).\u003C/p>\n\u003Chr>\n\u003Ch2>2) Yerleşik doğrulama (Constraint Validation): required, pattern ve diğerleri\u003C/h2>\n\u003Cp>HTML, form kontrolleri için “kısıt doğrulama” (constraint validation) adı verilen bir sistem sunar. Bu sistem, alan türüne bağlı kontrolleri (ör. email formatı) ve niteliklerle eklediğiniz kısıtları (required, minlength, pattern gibi) birlikte değerlendirir. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN Constraint validation)\u003C/a>\u003C/p>\n\u003Ch3>En kullanışlı doğrulama nitelikleri\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>required\u003C/strong>: Alan boş bırakılamaz.\u003C/li>\n\u003Cli>\u003Cstrong>minlength\u003C/strong> / \u003Cstrong>maxlength\u003C/strong>: Metin uzunluğu sınırı.\u003C/li>\n\u003Cli>\u003Cstrong>min\u003C/strong> / \u003Cstrong>max\u003C/strong> / \u003Cstrong>step\u003C/strong>: Sayısal aralık ve adım.\u003C/li>\n\u003Cli>\u003Cstrong>pattern\u003C/strong>: Düzenli ifade ile biçim kısıtı (özellikle text/tel için).\u003C/li>\n\u003C/ul>\n\u003Ch3>pattern kullanırken kullanıcıya yardımcı olma\u003C/h3>\n\u003Cp>\u003Cstrong>pattern\u003C/strong> güçlüdür, ancak kullanıcı “hangi formatı” beklediğinizi anlayamazsa hata mesajı döngüsü oluşur. Bu yüzden pattern ile birlikte kısa bir açıklama metni vermek ve bunu \u003Cstrong>aria-describedby\u003C/strong> ile alana bağlamak iyi bir yaklaşımdır. WebAIM, yardım metinleri ve açıklamaların kullanıcıya programatik olarak iliştirilmesini önerir. \u003Ca href=\"https://webaim.org/techniques/forms/\">(WebAIM Accessible Forms)\u003C/a>\u003C/p>\n\u003Cp>Aşağıdaki örnek, ABD odaklı bir posta kodu formatını (5 haneli veya 5+4) hedefler. Bu bir “örnek”tir; gerçek ürününüzde hedeflediğiniz ülkeye göre kuralı netleştirin.\u003C/p>\n\u003Cblockquote>\n\u003Cp><label for="zip">ZIP Code</label>\u003Cbr>\n<input id="zip" name="zip" type="text" inputmode="numeric"\u003Cbr>\n  required pattern="^\\d{5}(-\\d{4})?$" aria-describedby="zip_help">\u003Cbr>\n<p id="zip_help">Format: 12345 veya 12345-6789</p>\u003C/p>\n\u003C/blockquote>\n\u003Cp>\u003Cem>İpucu:\u003C/em> \u003Cstrong>inputmode\u003C/strong> gibi ipuçları klavye deneyimini iyileştirebilir; doğrulama mantığı yerine geçmez.\u003C/p>\n\u003Ch3>Yerleşik doğrulama mesajları neden tek başına yeterli değildir?\u003C/h3>\n\u003Cul>\n\u003Cli>Tarayıcılar hata mesajlarını farklı metinlerle ve farklı zamanlarda gösterebilir. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN)\u003C/a>\u003C/li>\n\u003Cli>Mesajlar yerelleştirilebilir; ürününüz Türkçe olsa bile kullanıcı İngilizce tarayıcı kullanıyor olabilir.\u003C/li>\n\u003Cli>Sunucu tarafında aynı kuralları uygulamazsanız veri kalitesi düşer (ve bazı durumlarda iş mantığınız bozulabilir).\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>3) Constraint Validation API: özel hata mesajı ve kontrollü akış\u003C/h2>\n\u003Cp>HTML’nin yerleşik doğrulaması çoğu durumda yeterlidir; ama bazen \u003Cstrong>özel hata mesajı\u003C/strong> göstermek, birden fazla alanı birlikte değerlendirmek veya hata anında odak yönetimi yapmak istersiniz. MDN, bunun için Constraint Validation API’nin temel yöntemlerini öne çıkarır: \u003Cstrong>checkValidity()\u003C/strong>, \u003Cstrong>reportValidity()\u003C/strong> ve \u003Cstrong>setCustomValidity()\u003C/strong>. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN Constraint Validation API)\u003C/a>\u003C/p>\n\u003Ch3>Temel yöntemler ne işe yarar?\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>checkValidity()\u003C/strong>: Alan/forma ait kurallar geçerli mi diye kontrol eder; görsel mesaj göstermeyebilir.\u003C/li>\n\u003Cli>\u003Cstrong>reportValidity()\u003C/strong>: Geçerli değilse tarayıcının yerleşik hata arayüzünü tetikleyebilir.\u003C/li>\n\u003Cli>\u003Cstrong>setCustomValidity(message)\u003C/strong>: Kendi hata mesajınızı atar (boş string verirseniz özel hata kalkar).\u003C/li>\n\u003C/ul>\n\u003Ch3>Örnek: parola kurallarını kullanıcı dostu mesajla anlatmak\u003C/h3>\n\u003Cp>Aşağıdaki JavaScript parçası, “en az 12 karakter” gibi bir kuralı kullanıcıya net bir mesajla iletmek için \u003Cstrong>setCustomValidity\u003C/strong> kullanır. Bu kodu genellikle ayrı bir JS dosyasında ya da sayfada uygun bir yerde çalıştırırsınız (bu yazıda sadece örnek olarak metin şeklinde veriliyor).\u003C/p>\n\u003Cblockquote>\n\u003Cp>const password = document.querySelector('#password');\u003Cbr>\npassword.addEventListener('input', () => {\u003Cbr>\n  if (password.value.length < 12) {\u003Cbr>\n    password.setCustomValidity('Parola en az 12 karakter olmalı.');\u003Cbr>\n  } else {\u003Cbr>\n    password.setCustomValidity('');\u003Cbr>\n  }\u003Cbr>\n});\u003C/p>\n\u003C/blockquote>\n\u003Cp>Bu yaklaşımın avantajı, tarayıcıya “geçersiz” durumunu standart mekanizma üzerinden iletmesidir. Yani alanın \u003Cem>validity\u003C/em> durumu değişir ve form gönderimi engellenebilir. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN)\u003C/a>\u003C/p>\n\u003Ch3>Ne zaman novalidate kullanılır?\u003C/h3>\n\u003Cp>Bazen tüm doğrulamayı kendiniz yönetmek istersiniz. Bu durumda form üzerinde \u003Cstrong>novalidate\u003C/strong> kullanarak tarayıcı yerleşik doğrulamasını devre dışı bırakabilirsiniz. Ancak bu, erişilebilir hata mesajları ve odak yönetimi sorumluluğunu tamamen size taşır. Yerleşik doğrulama ile başlamanız, sonra ihtiyaç oldukça API ile zenginleştirmeniz çoğu ekip için daha güvenli bir yoldur.\u003C/p>\n\u003Chr>\n\u003Ch2>4) Erişilebilirlik temeli: önce label, sonra gerekirse ARIA\u003C/h2>\n\u003Cp>Form erişilebilirliğinde en kritik konu, her kontrolün \u003Cstrong>programatik olarak iliştirilmiş bir etikete\u003C/strong> sahip olmasıdır. W3C’nin WAI-ARIA Authoring Practices dokümanı ve WebAIM rehberi, mümkün olduğunda görünür \u003Cstrong>label\u003C/strong> kullanımını öncelikli yaklaşım olarak ele alır. Çünkü label hem ekran okuyucuya isim sağlar hem de tıklanabilir alanı büyütebilir. \u003Ca href=\"https://www.w3.org/TR/2021/NOTE-wai-aria-practices-1.2-20211129/\">(WAI-ARIA APG 1.2)\u003C/a> \u003Ca href=\"https://webaim.org/techniques/forms/\">(WebAIM)\u003C/a>\u003C/p>\n\u003Ch3>Doğru label bağlama: for + id\u003C/h3>\n\u003Cblockquote>\n\u003Cp><label for="email">E-posta</label>\u003Cbr>\n<input id="email" name="email" type="email" autocomplete="email" required>\u003C/p>\n\u003C/blockquote>\n\u003Ch3>Placeholder neden etiket yerine geçmez?\u003C/h3>\n\u003Cp>Placeholder metni, kullanıcı yazmaya başladığında kaybolur ve kalıcı bir alan adı (label) gibi davranmaz. Ayrıca placeholder’ın bir “etiket” gibi yardımcı teknolojiler tarafından duyurulması bazı kombinasyonlarda mümkün olsa da bu davranış \u003Cem>tutarlı ve güvenilir\u003C/em> değildir; bu yüzden erişilebilir adlandırma için placeholder’a güvenmek doğru değildir. MDN ve WebAIM, placeholder’ın etiket yerine kullanılmaması gerektiği konusunda uyarır. \u003Ca href=\"https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/input\">(MDN <input>)\u003C/a> \u003Ca href=\"https://webaim.org/techniques/forms/\">(WebAIM)\u003C/a>\u003C/p>\n\u003Cp>Placeholder’ı, ancak etikete ek bir örnek vermek için (örn. “name@example.com”) destekleyici unsur olarak düşünün.\u003C/p>\n\u003Ch3>ARIA’yı ne zaman kullanmalı? (aria-label, aria-labelledby, aria-describedby)\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>aria-label\u003C/strong>: Görsel etiketin olmadığı (ve tasarımsal olarak olamayacağı) nadir durumlarda kısa bir isim vermek için.\u003C/li>\n\u003Cli>\u003Cstrong>aria-labelledby\u003C/strong>: Alan adını sayfadaki mevcut bir metinden (başlık, satır adı gibi) türetmek için.\u003C/li>\n\u003Cli>\u003Cstrong>aria-describedby\u003C/strong>: Yardım metni, format açıklaması veya hata açıklamasını alana bağlamak için.\u003C/li>\n\u003C/ul>\n\u003Cp>Önemli: ARIA “ek güç” gibi görünse de yanlış kullanımı yeni erişilebilirlik sorunları yaratabilir. Bu nedenle önce semantik HTML (label, doğru type, doğru name) ve ancak gerektiğinde ARIA yaklaşımı daha sürdürülebilirdir. \u003Ca href=\"https://webaim.org/techniques/forms/\">(WebAIM)\u003C/a> \u003Ca href=\"https://www.w3.org/TR/2021/NOTE-wai-aria-practices-1.2-20211129/\">(WAI-ARIA APG)\u003C/a>\u003C/p>\n\u003Ch3>Örnek: yardım metni ve hata metnini aria-describedby ile iliştirmek\u003C/h3>\n\u003Cp>Aşağıdaki yapıda, yardım metni her zaman okunabilir; hata metni ise JS ile doldurulabilir. (Hata metnini nasıl yöneteceğiniz tasarımınıza bağlıdır; önemli olan ilişkilendirmedir.)\u003C/p>\n\u003Cblockquote>\n\u003Cp><label for="phone">Telefon</label>\u003Cbr>\n<input id="phone" name="phone" type="tel"\u003Cbr>\n  aria-describedby="phone_help phone_error"\u003Cbr>\n  pattern="^\\+?1?\\s?\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}$">\u003Cbr>\n<p id="phone_help">Örnek: (555) 123-4567</p>\u003Cbr>\n<p id="phone_error"></p>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Bu pattern, belirli ABD telefon yazımlarını hedefleyen bir örnektir; gerçek dünyada daha esnek kabul kriterleri gerekebilir. Her durumda, format beklentinizi yardım metninde açıkça söyleyin.\u003C/p>\n\u003Chr>\n\u003Ch2>5) Uçtan uca örnek: erişilebilir ve doğrulamalı basit kayıt formu\u003C/h2>\n\u003Cp>Aşağıdaki örnek, yerleşik doğrulama niteliklerini ve etiketleme en iyi uygulamalarını bir araya getirir. Üretimde, sunucu tarafında da aynı kontrolleri uygulamayı ve hata metinlerini tutarlı bir dille sunmayı planlayın.\u003C/p>\n\u003Cblockquote>\n\u003Cp><form action="https://example.com/signup" method="post">\u003Cbr>\n  <h3>Hesap oluştur</h3>\u003Cbr>\n\u003Cbr>\n  <label for="first_name">Ad</label>\u003Cbr>\n  <input id="first_name" name="first_name" type="text"\u003Cbr>\n    autocomplete="given-name" required minlength="2">\u003Cbr>\n\u003Cbr>\n  <label for="email">E-posta</label>\u003Cbr>\n  <input id="email" name="email" type="email"\u003Cbr>\n    autocomplete="email" required>\u003Cbr>\n\u003Cbr>\n  <label for="password">Parola</label>\u003Cbr>\n  <input id="password" name="password" type="password"\u003Cbr>\n    required minlength="12" aria-describedby="pw_help">\u003Cbr>\n  <p id="pw_help">En az 12 karakter. Mümkünse uzun bir parola cümlesi kullanın.</p>\u003Cbr>\n\u003Cbr>\n  <label for="tos">\u003Cbr>\n    <input id="tos" name="tos" type="checkbox" required>\u003Cbr>\n    Şartları kabul ediyorum\u003Cbr>\n  </label>\u003Cbr>\n\u003Cbr>\n  <p>Gönder butonu ve tasarım öğeleri ürününüze göre eklenmelidir.</p>\u003Cbr>\n</form>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Örnek URL, sadece gösterim amaçlıdır. Kendi uygulamanızda, gönderim endpoint’inizi ve CSRF gibi güvenlik gereksinimlerinizi çerçevenize uygun şekilde ele alın.\u003C/p>\n\u003Chr>\n\u003Ch2>6) Tarayıcı farklılıkları ve test kontrol listesi\u003C/h2>\n\u003Cp>MDN, yerleşik doğrulama mesajlarının ve bazı input davranışlarının tarayıcılar arasında değişebildiğini belirtir. Bu yüzden “bende çalışıyor” yeterli bir kriter değildir. \u003Ca href=\"https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/input\">(MDN <input>)\u003C/a> \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN Constraint validation)\u003C/a>\u003C/p>\n\u003Ch3>Hızlı test kontrol listesi\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>En az iki tarayıcı\u003C/strong>: Chrome + Firefox (ve mümkünse Safari) ile aynı senaryoları deneyin.\u003C/li>\n\u003Cli>\u003Cstrong>Klavye ile kullanım\u003C/strong>: Tab sırası mantıklı mı? Odak görünür mü? Alanlar doğru sırada mı?\u003C/li>\n\u003Cli>\u003Cstrong>Ekran okuyucu duman testi\u003C/strong>: Alan adları okunuyor mu? Yardım metni (aria-describedby) alanla birlikte anılıyor mu?\u003C/li>\n\u003Cli>\u003Cstrong>Hata senaryoları\u003C/strong>: Boş required alan, pattern ihlali, kısa parola gibi durumlarda kullanıcı ne yapacağını anlıyor mu?\u003C/li>\n\u003Cli>\u003Cstrong>Mobil klavye\u003C/strong>: email/tel/number gibi type’lar doğru klavyeyi açıyor mu?\u003C/li>\n\u003C/ul>\n\u003Ch3>Sunucu tarafı doğrulama hatalarını nasıl yansıtmalı?\u003C/h3>\n\u003Cp>Yerleşik doğrulama, kullanıcı daha formu göndermeden birçok hatayı yakalayabilir; ama sunucudan dönen hata (ör. “bu e‑posta zaten kayıtlı”) gibi durumlar için de plan gerekir. Bu noktada:\u003C/p>\n\u003Cul>\n\u003Cli>Hata mesajını ilgili alanın yakınına yerleştirin.\u003C/li>\n\u003Cli>Mesajı \u003Cstrong>aria-describedby\u003C/strong> ile alana bağlayın (ve gerekiyorsa odağı hatalı alana taşıyın).\u003C/li>\n\u003Cli>Mesajın dili kısa, eyleme dönük ve teknik olmayan bir dille yazılmış olsun.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>7) Sık sorulan sorular\u003C/h2>\n\u003Ch3>required ve pattern birlikte nasıl çalışır?\u003C/h3>\n\u003Cp>Alan boşsa \u003Cstrong>required\u003C/strong> kuralı ihlal edilir; alan doluysa bu kez değer \u003Cstrong>pattern\u003C/strong> ile eşleşmek zorundadır. Bu mantık, HTML’nin yerleşik kısıt doğrulamasının (constraint validation) parçasıdır. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN)\u003C/a>\u003C/p>\n\u003Ch3>setCustomValidity ne zaman kullanılır?\u003C/h3>\n\u003Cp>Tarayıcının varsayılan mesajı yetersiz kaldığında (ör. ürün diline uygun, daha açıklayıcı bir mesaj istediğinizde) veya birden fazla koşulu daha anlaşılır tek bir mesajla anlatmak istediğinizde \u003Cstrong>setCustomValidity()\u003C/strong> kullanabilirsiniz. Mesajı temizlemek için boş string verilir. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN)\u003C/a>\u003C/p>\n\u003Ch3>aria-label ile label arasında hangisini seçmeliyim?\u003C/h3>\n\u003Cp>Mümkünse görünür \u003Cstrong>label\u003C/strong> tercih edilir; ARIA adlandırması (ör. \u003Cstrong>aria-label\u003C/strong>) daha çok görünür etiketin tasarımsal olarak olamayacağı istisnai durumlar için düşünülmelidir. \u003Ca href=\"https://webaim.org/techniques/forms/\">(WebAIM)\u003C/a> \u003Ca href=\"https://www.w3.org/TR/2021/NOTE-wai-aria-practices-1.2-20211129/\">(WAI-ARIA APG)\u003C/a>\u003C/p>\n\u003Chr>\n\u003Ch2>Sonuç: sürdürülebilir bir form mimarisi için kısa reçete\u003C/h2>\n\u003Cp>İyi bir HTML formu, sadece veri toplamaz; kullanıcıyı doğru alana yönlendirir, hatayı anlaşılır biçimde açıklar ve yardımcı teknolojilerle uyumlu çalışır. Başlangıç için şu sırayı izlemek genelde en verimli yaklaşımdır:\u003C/p>\n\u003Col>\n\u003Cli>Doğru \u003Cstrong>input type\u003C/strong> seçin. \u003Ca href=\"https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/input\">(MDN)\u003C/a>\u003C/li>\n\u003Cli>Yerleşik kısıtları (\u003Cstrong>required\u003C/strong>, \u003Cstrong>minlength\u003C/strong>, \u003Cstrong>pattern\u003C/strong>) ekleyin. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN)\u003C/a>\u003C/li>\n\u003Cli>Her alanı görünür \u003Cstrong>label\u003C/strong> ile etiketleyin; placeholder’ı etiket yerine kullanmayın. \u003Ca href=\"https://webaim.org/techniques/forms/\">(WebAIM)\u003C/a>\u003C/li>\n\u003Cli>Yardım ve hata metinlerini \u003Cstrong>aria-describedby\u003C/strong> ile iliştirin; ARIA’yı gerektiğinde kullanın. \u003Ca href=\"https://www.w3.org/TR/2021/NOTE-wai-aria-practices-1.2-20211129/\">(WAI-ARIA APG)\u003C/a>\u003C/li>\n\u003Cli>Gerektiğinde Constraint Validation API ile mesajları özelleştirin ve akışı kontrol edin. \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation\">(MDN)\u003C/a>\u003C/li>\n\u003Cli>Tarayıcı/cihaz farkları için mutlaka test edin ve sunucu tarafında doğrulamayı tekrarlayın.\u003C/li>\n\u003C/ol>\n\u003Cp>Bu yaklaşım, bakım maliyetini düşürür ve kullanıcıların formu daha az sürtünmeyle tamamlamasına yardımcı olur.\u003C/p>","HTML Form Doğrulama: Input Türleri, Validation API ve ARIA","HTML form doğrulama için input türleri, required/pattern/minlength kuralları, Constraint Validation API ile özel mesajlar ve ARIA ile erişilebilir etiketleme.","HTML form, HTML form doğrulama, input types, form validation, Constraint Validation API, required, pattern, minlength, maxlength, checkValidity, reportValidity, setCustomValidity, label, aria-label, aria-labelledby","html-formlari-giris-alanlari-dogrulama-ve-erisilebilirlik-ornekleri","2026-03-09T13:57:11.000Z",{"id":16,"title":17,"slug":18},211,"HTML Form Örnekleri","html-form-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},93,"Onur Tekin","CodeCraftsman","onur-tekin","/media/blog/4e4d5932bcd2128595e43d58686a347b.jpg","/media/blog/4e4d5932bcd2128595e43d58686a347b_thumb.jpg","/media/blog/4e4d5932bcd2128595e43d58686a347b.webp","/media/blog/4e4d5932bcd2128595e43d58686a347b_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},10,1877,0,"10 dk okuma süresi","/blog/html-form-ornekleri/html-formlari-giris-alanlari-dogrulama-ve-erisilebilirlik-ornekleri",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/4e4d5932bcd2128595e43d58686a347b.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-form-ornekleri/html-formlari-giris-alanlari-dogrulama-ve-erisilebilirlik-ornekleri",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/html-form-ornekleri/html-formlari-giris-alanlari-dogrulama-ve-erisilebilirlik-ornekleri",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/onur-tekin",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/html-form-ornekleri",{"@type":102,"position":114,"name":7,"item":65},4]