[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-html-form-ornekleri-giris-alanlari-dogrulama-ve-erisilebilirlik":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},41168,"HTML Form Örnekleri: Giriş Alanları, Doğrulama ve Erişilebilirlik","Bu rehber, HTML form örnekleri ve HTML5 input türleriyle client-side doğrulama ve erişilebilirlik uygulamaları için pratik adımlar ve kontrol listeleri sunar.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>HTML formları, kullanıcıdan veri toplamak için temel yapılardır; doğru kullanıldığında hem kullanıcı deneyimini hem de erişilebilirliği artırır ve tarayıcı düzeyindeki doğrulama özelliklerinden faydalanır. Bu makalede temel input türlerini, HTML5 doğrulama niteliklerini ve erişilebilirlik uygulamalarını pratik örneklerle göstereceğiz. Temel referans olarak MDN Web Docs'un form ve input belgelerine bakabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form\">MDN — form\u003C/a> ve \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input\">MDN — input\u003C/a>.\u003C/p>\n\n\u003Ch2>Temel input türleri ve ne için kullanılmalı\u003C/h2>\n\u003Cp><input> etiketi, farklı türlerde veri kabul etmek için çeşitli \u003Cstrong>type\u003C/strong> değerleriyle kullanılır. Doğru türü seçmek kullanıcıya uygun bir klavye/arayüz sağlar ve tarayıcının basit doğrulamasından yararlanmanıza yardımcı olur (ör. \u003Cem>email\u003C/em>, \u003Cem>url\u003C/em>, \u003Cem>number\u003C/em>). Daha fazla bilgi için MDN giriş türleri sayfasına bakın: \u003Ca href=\"https://developer.mozilla.org/sv-SE/docs/Learn/Forms/HTML5_input_types\">MDN — HTML5 input types\u003C/a>.\u003C/p>\n\n\u003Cul>\n  \u003Cli>\n    \u003Cstrong>Tek satırlık metin (text)\u003C/strong>\n    \u003Cp>Genel amaçlı kısa metinler için kullanılır. Örnek: <label>Adınız: <input type=\"text\" name=\"name\" required></label>.\u003C/p>\n  \u003C/li>\n  \u003Cli>\n    \u003Cstrong>E-posta (email)\u003C/strong>\n    \u003Cp>Tarayıcı, temel biçim doğrulaması sağlar. Örnek: <label>E-posta: <input type=\"email\" name=\"email\" required></label>.\u003C/p>\n  \u003C/li>\n  \u003Cli>\n    \u003Cstrong>Sayısal giriş (number)\u003C/strong>\n    \u003Cp>Sayı aralıkları için \u003Cem>min\u003C/em>, \u003Cem>max\u003C/em>, \u003Cem>step\u003C/em> nitelikleriyle birlikte kullanılır. Örnek: <input type=\"number\" name=\"age\" min=\"0\" max=\"120\">.\u003C/p>\n  \u003C/li>\n  \u003Cli>\n    \u003Cstrong>Telefon (tel) ve URL (url)\u003C/strong>\n    \u003Cp>Telefon ve web adresleri için uygun türler; tarayıcı otomatik fikirleri ve mobil klavye optimizasyonu sağlar. Örnek: <input type=\"tel\" name=\"phone\"> ve <input type=\"url\" name=\"website\">.\u003C/p>\n  \u003C/li>\n  \u003Cli>\n    \u003Cstrong>Seçimler: checkbox, radio, select, textarea\u003C/strong>\n    \u003Cp>Birden fazla seçenek veya çok satırlı metin için kullanılır. Örnek: <textarea name=\"message\" minlength=\"10\"></textarea> ve <select>...</select>.\u003C/p>\n  \u003C/li>\n  \u003Cli>\n    \u003Cstrong>Diğer yararlı türler\u003C/strong>\n    \u003Cp>\u003Cem>date\u003C/em>, \u003Cem>datetime-local\u003C/em>, \u003Cem>time\u003C/em>, \u003Cem>color\u003C/em>, \u003Cem>range\u003C/em>, \u003Cem>file\u003C/em> gibi türler kullanıcı deneyimini artırır; her tarayıcı destek seviyesi farklı olabilir.\u003C/p>\n  \u003C/li>\n\u003C/ul>\n\n\u003Ch2>Doğrulama: HTML nitelikleri ve tarayıcı davranışı\u003C/h2>\n\u003Cp>HTML5 ile gelen doğrulama nitelikleri, basit kuralları tarayıcı seviyesinde kontrol etmenizi sağlar. Yaygın nitelikler şunlardır: \u003Cstrong>required\u003C/strong>, \u003Cstrong>minlength\u003C/strong>, \u003Cstrong>maxlength\u003C/strong>, \u003Cstrong>pattern\u003C/strong>, \u003Cstrong>min\u003C/strong>, \u003Cstrong>max\u003C/strong> ve \u003Cstrong>step\u003C/strong>. Örnek: <input type=\"password\" name=\"pwd\" minlength=\"8\" required>.\u003C/p>\n\n\u003Cp>Örnek e-posta doğrulaması (tarayıcı temel sentaks kontrolü yapar): <label>E-posta: <input type=\"email\" name=\"email\" required></label>.\u003C/p>\n\n\u003Cp>Not: HTML nitelikleri iyi bir ilk savunma sağlar ancak tek başına yeterli değildir; sunucu tarafı doğrulama her zaman gereklidir. (Kaynak: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text\">MDN — input türleri ve doğrulama\u003C/a>).\u003C/p>\n\n\u003Ch2>Erişilebilirlik (Accessibility) için en iyi uygulamalar\u003C/h2>\n\u003Cp>Erişilebilir formlar, tüm kullanıcıların (ekran okuyucu kullananlar dahil) formu anlamasını ve doldurmasını sağlar. Temel öneriler:\u003C/p>\n\n\u003Cul>\n  \u003Cli>\u003Cstrong>Her kontrol için label kullanın.\u003C/strong> <label> etiketleri ekran okuyucular için anahtar rol oynar. Label ile input eşleştirmenin iki yolu vardır: label sarmalama ya da \u003Cem>for\u003C/em> + \u003Cem>id\u003C/em> kullanımı. (Kaynak: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types\">MDN — form erişilebilirliği\u003C/a>).\u003C/li>\n  \u003Cli>\u003Cstrong>Gruplandırma:\u003C/strong> İlgili radio/checkbox seçeneklerini <fieldset> ve <legend> ile gruplayın.\u003C/li>\n  \u003Cli>\u003Cstrong>Hata mesajlarını erişilebilir hale getirin.\u003C/strong> Hata açıklamalarını bir öğe ile (ör. <div id=\"email-error\">...) sağlayıp input'un \u003Cem>aria-describedby\u003C/em> ile ona işaret etmesini sağlayabilirsiniz. Dinamik bildirimler için \u003Cem>role=\"alert\"\u003C/em> veya \u003Cem>aria-live\u003C/em> kullanılabilir; ARIA kullanımı dikkatle yapılmalıdır.\u003C/li>\n  \u003Cli>\u003Cstrong>Placeholder metinleri etiket yerine kullanmayın.\u003C/strong> Placeholder yardımcı metindir; etiketin yerini tutmaz.\u003C/li>\n  \u003Cli>\u003Cstrong>Autocomplete\u003C/strong> gibi nitelikler kullanıcıyı hızlandırır ve daha güvenilir giriş sağlar (ör. name, email, address-...), tarayıcıla uyumlu olarak kullanın.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Pratik örnekler\u003C/h2>\n\n\u003Ch3>1) Basit iletişim formu\u003C/h3>\n\u003Cp>Örnek HTML (gösterim amaçlı kaçış karakterleriyle):\u003C/p>\n\u003Cp><form action=\"/contact\" method=\"post\">\u003Cbr>\n  <label>Adınız: <input type=\"text\" name=\"name\" required></label><br>\u003Cbr>\n  <label>E-posta: <input type=\"email\" name=\"email\" required></label><br>\u003Cbr>\n  <label>Mesaj: <textarea name=\"message\" minlength=\"10\" required></textarea></label><br>\u003Cbr>\n  <button type=\"submit\">Gönder</button>\u003Cbr>\n</form>\u003C/p>\n\u003Cp>Açıklama: Bu yapı, label sarmalama ile açık bir eşleştirme sağlar; e-posta için tarayıcı düzeyinde temel doğrulama vardır. Sunucu tarafı doğrulama her zaman eklenmelidir.\u003C/p>\n\n\u003Ch3>2) Kayıt formu: şifre doğrulama ve sınırlar\u003C/h3>\n\u003Cp>Örnek (gösterim): <label>Şifre: <input type=\"password\" name=\"password\" minlength=\"8\" required></label> ve <label>Şifre (tekrar): <input type=\"password\" name=\"password_confirm\" required></label>.\u003C/p>\n\u003Cp>Açıklama: \u003Cstrong>minlength\u003C/strong> temel kontrol sağlar; güçlü parola kontrolleri ve eşleşme kontrolü sunucu tarafında doğrulanmalıdır. İyi bir kullanıcı deneyimi için, parola gücü göstergesi ve açıklayıcı hata metinleri ekleyin.\u003C/p>\n\n\u003Ch3>3) Telefon numarası ve örnek pattern\u003C/h3>\n\u003Cp>Telefon için basit bir pattern örneği (ülkeye göre değişir): <input type=\"tel\" name=\"phone\" pattern=\"^\\+?[0-9\\s\\-()]{7,}$\" title=\"Uluslararası format (örn. +90 555 123 4567)\">.\u003C/p>\n\u003Cp>Açıklama: Telefona özel kurallar ülkeye göre farklılık gösterir; pattern kullanırken kullanıcıya örnek bir title veya yardımcı metin sunun.\u003C/p>\n\n\u003Ch2>Adım adım: Form oluşturma kontrol listesi\u003C/h2>\n\u003Cul>\n  \u003Cli>Her giriş alanı için okunaklı bir \u003Cstrong>label\u003C/strong> sağlayın.\u003C/li>\n  \u003Cli>Doğru \u003Cstrong>type\u003C/strong> kullanarak tarayıcı destekli doğrulamadan yararlanın (email, url, number, tel...).\u003C/li>\n  \u003Cli>Kullanıcıyı yönlendiren ve erişilebilir hata mesajları ekleyin (aria-describedby, role/aria-live gerekliyse dikkatli kullanın).\u003C/li>\n  \u003Cli>Sunucu tarafı doğrulamasını her zaman uygulayın; istemci doğrulaması kullanıcı deneyimi içindir.\u003C/li>\n  \u003Cli>Alanları gerektiği kadar kısa tutun; gerektiğinde adım adım (multi-step) formlar düşünün.\u003C/li>\n  \u003Cli>Autofill/Autocomplete niteliklerini kullanarak kullanıcıya hız kazandırın.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>UX ve performans notları\u003C/h2>\n\u003Cp>Kısa formlar genellikle daha yüksek tamamlanma oranına sahiptir. Formu parçalara ayırmak, yüklenen bileşenleri geciktirmek ve gereksiz istemci tarafı koddan kaçınmak performansı iyileştirir. Anında doğrulama sunarken, kullanıcıyı rahatsız etmeyecek şekilde hata geri bildirimleri verin.\u003C/p>\n\n\u003Ch2>Sonuç\u003C/h2>\n\u003Cp>Doğru input türlerini seçmek, temel HTML5 doğrulama niteliklerinden faydalanmak ve erişilebilirlik en iyi uygulamalarını takip etmek iyi bir form deneyimi sağlar. Bu makaledeki örnekler MDN Web Docs referanslarına dayanmaktadır; uygulamada her zaman tarayıcı desteğini kontrol edin ve sunucu tarafı doğrulamayı ihmal etmeyin. (Kaynaklar: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form\">MDN — form\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input\">MDN — input\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/sv-SE/docs/Learn/Forms/HTML5_input_types\">MDN — HTML5 input types\u003C/a>).\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Kaynaklar ve ileri okuma\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form\">HTML form element — MDN\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input\"><input> — MDN\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/sv-SE/docs/Learn/Forms/HTML5_input_types\">The HTML5 input types — MDN Learn\u003C/a>\u003C/li>\n\u003C/ul>","HTML Form Örnekleri — Giriş Alanları, Doğrulama ve Erişiliŗ","Pratik HTML form örnekleri: HTML5 input türleri, client-side doğrulama ve erişilebilirlik uygulamalarıyla form oluşturma adımları ve kontrol listesi.","HTML Form Örnekleri, form validation örnekleri, input türleri, aria etiketleri, client-side doğrulama, HTML5 formları, erişilebilirlik","html-form-ornekleri-giris-alanlari-dogrulama-ve-erisilebilirlik","2026-11-11T08:28:03.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/f9d7324a0f4469a8430a98c0534c78c2.jpg","/media/blog/f9d7324a0f4469a8430a98c0534c78c2_thumb.jpg","/media/blog/f9d7324a0f4469a8430a98c0534c78c2.webp","/media/blog/f9d7324a0f4469a8430a98c0534c78c2_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,913,0,"5 dk okuma süresi","/blog/html-form-ornekleri/html-form-ornekleri-giris-alanlari-dogrulama-ve-erisilebilirlik",[],["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/f9d7324a0f4469a8430a98c0534c78c2.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-form-ornekleri/html-form-ornekleri-giris-alanlari-dogrulama-ve-erisilebilirlik",{"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-form-ornekleri-giris-alanlari-dogrulama-ve-erisilebilirlik",["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]