GameOLOG








  YORUMLAR

strake

Administrator
*******

{$usergroup['title']}

    avatar
*******
strake  
{$usergroup['title']}

HTML ile Gelişmiş Form Elemanları Oluşturma: Kullanıcı Deneyimini Zirveye Taşıyın
Web sitelerinde kullanıcılarla etkileşim kurmanın en temel yolu formlardır. Gelişmiş form elemanları ise bu etkileşimi bir adım öteye taşıyarak hem kullanıcı deneyimini iyileştirir hem de formların işlevselliğini artırır. Bu makalede, modern web standartlarına uygun, etkileşimli ve görsel açıdan zengin formlar oluşturmanın püf noktalarını ve hazır kod örneklerini keşfedeceğiz.

1. Etkileşimli Seçim Kutuları (Select Menüleri): Kullanıcı Dostu Formlar İçin Olmazsa Olmaz
Sıradan bir seçim kutusu yerine, kullanıcıların daha kolay ve hızlı seçim yapmasını sağlayan, dinamik özelliklere sahip select menüleri oluşturabilirsiniz. Bu menüler, hem daha düzenli bir görünüm sunar hem de çok sayıda seçenek arasında gezinmeyi kolaylaştırır.

Kod:
<label for="sehir">Şehir Seçin:</label>
<select id="sehir" name="sehir">

<option value="istanbul">İstanbul</option>
<option value="ankara">Ankara</option>
<option value="izmir">İzmir</option>
<option value="bursa" disabled>Bursa (Bakımda)</option>
<optgroup label="Diğer Şehirler">
<option value="antalya">Antalya</option>
<option value="konya">Konya</option>
</optgroup>
</select>
Açıklama: <optgroup> etiketi ile seçenekleri kategorize edebilir, disabled özelliği ile bazı seçenekleri geçici olarak devre dışı bırakabilirsiniz.

2. Çoklu Seçenekler: Checkbox ve Radio Butonları ile Formlarınızı Özelleştirin
Kullanıcıların tek bir seçenek veya birden fazla seçenek arasından tercih yapmasını sağlamak için checkbox ve radio butonlarını kullanmak oldukça etkilidir.

A. Onay Kutuları (Checkbox)

Çoklu seçenekli durumlarda kullanılır. Kullanıcı, dilediği kadar kutuyu işaretleyebilir.

Kod:
<p>Hobileriniz:</p>
<label><input type="checkbox" name="hobi[]" value="kitap"> Kitap okumak</label>



<label><input type="checkbox" name="hobi[]" value="spor"> Spor yapmak</label>



<label><input type="checkbox" name="hobi[]" value="muzik"> Müzik dinlemek</label>
Not: name özelliğine [] eklemek, sunucu tarafında bu değerleri bir dizi olarak alabilmenizi sağlar.

B. Radyo Düğmeleri (Radio)

Sadece tek bir seçeneğin işaretlenebileceği durumlarda idealdir. Aynı name değerine sahip butonlardan yalnızca biri seçilebilir.

Kod:
<p>Cinsiyetiniz:</p>
<label><input type="radio" name="cinsiyet" value="erkek"> Erkek</label>



<label><input type="radio" name="cinsiyet" value="kadin"> Kadın</label>



<label><input type="radio" name="cinsiyet" value="belirtmek-istemiyor"> Belirtmek İstemiyorum</label>
3. Dosya Yükleme Alanları: HTML Formlarınız İçin Gelişmiş Dosya Yükleme Yöntemleri
Kullanıcıların görsel, belge veya diğer dosyaları yüklemesini sağlamak, özellikle portfolyo veya geri bildirim formları için olmazsa olmazdır.

Kod:
<label for="profil-fotografi">Profil Fotoğrafı Yükle:</label>
<input type="file" id="profil-fotografi" name="profil_fotografi" accept="image/jpeg, image/png">
İpucu: accept özelliği ile kullanıcıların sadece belirli dosya türlerini (örneğin sadece JPEG veya PNG görseller) yüklemesini sağlayabilirsiniz.

4. Sezgisel Tarih ve Saat Seçimi: HTML5 ile Form Deneyiminizi İyileştirin
HTML5 ile gelen <input type="date"> ve <input type="time"> gibi alanlar, tarayıcıların sunduğu yerleşik arayüzler sayesinde kullanıcıların tarih ve saat bilgilerini doğru ve hızlı bir şekilde girmesini sağlar.

Kod:
<label for="baslangic-tarihi">Etkinlik Tarihi:</label>
<input type="date" id="baslangic-tarihi" name="baslangic_tarihi" min="2024-01-01" max="2025-12-31">

<label for="randevu-saati">Randevu Saati:</label>
<input type="time" id="randevu-saati" name="randevu_saati">
Ekstra özellik: min ve max özellikleri ile kullanıcının seçebileceği tarih aralığını kısıtlayabilirsiniz.

5. Gelişmiş Geri Bildirim Formları: Kullanıcı Etkileşimini Artıracak Form Örnekleri
Kullanıcı geri bildirimleri, web sitenizin sürekli gelişimi için hayati öneme sahiptir. Sade ve anlaşılır bir form tasarımı, geri bildirim toplama oranınızı artırır.

Kod:
<form action="gonder.php" method="POST">
<label for="ad">Ad Soyad:</label>
<input type="text" id="ad" name="ad_soyad" placeholder="Adınız ve Soyadınız" required>

<label for="email">E-posta Adresi:</label>
<input type="email" id="email" name="email" placeholder="ornek@mail.com" required>

<label for="konu">Geri Bildirim Konusu:</label>
<input type="text" id="konu" name="konu" placeholder="Konu başlığı" list="konular">
<datalist id="konular">
<option value="Hata Bildirimi">
<option value="Öneri">
<option value="Genel Sorular">
</datalist>

<label for="mesaj">Mesajınız:</label>

<textarea id="mesaj" name="mesaj" rows="5" placeholder="Lütfen mesajınızı buraya yazın..." required></textarea>

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

</form>
Yenilikler:

placeholder özelliği, kullanıcıya ne girmesi gerektiği konusunda yol gösterir.

<datalist> etiketi, metin kutusuna otomatik tamamlama önerileri sunar. Bu, özellikle sık kullanılan terimlerin hızlıca seçilmesini sağlar.

Sonuç: HTML Formlarıyla Web Sitenizin Potansiyelini Artırın
Gördüğünüz gibi, HTML formları sadece bilgi toplamakla kalmaz; doğru ve etkili kullanıldığında kullanıcı deneyimini zenginleştirerek web sitenizin değerini artırır. Yukarıdaki yöntemler ve kod örnekleri sayesinde formlarınızı optimize edebilir, daha profesyonel ve işlevsel hale getirebilirsiniz. Unutmayın, iyi tasarlanmış bir form, kullanıcı ile aranızdaki en güçlü köprüdür.



Konuyu Okuyanlar :   1 Ziyaretçi