[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-basit-html-form-ornekleri-dogrulama-ve-erisilebilirlik-ipuclari":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},28485,"Basit HTML Form Örnekleri: Doğrulama ve Erişilebilirlik İpuçları","Bu makale, basit HTML form örnekleri, HTML5 doğrulama yöntemleri, ARIA etiketleri ve erişilebilirlik uygulamaları sunar; ayrıca input type örnekleri ve POST/GET kullanımına dair uygulanabilir ipuçları içerir.","\u003Ch2>Basit HTML Form Örnekleri: Doğrulama ve Erişilebilirlik İpuçları\u003C/h2>\n\u003Cp>HTML formları, kullanıcıların web sayfalarıyla etkileşip veri göndermesini sağlar; doğru yapılandırıldıklarında hem kullanıcı deneyimini iyileştirir hem de verinin doğruluğunu artırır. Temel referans olarak HTML form elementi hakkında MDN belgesine bakabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form\">MDN: HTML form elementi\u003C/a>.\u003C/p>\n\n\u003Ch3>Temel kavramlar: action, method, input türleri\u003C/h3>\n\u003Cp>Bir formun en önemli iki özniteliği \u003Cstrong>action\u003C/strong> (verinin gönderileceği URL) ve \u003Cstrong>method\u003C/strong> (GET veya POST) öznitelikleridir. Input türleri (type) ise tarayıcı davranışını ve kullanıcı deneyimini değiştirir; örneğin \u003Cem>type=\"email\"\u003C/em> adres doğrulaması sağlar, \u003Cem>type=\"number\"\u003C/em> ise sayı girişine uygundur. \u003Cstrong>input type=\"hidden\"\u003C/strong> gibi türlerin davranışı için MDN kaynağını inceleyin: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden\">MDN: input type=\"hidden\"\u003C/a>.\u003C/p>\n\n\u003Ch3>Basit iletişim formu (örnek)\u003C/h3>\n\u003Cp>Aşağıda küçük, erişilebilir ve HTML5 doğrulama özniteliklerini kullanan bir iletişim formu örneği (işlevsel HTML kodu olarak gösterilmek üzere kaçışlandırılmıştır):\u003C/p>\n\u003Cp><form action=\"/contact\" method=\"post\">\u003Cbr>\n  <label for=\"name\">Adınız</label><br>\u003Cbr>\n  <input type=\"text\" id=\"name\" name=\"name\" required minlength=\"2\" maxlength=\"50\"><br>\u003Cbr>\n  <label for=\"email\">E-posta</label><br>\u003Cbr>\n  <input type=\"email\" id=\"email\" name=\"email\" required aria-describedby=\"email-help\"><br>\u003Cbr>\n  <small id=\"email-help\">E-posta adresinizi doğru yazın</small><br>\u003Cbr>\n  <button type=\"submit\">Gönder</button>\u003Cbr>\n</form>\u003C/p>\n\n\u003Ch3>HTML5 yerleşik doğrulama (form validation)\u003C/h3>\n\u003Cp>HTML5, birçok yaygın doğrulama ihtiyacını öznitelikler aracılığıyla karşılar. Kısa bir özet:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>required\u003C/strong>: Alanın boş bırakılamayacağını belirtir.\u003C/li>\n\u003Cli>\u003Cstrong>type\u003C/strong>: \u003Cem>email, url, number\u003C/em> gibi türler tarayıcı düzeyinde temel doğrulama sağlar.\u003C/li>\n\u003Cli>\u003Cstrong>min / max / step\u003C/strong>: sayısal ve tarih girdileri için sınırlar.\u003C/li>\n\u003Cli>\u003Cstrong>minlength / maxlength\u003C/strong>: metin uzunluğu sınırlamaları.\u003C/li>\n\u003Cli>\u003Cstrong>pattern\u003C/strong>: Regex tabanlı özel desen doğrulamaları (kullanıcıya yardımcı olacak bir \u003Cem>title\u003C/em> ile birlikte verilmesi önerilir).\u003C/li>\n\u003C/ul>\n\u003Cp>Bu yerleşik doğrulama kullanıcıya anında geri bildirim sunar, ancak istemci tarafı doğrulamanın tarayıcı tarafından atlanabileceğini unutmayın; bu nedenle her zaman sunucu tarafında da doğrulama yapmalısınız.\u003C/p>\n\n\u003Ch3>Örnek: e-posta ve özel desen\u003C/h3>\n\u003Cp>Bir e-posta alanı ve özel desen kullanan küçük örnek (kaçışlandırılmış):\u003C/p>\n\u003Cp><input type=\"email\" name=\"user_email\" required><br>\u003Cbr>\n<!-- Örnek: postal kodu (ülkeye göre değişir) -->\u003Cbr>\n<input type=\"text\" name=\"postal\" pattern=\"[0-9]{5}\" title=\"5 haneli posta kodu\" required>\u003C/p>\n\n\u003Ch3>Erişilebilirlik: ARIA ve etiket kullanımı\u003C/h3>\n\u003Cp>Erişilebilir formlar, ekran okuyucu ve klavye kullanıcıları için kritik öneme sahiptir. Temel öneriler:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong><label for=\"...\">\u003C/strong> kullanın; her giriş alanının görünür bir etiketi olsun. Görünür etiket yoksa \u003Cstrong>aria-label\u003C/strong> kullanın.\u003C/li>\n\u003Cli>\u003Cstrong>aria-describedby\u003C/strong> ile yardımcı metinleri bağlayın (ör. format ipuçları).\u003C/li>\n\u003Cli>Hata mesajlarını ekran okuyucuların fark etmesi için \u003Cstrong>role=\"alert\"\u003C/strong> veya \u003Cstrong>aria-live=\"assertive\"\u003C/strong> kullanmayı düşünün.\u003C/li>\n\u003Cli>Dinamik sonuçlar için HTML \u003Cstrong><output>\u003C/strong> öğesi yararlıdır; detaylar için MDN sayfası: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output\">MDN: output elementi\u003C/a>.\u003C/li>\n\u003C/ul>\n\u003Cp>Örnek (kaçışlandırılmış):\u003C/p>\n\u003Cp><label for=\"age\">Yaşınız</label><br>\u003Cbr>\n<input type=\"number\" id=\"age\" name=\"age\" aria-describedby=\"age-help\"><br>\u003Cbr>\n<small id=\"age-help\">18 ve üzeri olmalısınız</small>\u003C/p>\n\n\u003Ch3>Input type örnekleri ve notlar\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>text\u003C/strong>: Genel metin girişi.\u003C/li>\n\u003Cli>\u003Cstrong>email\u003C/strong>: Tarayıcı düzeyinde e-posta kontrolü sağlar.\u003C/li>\n\u003Cli>\u003Cstrong>tel\u003C/strong>: Telefon için; format kontrolü sunmaz ama mobilde tuş takımını açar.\u003C/li>\n\u003Cli>\u003Cstrong>number\u003C/strong>: min/max/step ile sayısal kontrol.\u003C/li>\n\u003Cli>\u003Cstrong>url\u003C/strong>: URL doğrulaması.\u003C/li>\n\u003Cli>\u003Cstrong>hidden\u003C/strong>: UI'de görünmeyen veri taşımak için kullanılır (örn. form meta verisi); MDN: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden\">input type=\"hidden\"\u003C/a>.\u003C/li>\n\u003Cli>\u003Cstrong>reset\u003C/strong>: Formu varsayılan değerlerine döndürür; davranışı hakkında MDN: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset\">input type=\"reset\"\u003C/a>.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>POST ve GET örnekleri\u003C/h3>\n\u003Cp>\u003Cstrong>GET\u003C/strong> arama ve filtreleme gibi idempotent istekler için uygundur; tarayıcı adres çubuğuna sorgu ekler. \u003Cstrong>POST\u003C/strong> ise form verilerini gizleyerek sunucuya gönderir; genellikle kayıt/güncelleme işlemleri için tercih edilir. Örnek kullanım:\u003C/p>\n\u003Cp><form action=\"/search\" method=\"get\">...</form>  (arama formu)\u003Cbr>\n<form action=\"/signup\" method=\"post\">...</form>  (kayıt formu)\u003C/p>\n\n\u003Ch3>Kısa kontrol listesi: Yaygın iyi uygulamalar\u003C/h3>\n\u003Cul>\n\u003Cli>Her alan için görünür \u003Cstrong><label>\u003C/strong> kullanın veya \u003Cstrong>aria-label\u003C/strong> ekleyin.\u003C/li>\n\u003Cli>Doğru \u003Cstrong>type\u003C/strong> kullanın (email, tel, number vb.).\u003C/li>\n\u003Cli>Zorunlu alanlarda \u003Cstrong>required\u003C/strong> kullanın, uzunluk için \u003Cstrong>minlength/maxlength\u003C/strong> ekleyin.\u003C/li>\n\u003Cli>Sunucu tarafı doğrulamayı asla atlamayın; istemci doğrulaması kullanıcı deneyimini iyileştirir ama tek başına yeterli değildir.\u003C/li>\n\u003Cli>Hata mesajlarını erişilebilir biçimde sunun (role/aria-live).\u003C/li>\n\u003Cli>Formu klavye ile test edin ve ekran okuyucu ile kontrol edin.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Test ve denetleme\u003C/h3>\n\u003Cp>Tarayıcı geliştirici araçlarıyla formun gönderimini test edin, farklı input türleri ve sınır değerleri deneyin. Erişilebilirlik kontrolü için klavye ile tüm elementlere ulaşabildiğinizi doğrulayın ve ekran okuyucu ile formun mantığını kontrol edin.\u003C/p>\n\n\u003Chr>\n\u003Ch3>Sonuç\u003C/h3>\n\u003Cp>Basit ama iyi yapılandırılmış formlar, doğrulama ve erişilebilirlik ilkeleri uygulandığında kullanıcı memnuniyetini artırır ve veri kalitesini yükseltir. HTML5’in sunduğu \u003Cem>type\u003C/em> ve doğrulama özniteliklerini kullanarak hızlı geri bildirim sağlayabilir; ARIA ve uygun etiketlerle erişilebilirliği güçlendirebilirsiniz. Daha fazla teknik detay ve referans için MDN sayfalarını inceleyin: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form\">form elementi\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden\">input hidden\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output\">output elementi\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset\">input reset\u003C/a>.\u003C/p>\n\u003Cp>\u003Cstrong>Not:\u003C/strong> Bu rehber pratik uygulamalar ve örnekler sunar; güvenlik ve doğrulama için üretim uygulamalarında sunucu tarafı kontrolleri, girdi temizleme ve profesyonel güvenlik incelemeleri yapılması önerilir.\u003C/p>","Basit HTML Form Örnekleri: Doğrulama ve Erişilebilirlik İpuç","Basit HTML form örnekleri, HTML5 doğrulama öznitelikleri ve erişilebilirlik (ARIA) ipuçları. Form yapıları, input türleri ve POST/GET kullanımını uygulamalı örn","kodlama yapısı örnekleri, form validation, aria etiketleri, input type örnekleri, POST GET örnekleri","basit-html-form-ornekleri-dogrulama-ve-erisilebilirlik-ipuclari","2026-04-16T09:03:53.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/8e411e4ae03050b626a1a021241cd16e.jpg","/media/blog/8e411e4ae03050b626a1a021241cd16e_thumb.jpg","/media/blog/8e411e4ae03050b626a1a021241cd16e.webp","/media/blog/8e411e4ae03050b626a1a021241cd16e_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,791,0,"4 dk okuma süresi","/blog/html-form-ornekleri/basit-html-form-ornekleri-dogrulama-ve-erisilebilirlik-ipuclari",[],["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/8e411e4ae03050b626a1a021241cd16e.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-form-ornekleri/basit-html-form-ornekleri-dogrulama-ve-erisilebilirlik-ipuclari",{"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/basit-html-form-ornekleri-dogrulama-ve-erisilebilirlik-ipuclari",["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":30,"name":7,"item":65}]