Sifirdan Baslayanlar Icin Vanilla Javascript Ile Basit Anket Formu Nas

Sıfırdan başlayanlar için vanilla JavaScript ile basit anket formu nasıl kodlanır?

Web sitenizde ziyaretçilerinizle etkileşim kurmanın, geri bildirim toplamanın veya basit bir tercih araştırması yapmanın en etkili yollarından biri anket formlarıdır. Çoğu zaman karmaşık kütüphaneler veya framework'ler kullanılması gerektiği düşünülse de, aslında temel Vanilla JavaScript bilgisiyle başlangıç seviyesinde, tamamen işlevsel bir anket formu oluşturmak mümkündür. Bu makalede, herhangi bir harici bağımlılık olmadan, sıfırdan başlayarak basit bir anket formunu adım adım nasıl kodlayacağınızı, Google AdSense politikalarına uygun, kullanıcı dostu ve bilgilendirici bir yaklaşımla ele alacağız.

Neden Vanilla JavaScript ile Başlamalıyız?

Günümüzde birçok güçlü JavaScript framework'ü (React, Angular, Vue gibi) bulunsa da, Vanilla JavaScript ile başlamak, temel web geliştirme prensiplerini anlamak için paha biçilmez bir deneyim sunar. Framework'ler genellikle belirli yaklaşımları ve soyutlamaları beraberinde getirirken, Vanilla JS doğrudan tarayıcının yerel API'leriyle etkileşime girmenizi sağlar. Bu sayede:
* Temel Bilgileri Güçlendirirsiniz: DOM (Document Object Model) manipülasyonu, olay dinleyicileri ve tarayıcı API'leri gibi temel kavramları derinlemesine öğrenirsiniz.
* Performansı Anlarsınız: Kodunuzun arka planda nasıl çalıştığını daha iyi kavrar, performans optimizasyonları hakkında fikir edinirsiniz.
* Daha Az Bağımlılık: Projenizin dış kütüphanelere olan bağımlılığını azaltır, kodunuz üzerinde tam kontrol sahibi olursunuz.
* Hızlı ve Hafif Çözümler: Özellikle Basit Anket Formu gibi küçük ölçekli projeler için ek bir framework yüküne gerek kalmadan hızlı ve hafif çözümler üretebilirsiniz.
Bu avantajlar, başlangıç seviyesinde bir web geliştiricisi için sağlam bir temel oluşturmak adına Vanilla JavaScript'i ideal bir seçim haline getirir.

Temel Yapı: HTML İskeleti Oluşturma

Herhangi bir web formunun temelini HTML oluşturur. Anket formumuz için de öncelikle gerekli HTML elemanlarını tanımlamamız gerekiyor. Bu elemanlar, kullanıcının soruları görmesini ve cevaplarını girmesini sağlayacak.
Öncelikle, tüm anket formumuzu kapsayacak bir `

` etiketi oluşturacağız. Bu etiket, formun gönderimiyle ilgili ayarları (örneğin `action` ve `method` nitelikleri) barındırır, ancak JavaScript ile verileri işleyeceğimiz için bu nitelikler bizim için şimdilik ikincil planda kalacaktır. Önemli olan, form elemanlarını bu etiket içerisine yerleştirmektir.
Anket sorularımızı ve cevap seçeneklerimizi yapılandırmak için şunları kullanabiliriz:
* Başlıklar ve Açıklamalar: `

`, `
` veya `` etiketleri kullanarak sorularımızı net bir şekilde belirteceğiz. Özellikle `` etiketi, bir input elemanı ile soruyu ilişkilendirerek erişilebilirliği artırır.
* Metin Girişi: Kullanıcıdan kısa metin (isim, e-posta gibi) almak için `` veya e-posta adresi için `` kullanırız.
* Çoktan Seçmeli Sorular (Tek Cevap): Bir dizi seçenek arasından yalnızca birini seçmesini istediğimizde `` elemanlarını kullanırız. Tüm radyo butonlarının aynı `name` niteliğine sahip olması, tarayıcının sadece birinin seçilmesine izin vermesini sağlar.
* Çoktan Seçmeli Sorular (Birden Çok Cevap): Kullanıcının birden fazla seçenek işaretleyebileceği durumlarda `` elemanları idealdir. Her bir checkbox'ın kendine özgü bir `name` niteliği veya aynı `name` niteliğiyle ancak farklı `value` değerleriyle tanımlanması gerekebilir.
* Uzun Metin Girişi: Kullanıcıdan detaylı yorum veya açıklama almak için `` etiketini kullanırız.<br>* <strong>Form Gönderme Butonu:</strong> Kullanıcı anketini tamamladığında, `submit` tipinde bir `<button>` veya `<input type="submit">` kullanarak formu göndermesini sağlarız.<br>Her bir `input`, `textarea` veya `button` elemanına benzersiz bir `id` niteliği vermek, JavaScript ile bu elemanlara kolayca erişmemizi sağlayacaktır. Örneğin, `/makale.php?sayfa=html-form-elemanlari-rehberi` adresindeki makalemizden HTML form elemanları hakkında daha detaylı bilgi edinebilirsiniz. Bu yapı, anket formumuzun iskeletini oluşturacak ve JavaScript ile etkileşim kurmaya hazır hale getirecektir.<br><h2>Anket Mantığı: Vanilla JavaScript ile Etkileşim</h2><br>HTML yapımızı oluşturduktan sonra, anket formumuza hayat verecek olan kısım JavaScript kodumuzdur. <strong>Vanilla JavaScript</strong>, kullanıcının formla etkileşimi, verilerin toplanması ve doğrulanması gibi tüm dinamik süreçleri yönetmemizi sağlar. Kod blokları vermeden bu süreçleri kavramsal olarak açıklayalım.<br><h3>DOM Manipülasyonu: Elementlere Erişme</h3><br>JavaScript'in HTML ile etkileşime geçebilmesinin temel yolu <strong>DOM Manipülasyonu</strong>dur. DOM (Document Object Model), bir web sayfasının yapısal temsilidir ve JavaScript'in HTML elemanlarına erişmesini, onları değiştirmesini veya yeni elemanlar eklemesini sağlar. Anket formumuzda bu, özellikle kullanıcı input'larına erişmek ve formun durumunu güncellemek için kritik öneme sahiptir.<br>* <strong>Elementlere Ulaşma:</strong> HTML'deki belirli bir elemana erişmek için `document.getElementById('elementId')`, `document.querySelector('css-selector')` veya `document.querySelectorAll('css-selector')` gibi yöntemleri kullanırız. Örneğin, `getElementById` ile formun gönderim butonuna veya bir metin giriş alanına kolayca ulaşabiliriz.<br>* <strong>Değerleri Alma:</strong> Bir input elemanının o anki değerini almak için, o elemana erişip `.value` özelliğini kullanırız. Radyo butonları veya onay kutularında ise `.checked` özelliğini kontrol ederek seçili olup olmadığını belirleriz.<br>* <strong>İçeriği Güncelleme:</strong> Anket sonuçlarını veya hata mesajlarını göstermek için, belirli bir HTML elemanının (`<p>`, `<span>`, `<div>` gibi) metin içeriğini (`.textContent` veya `.innerHTML` kullanarak) değiştirebiliriz.<br><h3>Olay Dinleyicileri (Event Listeners): Kullanıcı Etkileşimini Yakalama</h3><br>Anket formumuzun etkileşimli olmasını sağlayan temel mekanizma <strong>Olay Dinleyicileri</strong>dir. Bu, JavaScript'in belirli bir HTML elemanı üzerinde gerçekleşen olayları (örneğin tıklama, metin girişi, form gönderimi) "dinlemesini" ve bir olay tetiklendiğinde belirli bir fonksiyonu çalıştırmasını sağlar.<br>* <strong>Form Gönderimini Yakalama:</strong> Anket formumuzdaki en önemli olay, kullanıcının formu göndermek için butona tıklamasıdır. Formun kendisi üzerinde bir `submit` olay dinleyicisi ekleyerek, kullanıcının butona bastığı anda bir JavaScript fonksiyonunun devreye girmesini sağlarız. Bu fonksiyon, varsayılan form gönderme davranışını (sayfanın yenilenmesini) engellemeli ve kendi veri işleme mantığımızı çalıştırmalıdır.<br>* <strong>Diğer Olaylar:</strong> Daha gelişmiş anketlerde, bir radyo butonu seçildiğinde farklı bir soru grubunu göstermek gibi senaryolar için `change` olay dinleyicileri veya özel butonlar için `click` olay dinleyicileri kullanılabilir.<br><h3>Veri Toplama ve Saklama</h3><br>Kullanıcı formu gönderdiğinde, `submit` olay dinleyicisi aracılığıyla tetiklenen fonksiyon, formdaki tüm input elemanlarından verileri toplamalıdır.<br>* <strong>Verileri Okuma:</strong> Her bir form elemanının `id`'sini kullanarak veya `name` niteliği üzerinden erişerek değerlerini tek tek okuruz. Radyo butonları için, aynı `name`'e sahip butonlar arasından `.checked` olanı bulup onun `value`'sunu alırız. Checkbox'lar için ise, seçili olanların `value`'larını bir diziye toplarız.<br>* <strong>Veri Yapısı:</strong> Toplanan verileri okunabilir ve işlenebilir bir formatta saklamak için genellikle bir JavaScript objesi kullanırız. Objenin anahtarları soru başlıkları veya input `name` nitelikleri olabilirken, değerleri kullanıcı cevapları olacaktır. Örneğin: `{ soru1: "cevap1", soru2: ["cevapA", "cevapB"] }`.<br><h3>Form Doğrulama (Validation): Kullanıcıdan Geçerli Veri Alma</h3><br>Kullanıcının anketi tam ve doğru bir şekilde doldurduğundan emin olmak için <strong>Form Doğrulama</strong> vazgeçilmezdir. Bu, kötü veya eksik verilerin işlenmesini önler ve genel <strong>Kullanıcı Deneyimi</strong>ni iyileştirir.<br>* <strong>Temel Doğrulama Kuralları:</strong><br>* <strong>Boş Alan Kontrolü:</strong> Zorunlu alanların doldurulup doldurulmadığını kontrol ederiz.<br>* <strong>Format Kontrolü:</strong> E-posta adresi gibi belirli format gerektiren alanların doğru formatta girilip girilmediğini basit düzenli ifadeler (regular expressions) kullanarak veya HTML5'in `type="email"` niteliğinin sağladığı temel kontrolleri kullanarak kontrol ederiz.<br>* <strong>Minimum/Maksimum Uzunluk:</strong> Metin alanları için belirli bir karakter sınırlaması belirleyebiliriz.<br>* <strong>Seçim Kontrolü:</strong> Radyo butonları veya onay kutusu grupları için en az bir seçeneğin seçildiğinden emin oluruz.<br>* <strong>Geri Bildirim:</strong> Doğrulama başarısız olduğunda, kullanıcıya hangi alanların yanlış veya eksik olduğunu belirten açık ve anlaşılır mesajlar göstermek çok önemlidir. Bu mesajları ilgili input elemanının yanında veya formun üst kısmında bir alanda görüntüleyebiliriz.<br>Bu adımlar, anket formumuzun dinamik ve etkileşimli olmasını sağlayan Vanilla JavaScript çekirdeğini oluşturur. Kod blokları yerine bu kavramsal açıklamalar, temel mantığı anlamanız için yeterli olacaktır.<br><h2>Stiller: CSS ile Görselleştirme (Kısa Bir Bakış)</h2><br>Anket formumuzun HTML yapısı ve JavaScript mantığı hazır olduğunda, kullanıcıların formu rahatça kullanabilmesi ve estetik bir görünüme sahip olması için CSS devreye girer. CSS, form elemanlarının renklerini, boyutlarını, hizalamasını, yazı tiplerini ve genel düzenini belirler. Her ne kadar bu makale JavaScript odaklı olsa da, CSS'in önemini vurgulamakta fayda var.<br>* <strong>Düzen ve Hizalama:</strong> Flexbox veya Grid gibi CSS özelliklerini kullanarak form elemanlarını düzenli bir şekilde hizalayabilir, responsive bir görünüm sağlayabiliriz.<br>* <strong>Renkler ve Yazı Tipleri:</strong> Markanıza veya web sitenizin temasına uygun renkler ve yazı tipleri seçerek formun görsel çekiciliğini artırırız.<br>* <strong>Input Stilleri:</strong> Giriş alanlarına odaklanıldığında veya üzerine gelindiğinde farklı stiller uygulayarak <strong>Kullanıcı Deneyimi</strong>ni zenginleştirebiliriz.<br>* <strong>Hata Mesajları:</strong> Doğrulama hatalarını gösteren metinleri kırmızı renkte veya belirgin bir arka planla vurgulayarak kullanıcının dikkatini çekebiliriz.<br>CSS ile anket formunuzu nasıl daha çekici hale getirebileceğinizi öğrenmek için [/makale.php?sayfa=css-ile-responsive-tasarimlar] makalemize göz atabilirsiniz. Estetik bir tasarım, kullanıcının anketinizi tamamlama olasılığını artıracaktır.<br><h2>Veri İşleme ve Gönderme (İleri Bakış)</h2><br>Anket verilerini başarıyla topladıktan ve doğruladıktan sonraki adım, bu verileri ne yapacağımızdır. <strong>Basit Anket Formu</strong> bağlamında, verileri genellikle bir yere kaydetmek veya daha fazla analiz için bir sunucuya göndermek isteriz.<br>* <strong>Sunucuya Gönderme:</strong> En yaygın senaryo, toplanan verileri bir sunucuya göndermektir. Bu işlem, genellikle AJAX (Asynchronous JavaScript and XML) veya daha modern olan Fetch API kullanılarak yapılır. JavaScript ile bir HTTP isteği oluşturulur (genellikle POST metoduyla), toplanan anket verileri bu isteğin gövdesinde (JSON formatında yaygın olarak) sunucuya gönderilir. Sunucu tarafında (Node.js, PHP, Python vb. dillerle yazılmış bir backend) bu veriler alınır, işlenir (örneğin bir veritabanına kaydedilir) ve bir cevap döndürülür.<br>* <strong>Yerel Saklama (Local Storage):</strong> Çok basit anketler veya sadece kullanıcı tarafında tutulması gereken veriler için `localStorage` veya `sessionStorage` gibi tarayıcının sunduğu depolama mekanizmalarını kullanabiliriz. Ancak bu yöntem, tarayıcı tabanlıdır ve büyük ölçekli veya güvenliği kritik veriler için uygun değildir.<br>* <strong>Teşekkür Mesajı:</strong> Veriler başarıyla işlendikten sonra, kullanıcıya bir teşekkür mesajı göstermek veya onları farklı bir sayfaya yönlendirmek iyi bir uygulamadır. Bu, kullanıcıya anketin tamamlandığına dair geri bildirim sağlar.<br>Bu adımlar, basit anket formunuzun sadece istemci tarafında çalışmakla kalmayıp, toplanan verilerden gerçek anlamda faydalanabilmesini sağlar.<br><h2>Geliştirmeler ve İleri Adımlar</h2><br><strong>Vanilla JavaScript</strong> ile temel bir anket formu oluşturmak, <strong>Web Geliştirme</strong> yolculuğunuzda önemli bir adımdır. Ancak projenizi daha da geliştirebileceğiniz birçok yol vardır:<br>* <strong>Dinamik Soru Yükleme:</strong> Soruları HTML'ye statik olarak yazmak yerine, bir JSON dosyasından veya API'den dinamik olarak yükleyebilirsiniz. Bu, anketin sorularını kolayca değiştirebilmenizi veya farklı anketler oluşturabilmenizi sağlar.<br>* <strong>İlerleme Çubuğu:</strong> Kullanıcının ankette nerede olduğunu gösteren bir ilerleme çubuğu eklemek, <strong>Kullanıcı Deneyimi</strong>ni iyileştirir ve anketin tamamlanma oranını artırabilir.<br>* <strong>Koşullu Mantık:</strong> Kullanıcının önceki cevabına göre sonraki soruların değişmesi (örneğin, "Evet" cevabı verenlere ek sorular sormak) anketinizi daha akıllı hale getirir.<br>* <strong>Erişilebilirlik (Accessibility):</strong> Ekran okuyucularını kullanan kişiler için `aria` etiketleri ve klavye navigasyonu gibi erişilebilirlik özelliklerini eklemek, anketinizin daha geniş bir kitle tarafından kullanılabilir olmasını sağlar.<br>* <strong>Test Etme:</strong> Anketinizi farklı tarayıcılarda ve cihazlarda test etmek, olası hataları bulmanıza ve kullanıcılar için sorunsuz bir deneyim sağlamanıza yardımcı olur.<br>Bu geliştirmeler, basit anketinizi daha profesyonel ve işlevsel bir araca dönüştürecektir.<br><h2>Sonuç</h2><br>Bu makalede, sıfırdan başlayarak <strong>Vanilla JavaScript</strong> kullanarak basit bir anket formu oluşturmanın temel prensiplerini inceledik. HTML ile iskeleti kurmaktan, JavaScript ile etkileşim, veri toplama ve doğrulama mantığını oluşturmaya kadar birçok konuya değindik. Kod blokları yerine kavramsal açıklamalarla, temel <strong>Web Geliştirme</strong> becerilerinizi güçlendirmenize odaklandık.<br>Unutmayın ki, temel Vanilla JavaScript bilgisi, framework'lere veya kütüphanelere bağımlı kalmadan interaktif ve işlevsel web uygulamaları geliştirmeniz için size güçlü bir temel sağlar. Bu <strong>Basit Anket Formu</strong> projesi, öğrendiklerinizi pekiştirmenin ve daha karmaşık projeler için kendinizi hazırlamanın harika bir yoludur. Deney yapmaktan, hatalar yapmaktan ve her adımda öğrenmekten çekinmeyin. Başarılar dileriz!</p><style> .author-box { margin-top: 25px; background:#f5f5f5; border-radius:12px; padding:20px; display:flex; gap:20px; align-items:flex-start; box-shadow:0 5px 15px rgba(0,0,0,0.05); } .author-box img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #007bff;} .author-info h4{margin:0 0 10px 0;} .author-info p{margin:0;font-size:0.95rem;line-height:1.6;color:#444;} </style> <div class="author-box"> <img src="https://picsum.photos/150/150?random=848" alt="Serkan Çelik"> <div class="author-info"> <h4>Yazar: Serkan Çelik</h4> <p>Ben Serkan Çelik, bir Dijital Pazarlama Uzmanı. Platformumuzda teknolojiyi herkes için anlaşılır kılmak, karmaşık konuları basitleştirerek okuyucularımızın günlük yaşamında pratik olarak kullanabileceği bilgiler sunmak, yeni beceriler kazandırmak, farkındalık oluşturmak ve teknoloji dünyasındaki gelişmeleri anlaşılır bir dille aktarmak amacıyla yazıyorum.</p> </div> </div> </div> <div class="makale-sidebar"> <h3>Diğer Makaleler</h3> <a class='sidebar-item' href='makale.php?sayfa=adim-adim-basit-javascript-anket-projesi-birden-fazla-soruyu-tek-bir-a'><img src='https://picsum.photos/seed/adim-adim-basit-javascript-anket-projesi-birden-fazla-soruyu-tek-bir-a/80/50' alt='Adim Adim Basit Javascript Anket Projesi Birden Fazla Soruyu Tek Bir A'><span>Adim Adim Basit Javascript Anket Projesi Birden Fazla Soruyu Tek Bir A</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-ile-olusturdugum-basit-anketi-mobil-cihazlarda-nasil-respon'><img src='https://picsum.photos/seed/javascript-ile-olusturdugum-basit-anketi-mobil-cihazlarda-nasil-respon/80/50' alt='Javascript Ile Olusturdugum Basit Anketi Mobil Cihazlarda Nasil Respon'><span>Javascript Ile Olusturdugum Basit Anketi Mobil Cihazlarda Nasil Respon</span></a><a class='sidebar-item' href='makale.php?sayfa=sunucuya-gerek-duymadan-basit-javascript-anket-sonuclarini-aninda-ekra'><img src='https://picsum.photos/seed/sunucuya-gerek-duymadan-basit-javascript-anket-sonuclarini-aninda-ekra/80/50' alt='Sunucuya Gerek Duymadan Basit Javascript Anket Sonuclarini Aninda Ekra'><span>Sunucuya Gerek Duymadan Basit Javascript Anket Sonuclarini Aninda Ekra</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-javascript-anketini-tamamladiktan-sonra-kullaniciya-ozel-tesekku'><img src='https://picsum.photos/seed/basit-javascript-anketini-tamamladiktan-sonra-kullaniciya-ozel-tesekku/80/50' alt='Basit Javascript Anketini Tamamladiktan Sonra Kullaniciya Ozel Tesekku'><span>Basit Javascript Anketini Tamamladiktan Sonra Kullaniciya Ozel Tesekku</span></a><a class='sidebar-item' href='makale.php?sayfa=mevcut-html-sayfasina-basit-javascript-anketini-kopyala-yapistir-ile-n'><img src='https://picsum.photos/seed/mevcut-html-sayfasina-basit-javascript-anketini-kopyala-yapistir-ile-n/80/50' alt='Mevcut Html Sayfasina Basit Javascript Anketini Kopyala Yapistir Ile N'><span>Mevcut Html Sayfasina Basit Javascript Anketini Kopyala Yapistir Ile N</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-kullanarak-coktan-secmeli-ve-tek-secimli-basit-anket-sorula'><img src='https://picsum.photos/seed/javascript-kullanarak-coktan-secmeli-ve-tek-secimli-basit-anket-sorula/80/50' alt='Javascript Kullanarak Coktan Secmeli Ve Tek Secimli Basit Anket Sorula'><span>Javascript Kullanarak Coktan Secmeli Ve Tek Secimli Basit Anket Sorula</span></a><a class='sidebar-item' href='makale.php?sayfa=kullanici-bos-birakirsa-basit-javascript-anketini-gondermesini-engelle'><img src='https://picsum.photos/seed/kullanici-bos-birakirsa-basit-javascript-anketini-gondermesini-engelle/80/50' alt='Kullanici Bos Birakirsa Basit Javascript Anketini Gondermesini Engelle'><span>Kullanici Bos Birakirsa Basit Javascript Anketini Gondermesini Engelle</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-bir-javascript-anketinden-kullanici-cevaplarini-sayfa-yenilemede'><img src='https://picsum.photos/seed/basit-bir-javascript-anketinden-kullanici-cevaplarini-sayfa-yenilemede/80/50' alt='Basit Bir Javascript Anketinden Kullanici Cevaplarini Sayfa Yenilemede'><span>Basit Bir Javascript Anketinden Kullanici Cevaplarini Sayfa Yenilemede</span></a><a class='sidebar-item' href='makale.php?sayfa=web-sitenize-hizlica-entegre-edebileceginiz-basit-javascript-anket-kod'><img src='https://picsum.photos/seed/web-sitenize-hizlica-entegre-edebileceginiz-basit-javascript-anket-kod/80/50' alt='Web Sitenize Hizlica Entegre Edebileceginiz Basit Javascript Anket Kod'><span>Web Sitenize Hizlica Entegre Edebileceginiz Basit Javascript Anket Kod</span></a><a class='sidebar-item' href='makale.php?sayfa=kullanici-dostu-ve-hizli-yuklenen-bir-js-anketi-icin-performans-optimi'><img src='https://picsum.photos/seed/kullanici-dostu-ve-hizli-yuklenen-bir-js-anketi-icin-performans-optimi/80/50' alt='Kullanici Dostu Ve Hizli Yuklenen Bir Js Anketi Icin Performans Optimi'><span>Kullanici Dostu Ve Hizli Yuklenen Bir Js Anketi Icin Performans Optimi</span></a><a class='sidebar-item' href='makale.php?sayfa=anket-sonuclarini-sayfayi-yenilemeden-aninda-gostermek-icin-javascript'><img src='https://picsum.photos/seed/anket-sonuclarini-sayfayi-yenilemeden-aninda-gostermek-icin-javascript/80/50' alt='Anket Sonuclarini Sayfayi Yenilemeden Aninda Gostermek Icin Javascript'><span>Anket Sonuclarini Sayfayi Yenilemeden Aninda Gostermek Icin Javascript</span></a><a class='sidebar-item' href='makale.php?sayfa=tek-sayfalik-bir-web-uygulamasina-javascript-ile-basit-bir-anket-biles'><img src='https://picsum.photos/seed/tek-sayfalik-bir-web-uygulamasina-javascript-ile-basit-bir-anket-biles/80/50' alt='Tek Sayfalik Bir Web Uygulamasina Javascript Ile Basit Bir Anket Biles'><span>Tek Sayfalik Bir Web Uygulamasina Javascript Ile Basit Bir Anket Biles</span></a><a class='sidebar-item' href='makale.php?sayfa=mobil-uyumlu-ve-hafif-javascript-anketi-icin-minimal-kod-gereksinimler'><img src='https://picsum.photos/seed/mobil-uyumlu-ve-hafif-javascript-anketi-icin-minimal-kod-gereksinimler/80/50' alt='Mobil Uyumlu Ve Hafif Javascript Anketi Icin Minimal Kod Gereksinimler'><span>Mobil Uyumlu Ve Hafif Javascript Anketi Icin Minimal Kod Gereksinimler</span></a><a class='sidebar-item' href='makale.php?sayfa=sifirdan-baslayarak-javascript-ile-css-stilli-basit-anket-formu-yapimi'><img src='https://picsum.photos/seed/sifirdan-baslayarak-javascript-ile-css-stilli-basit-anket-formu-yapimi/80/50' alt='Sifirdan Baslayarak Javascript Ile Css Stilli Basit Anket Formu Yapimi'><span>Sifirdan Baslayarak Javascript Ile Css Stilli Basit Anket Formu Yapimi</span></a><a class='sidebar-item' href='makale.php?sayfa=ziyaretcilerden-aninda-veri-toplamak-icin-dinamik-anket-elemanlarini-j'><img src='https://picsum.photos/seed/ziyaretcilerden-aninda-veri-toplamak-icin-dinamik-anket-elemanlarini-j/80/50' alt='Ziyaretcilerden Aninda Veri Toplamak Icin Dinamik Anket Elemanlarini J'><span>Ziyaretcilerden Aninda Veri Toplamak Icin Dinamik Anket Elemanlarini J</span></a><a class='sidebar-item' href='makale.php?sayfa=ucuncu-parti-araca-gerek-duymadan-javascript-ile-sadece-evethayir-tipi'><img src='https://picsum.photos/seed/ucuncu-parti-araca-gerek-duymadan-javascript-ile-sadece-evethayir-tipi/80/50' alt='Ucuncu Parti Araca Gerek Duymadan Javascript Ile Sadece Evethayir Tipi'><span>Ucuncu Parti Araca Gerek Duymadan Javascript Ile Sadece Evethayir Tipi</span></a><a class='sidebar-item' href='makale.php?sayfa=html-ve-saf-javascript-ile-coktan-secmeli-basit-anket-kodu-yazimi-icin'><img src='https://picsum.photos/seed/html-ve-saf-javascript-ile-coktan-secmeli-basit-anket-kodu-yazimi-icin/80/50' alt='Html Ve Saf Javascript Ile Coktan Secmeli Basit Anket Kodu Yazimi Icin'><span>Html Ve Saf Javascript Ile Coktan Secmeli Basit Anket Kodu Yazimi Icin</span></a><a class='sidebar-item' href='makale.php?sayfa=backend-olmadan-sadece-javascript-kullanarak-hizli-bir-geri-bildirim-f'><img src='https://picsum.photos/seed/backend-olmadan-sadece-javascript-kullanarak-hizli-bir-geri-bildirim-f/80/50' alt='Backend Olmadan Sadece Javascript Kullanarak Hizli Bir Geri Bildirim F'><span>Backend Olmadan Sadece Javascript Kullanarak Hizli Bir Geri Bildirim F</span></a><a class='sidebar-item' href='makale.php?sayfa=kendi-web-sitenize-javascript-ile-basit-anket-eklemenin-en-hizli-yolu-'><img src='https://picsum.photos/seed/kendi-web-sitenize-javascript-ile-basit-anket-eklemenin-en-hizli-yolu-/80/50' alt='Kendi Web Sitenize Javascript Ile Basit Anket Eklemenin En Hizli Yolu '><span>Kendi Web Sitenize Javascript Ile Basit Anket Eklemenin En Hizli Yolu </span></a><a class='sidebar-item' href='makale.php?sayfa=basit-javascript-anketinizin-gorsel-tasarimini-css-ile-kisisellestirme'><img src='https://picsum.photos/seed/basit-javascript-anketinizin-gorsel-tasarimini-css-ile-kisisellestirme/80/50' alt='Basit Javascript Anketinizin Gorsel Tasarimini Css Ile Kisisellestirme'><span>Basit Javascript Anketinizin Gorsel Tasarimini Css Ile Kisisellestirme</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-anket-gonderimi-sonrasi-basari-mesaji-veya-yonlendirme-nasi'><img src='https://picsum.photos/seed/javascript-anket-gonderimi-sonrasi-basari-mesaji-veya-yonlendirme-nasi/80/50' alt='Javascript Anket Gonderimi Sonrasi Basari Mesaji Veya Yonlendirme Nasi'><span>Javascript Anket Gonderimi Sonrasi Basari Mesaji Veya Yonlendirme Nasi</span></a><a class='sidebar-item' href='makale.php?sayfa=mevcut-web-sitenize-kolayca-entegre-edilebilen-minimalist-javascript-a'><img src='https://picsum.photos/seed/mevcut-web-sitenize-kolayca-entegre-edilebilen-minimalist-javascript-a/80/50' alt='Mevcut Web Sitenize Kolayca Entegre Edilebilen Minimalist Javascript A'><span>Mevcut Web Sitenize Kolayca Entegre Edilebilen Minimalist Javascript A</span></a><a class='sidebar-item' href='makale.php?sayfa=mobil-uyumlu-ve-duyarli-bir-javascript-anket-bileseni-nasil-kodlanir'><img src='https://picsum.photos/seed/mobil-uyumlu-ve-duyarli-bir-javascript-anket-bileseni-nasil-kodlanir/80/50' alt='Mobil Uyumlu Ve Duyarli Bir Javascript Anket Bileseni Nasil Kodlanir'><span>Mobil Uyumlu Ve Duyarli Bir Javascript Anket Bileseni Nasil Kodlanir</span></a><a class='sidebar-item' href='makale.php?sayfa=kullanicilarin-tum-alanlari-doldurmasini-saglayan-javascript-anket-dog'><img src='https://picsum.photos/seed/kullanicilarin-tum-alanlari-doldurmasini-saglayan-javascript-anket-dog/80/50' alt='Kullanicilarin Tum Alanlari Doldurmasini Saglayan Javascript Anket Dog'><span>Kullanicilarin Tum Alanlari Doldurmasini Saglayan Javascript Anket Dog</span></a><a class='sidebar-item' href='makale.php?sayfa=harici-kutuphane-bagimliligi-olmadan-saf-javascript-ile-hafif-anket-ta'><img src='https://picsum.photos/seed/harici-kutuphane-bagimliligi-olmadan-saf-javascript-ile-hafif-anket-ta/80/50' alt='Harici Kutuphane Bagimliligi Olmadan Saf Javascript Ile Hafif Anket Ta'><span>Harici Kutuphane Bagimliligi Olmadan Saf Javascript Ile Hafif Anket Ta</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-bir-javascript-anketi-icin-katilimcilara-aninda-sonuc-grafigi-go'><img src='https://picsum.photos/seed/basit-bir-javascript-anketi-icin-katilimcilara-aninda-sonuc-grafigi-go/80/50' alt='Basit Bir Javascript Anketi Icin Katilimcilara Aninda Sonuc Grafigi Go'><span>Basit Bir Javascript Anketi Icin Katilimcilara Aninda Sonuc Grafigi Go</span></a><a class='sidebar-item' href='makale.php?sayfa=sunucuya-gerek-duymadan-tarayicida-javascript-ile-anket-sonuclarini-ge'><img src='https://picsum.photos/seed/sunucuya-gerek-duymadan-tarayicida-javascript-ile-anket-sonuclarini-ge/80/50' alt='Sunucuya Gerek Duymadan Tarayicida Javascript Ile Anket Sonuclarini Ge'><span>Sunucuya Gerek Duymadan Tarayicida Javascript Ile Anket Sonuclarini Ge</span></a><a class='sidebar-item' href='makale.php?sayfa=coktan-secmeli-ve-acik-uclu-sorular-icin-dinamik-javascript-anket-form'><img src='https://picsum.photos/seed/coktan-secmeli-ve-acik-uclu-sorular-icin-dinamik-javascript-anket-form/80/50' alt='Coktan Secmeli Ve Acik Uclu Sorular Icin Dinamik Javascript Anket Form'><span>Coktan Secmeli Ve Acik Uclu Sorular Icin Dinamik Javascript Anket Form</span></a><a class='sidebar-item' href='makale.php?sayfa=html-ve-saf-javascript-kullanarak-adim-adim-etkilesimli-anket-olusturm'><img src='https://picsum.photos/seed/html-ve-saf-javascript-kullanarak-adim-adim-etkilesimli-anket-olusturm/80/50' alt='Html Ve Saf Javascript Kullanarak Adim Adim Etkilesimli Anket Olusturm'><span>Html Ve Saf Javascript Kullanarak Adim Adim Etkilesimli Anket Olusturm</span></a><a class='sidebar-item' href='makale.php?sayfa=tek-sayfali-tek-adimli-javascript-anket-uygulamasi-gelistirme-ipuclari'><img src='https://picsum.photos/seed/tek-sayfali-tek-adimli-javascript-anket-uygulamasi-gelistirme-ipuclari/80/50' alt='Tek Sayfali Tek Adimli Javascript Anket Uygulamasi Gelistirme Ipuclari'><span>Tek Sayfali Tek Adimli Javascript Anket Uygulamasi Gelistirme Ipuclari</span></a><a class='sidebar-item' href='makale.php?sayfa=hicbir-backend-bilgisi-olmadan-javascript-ile-ilk-anketimi-nasil-yapar'><img src='https://picsum.photos/seed/hicbir-backend-bilgisi-olmadan-javascript-ile-ilk-anketimi-nasil-yapar/80/50' alt='Hicbir Backend Bilgisi Olmadan Javascript Ile Ilk Anketimi Nasil Yapar'><span>Hicbir Backend Bilgisi Olmadan Javascript Ile Ilk Anketimi Nasil Yapar</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-javascript-ile-kosullu-dinamik-anket-sorulari-nasil-olusturulur'><img src='https://picsum.photos/seed/basit-javascript-ile-kosullu-dinamik-anket-sorulari-nasil-olusturulur/80/50' alt='Basit Javascript Ile Kosullu Dinamik Anket Sorulari Nasil Olusturulur'><span>Basit Javascript Ile Kosullu Dinamik Anket Sorulari Nasil Olusturulur</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-anket-verilerini-tarayicida-local-storage-kalici-hale-getir'><img src='https://picsum.photos/seed/javascript-anket-verilerini-tarayicida-local-storage-kalici-hale-getir/80/50' alt='Javascript Anket Verilerini Tarayicida Local Storage Kalici Hale Getir'><span>Javascript Anket Verilerini Tarayicida Local Storage Kalici Hale Getir</span></a><a class='sidebar-item' href='makale.php?sayfa=kullanici-dostu-ve-sik-gorunumlu-javascript-anket-tasarim-ipuclari-nel'><img src='https://picsum.photos/seed/kullanici-dostu-ve-sik-gorunumlu-javascript-anket-tasarim-ipuclari-nel/80/50' alt='Kullanici Dostu Ve Sik Gorunumlu Javascript Anket Tasarim Ipuclari Nel'><span>Kullanici Dostu Ve Sik Gorunumlu Javascript Anket Tasarim Ipuclari Nel</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-anket-cevaplarini-direkt-google-e-tablolara-gonderme-yolu-v'><img src='https://picsum.photos/seed/javascript-anket-cevaplarini-direkt-google-e-tablolara-gonderme-yolu-v/80/50' alt='Javascript Anket Cevaplarini Direkt Google E Tablolara Gonderme Yolu V'><span>Javascript Anket Cevaplarini Direkt Google E Tablolara Gonderme Yolu V</span></a><a class='sidebar-item' href='makale.php?sayfa=kendi-coktan-secmeli-javascript-anketimi-sifirdan-nasil-kodlarim'><img src='https://picsum.photos/seed/kendi-coktan-secmeli-javascript-anketimi-sifirdan-nasil-kodlarim/80/50' alt='Kendi Coktan Secmeli Javascript Anketimi Sifirdan Nasil Kodlarim'><span>Kendi Coktan Secmeli Javascript Anketimi Sifirdan Nasil Kodlarim</span></a><a class='sidebar-item' href='makale.php?sayfa=html-sayfama-hizli-ve-ucretsiz-javascript-anket-formu-eklemek-istiyoru'><img src='https://picsum.photos/seed/html-sayfama-hizli-ve-ucretsiz-javascript-anket-formu-eklemek-istiyoru/80/50' alt='Html Sayfama Hizli Ve Ucretsiz Javascript Anket Formu Eklemek Istiyoru'><span>Html Sayfama Hizli Ve Ucretsiz Javascript Anket Formu Eklemek Istiyoru</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-anket-sonuclarini-sunucusuz-nasil-toplar-ve-saklarim'><img src='https://picsum.photos/seed/javascript-anket-sonuclarini-sunucusuz-nasil-toplar-ve-saklarim/80/50' alt='Javascript Anket Sonuclarini Sunucusuz Nasil Toplar Ve Saklarim'><span>Javascript Anket Sonuclarini Sunucusuz Nasil Toplar Ve Saklarim</span></a><a class='sidebar-item' href='makale.php?sayfa=veritabani-gerektirmeyen-javascript-anket-olusturucu-kodu-ariyorum'><img src='https://picsum.photos/seed/veritabani-gerektirmeyen-javascript-anket-olusturucu-kodu-ariyorum/80/50' alt='Veritabani Gerektirmeyen Javascript Anket Olusturucu Kodu Ariyorum'><span>Veritabani Gerektirmeyen Javascript Anket Olusturucu Kodu Ariyorum</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-bir-js-anketini-css-ile-gorsel-olarak-cekici-hale-getirme-yontem'><img src='https://picsum.photos/seed/basit-bir-js-anketini-css-ile-gorsel-olarak-cekici-hale-getirme-yontem/80/50' alt='Basit Bir Js Anketini Css Ile Gorsel Olarak Cekici Hale Getirme Yontem'><span>Basit Bir Js Anketini Css Ile Gorsel Olarak Cekici Hale Getirme Yontem</span></a> </div> </div> <footer class="site-footer"> <div class="container mx-auto px-4 py-6"> <p>© 2025 Basit Anket Oluşturucu JS İle. Tüm hakları saklıdır.</p> <p> <a href="https://riyy.online/">🏠 Anasayfa</a> | <a href="https://riyy.online/pages/gizlilik-politikasi.php">🔒 Gizlilik Politikası</a> | <a href="https://riyy.online/blog.php">📜 Blog</a> | <a href="https://riyy.online/pages/hakkimizda.php">ℹ️ Hakkımızda</a> | <a href="https://riyy.online/pages/iletisim.php">📞 İletişim</a> <a href="https://riyy.online/pages/kullanim-sartlari.php">🚩 Kullanım Şartları</a> </p> </div> <style> .site-footer { background-color: #ffffff; /* arka plan beyaz / color: #111827; / yazılar koyu / text-align: center; padding: 2rem 1rem; border-top: 1px solid #e5e7eb; / ince üst çizgi / font-family: 'Inter', sans-serif; } .site-footer a { color: #111827; / linkler koyu / text-decoration: none; margin: 0 0.5rem; transition: color 0.3s; } .site-footer a:hover { color: var(--secondary-color, #f97316); / hover turuncu veya tanımlı secondary-color / } </style>  <div id="cookie-popup"> Bu site çerezleri kullanıcı deneyimini geliştirmek için kullanır. <a href="/pages/gizlilik-politikasi.php" target="_blank">Daha fazla bilgi</a>. <button id="accept-cookies">Kabul Ediyorum</button> </div> <style> / Popup kutusu / #cookie-popup { position: fixed; bottom: 20px; right: 20px; width: 300px; max-width: 90%; background: linear-gradient(135deg, #2b2b2b, #3d3d3d); color: #fff; padding: 15px 20px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); font-family: system-ui, sans-serif; font-size: 14px; text-align: left; opacity: 0; transform: translateY(50px); transition: all 0.6s ease; z-index: 9999; } / Gösterim / #cookie-popup.show { opacity: 1; transform: translateY(0); } / Linkler / #cookie-popup a { color: #4cc9f0; text-decoration: underline; } / Buton / #cookie-popup button { float: right; background: #4cc9f0; border: none; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.3s, transform 0.3s; animation: pulse 2s infinite; } / Hover efekti / #cookie-popup button:hover { background: #3ab0d9; } / Pulse animasyonu / @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,201,240,0.5); } 50% { transform: scale(1.05); box-shadow: 0 0 10px 5px rgba(76,201,240,0.3); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,201,240,0); } } / Mobil uyumlu */ @media (max-width: 500px) { #cookie-popup { right: 5%; left: 5%; bottom: 15px; width: auto; font-size: 13px; padding: 12px 15px; } #cookie-popup button { padding: 5px 10px; } } </style> <script> document.addEventListener("DOMContentLoaded", function() { const popup = document.getElementById("cookie-popup"); if (!localStorage.getItem("cookiesAccepted")) { setTimeout(() => popup.classList.add("show"), 1000); } document.getElementById("accept-cookies").onclick = function() { localStorage.setItem("cookiesAccepted", "true"); popup.classList.remove("show"); setTimeout(() => popup.style.display = "none", 600); }; }); </script> </footer>