Tüm Detaylarıyla Html Form Oluşturma

Bu yazımızda Html form Nedir? Html form oluşturma nasıl yapılır? Html form kodları nelerdir? Html form etiketleri nelerdir? gibi tüm sorularımızın cevabını bulacağız. Konuyu tüm detayları ile yazmayı düşündüğüm için oldukça uzun bir yazı olacak.

Html formlarının detaylarına geçmeden önce Form nedir? Neden formları kullanma ihtiyacı duyuyoruz? bundan bahsedelim. 

HTML FORM NEDİR?

Web sitelerinde gezinirken hemen hemen her sitede form kullanıldığını görüyoruz. En basit web sitelerinde bile iletişim formu veya site içi arama formu bulunuyor. Büyük çaplı bir Eticaret sitesini düşünelim. Ürünü almak istiyorsak bizden birkaç adımdan oluşan formlara bazı bilgiler girmemizi isterler. 

Kayıt formu, Giriş formu, Randevu formu, İletişim formu, İstek formu, Kişisel bilgilerin doldurulduğu formlar, İş başvuru formu vb.. kullanıcıdan bilgi girişi gerektiği durumlarda hep Html formları kullanma ihtiyacı duyuyoruz.

Bu yazımızda Html form oluşturma için gerekli etiketleri öğrenip, bunlarla ilgili örnekler yapacağız. Yani sadece Html kodları kısmıyla ilgileneceğiz. Yazacağımız kodların görünümü ile ilgilenmeyeceğiz. Yazdığımız kodları, web sitelerinde gördüğümüz şık formlara dönüştürmek için Css kullanmamız gerekiyor. Uzun bir yazı olacağı için o kısımlara girmeyi düşünmüyorum.

Bir diğer konu da, normalde oluşturduğumuz formlara bilgiler girildikten sonra bu formun sunucuya gönderilmesi ve orada bu bilgilerin işlenip veritabanına kayıt edilmesi gibi durumlar vardır. Bunları, yani backend ile ilgili dersleri ilerde anlatmayı düşünüyorum.

Tekrar konumuza dönelim ve Html form oluşturma ile başlayalım.

HTML FORM OLUŞTURMA

En basit haliyle formları şu şekilde yazıyoruz. 

Yani form etiketi arasına diğer form öğelerini yazacağız.

HTML FORM PARAMETRELERİ

Değişik amaçlar için form etiketi ile birlikte kullandığımız parametreler vardır. Bunlar;

action : Form içerisindeki bilgileri göndermek istediğimiz adresi (Url’i) belirtiriz.

method : Get veya Post değeri verebiliriz.

     ♦ Get : Varsayılan değerdir. Bu değer kullanıldığında, gönderilen form bilgileri sayfa adresi alanında görünür olacaktır.

Örneğin;

Bu yüzden önemli bilgileri gönderirken kullanmamanızı tavsiye ederim. Çünkü tüm bilgiler Url adresinde görünecektir.

Kullanırken bilgilerin 3000 karakterden uzun olmamasına dikkat edin. Bir Url’in uzunluğu 3000 karakter ile sınırlıdır.

Genelde güvenli olmayan veriler için kullanılır.

Örneğin, Google da search yaparken bu yöntem kullanılır. Google’a araba yazıp aratırsanız Url’de bu yöntemin kullanıldığını görebilirsiniz.

Get istekleri, önbelleğe alınabilir ve tarayıcı geçmişinde kalabilir.

     ♦ Post : Form bilgileri hassas veya kişisel bilgiler içeriyorsa mutlaka Post değerini kullanmalısınız. Bu yöntem form bilgilerini Url adresinde göstermez.

Herhangi bir karakter sınırlaması yoktur.Büyük verileri gönderirken kullanılabilir.

Post istekleri, hiçbir zaman önbelleğe alınmaz ve tarayıcı geçmişinde kalmaz.

enctype : Gönderilen verilerin kodlamasını belirtir. 3 değer alabilir;

     ♦ application/x-www-form-urlencoded : Varsayılan değerdir.

     ♦ multipart/form-data : Eğer form içerisinde resim vb.. gönderecekseniz bu değeri kullanmalısınız.

     ♦ text/plain

autocomplete : Tarayıcının formu otomatik tamamlaması gerekip gerekmediği belirtilir. Varsayılan değeri on‘dur.

Bu şekilde iken örneğin Html forma adınızı Ahmet olarak girdiniz diyelim. Daha sonra tekrar bu alana birisi adını girerken klavyeden a tuşuna bastığı zaman tarayıcı Ahmet ismini öneri olarak sunar. Eğer bu değeri off yaparsak herhangi bir öneri durumu olmaz.

novalidate : Tarayıcının formdaki bilgileri doğrulama zorunluluğunu iptal etmiş oluruz.

Örneğin formdaki alanların doldurulmasının zorunlu olduğunu düşünün. Herhangi bir bilgi eksik olduğunda form gönderilmez ve bilgilerin tamamlanması istenir. Bu parametreyi kullandığımızda bilgiler eksik olsa bile form gönderilebilir.

HTML FORM ETİKETLERİ

 Önemli :  Konuya başlamadan önce şunu belirtelim. Html formlarınızı oluştururken kullandığınız tüm Html etiketlerine name değerlerini vermeyi unutmayın. Name parametresini kullanmadığınızda tasarım kısmında herhangi bir problem oluşturmaz ama forma girilen bilgileri sunucu tarafına gönderdikten sonra bu bilgileri name değerlerine göre yakalayıp işlediğimiz için o kısımda mutlaka gerekiyor.

Şimdi tek tek Html form etiketlerini inceleyelim.

 Önemli :  Form etiketlerinin bazıları ile ilgili örnekler yapıp burada paylaşacağım. Fakat siz her form etiketini kendi bilgisayarınızda yazıp sonucunu inceleyerek çok daha kalıcı ve hızlı öğrenebilirsiniz. Kodları kendiniz uygulamadıktan sonra buradaki bilgiler teoride kalır ve çok bir faydasını göremezsiniz. 

HTML İNPUT ETİKETİ

En çok kullanılan Html form etiketidir. Bu etiketin type parametresine verilecek farklı değerler ile birçok amaç için kullanabiliriz.

İnput type parametresine şu değerleri verebiliriz.

     ♦ text : Tek satırlık bir metin girişi için kullanılır. Varsayılan genişliği 20 karakterdir.

     ♦ email : Geçerli bir email adresinin girilmesini zorunlu kılar. Örneğin email adresini yazarken @ karakteri yoksa hatalı mail adresi olduğu için uyarı verir.

     ♦ password : Bir şifre alanı tanımlar. Girilen değerler yuvarlak siyah daireler şeklinde görünür.

html-form-yapma-password 

     ♦ button : İnput nesnesini buton görünümünde oluşturur.

     ♦ file : İnput nesnesini bir dosya seçebileceğimiz şekilde oluşturur.

form-olusturma-file 

     ♦ checkbox : Kullacıya sunmuş olduğumuz seçeneklerden bir seçeneği seçmesini, birden fazla seçeneği aynı anda seçmesini veya hiçbirini seçmemesini istediğimiz durumlarda kullanırız.

Örneğin kullanıcıya hobileriniz nelerdir? diye sorduğumuzu düşünelim. Burada kullanıcı hiç birini seçmeyebilir, sadece birini seçebilir veya birden fazla seçeneği birlikte seçebilir.

html-form-yapma-checkbox

Css kodları ile özelleştirilmiş checkbox ların nasıl yapıldığını öğrenmek istiyorsanız Css ile Özel Checkbox (Custom Checkbox) Yapımı yazımı okuyabilirsiniz. 

     ♦ radio: Kullanıcıya birden çok seçenek içerisinde sadece birisini seçmesini istediğimiz durumlarda kullanırız.

Örneğin kullanıcının cinsiyetini öğrenmek istediğimizde kullanılabilir. Burada dikkat etmemiz gereken yer, kaç tane radio button tanımlıyorsak hepsinin name parametresine aynı değeri verip gruplamamız gerekiyor. Böylece kaç tane oluşturursak oluşturalım kullanıcı sadece birini seçebilir.

html-form-yapma-radio-button

Css kodları ile özelleştirilmiş radio butonların nasıl yapıldığını öğrenmek istiyorsanız Css ile Özel Radio Button (Custom Radio Button) Yapımı yazımı okuyabilirsiniz. 

     ♦ submit : Form içerisindeki bilgileri sunucuya göndermek için kullanılır. Yani type parametresi submit olan input’a tıklandığında içerisinde bulunduğu formdaki girilmiş tüm bilgileri action parametresinde belirtmiş olduğumuz adrese gönderir.

     ♦ reset : Girilen tüm form bilgilerini varsayılan değerlerine döndürür. Yani formu temizler diyebiliriz. 

     ♦ color : Renk seçmemiz için bir palet oluşturur.   

form-olusturma-color

     ♦ number : Sayısal bir değer girilmesini zorunlu kılar. min ve max parametreleri ile sayısal değeri belirli bir aralıkta sınırlandırabilirsiniz.

    ♦ range: Bu değer input nesnesini media player’larda ses azaltıp çoğaltma aracı gibi yapar. 

html-form-yapma-range

     ♦ url : Geçerli bir Url formatı girilmesini zorunlu kılar.

     ♦ date : Tarih seçmemiz için bir seçici oluşturur.

form-olusturma-date

min ve max parametreleri ile tarih seçimini belirli bir aralıkta sınırlandırabilirsiniz.

     ♦ time : Saat belirlememizi sağlar.

form-olusturma-time

     ♦ month : Yıl ve ay seçmemiz için bir seçici oluşturur.

form-olusturma-month

     ♦ week : Yıl ve hafta seçmemiz için bir seçici oluşturur.

form-olusturma-week

     ♦ search : Arama alanları için kullanılır. Normal bir metin alanı gibi davranır. Tek farkı bir içerik yazdıktan sonra sağ tarafında çarpı işareti oluşuyor. Ona basarak içeriği silebiliyoruz. Birde arama motorları için bu input’un bir arama kutusu olduğunu belirtmiş oluyoruz. 

Html ve Css kullanarak animasyonlu arama kutusunun nasıl yapıldığını öğrenmek istiyorsanız Html ve Css ile Animasyonlu Arama Kutusu Yapımı yazımı okuyabilirsiniz.

     ♦ hidden : Bu değeri genelde sunucu tarafındaki işlemlerimiz için kullanırız.

Örneğin bir ürünün id’sini burada tutarız ve sunucu tarafında bu id’yi kullanırız. Bu değere sahip input tarayıcıda görüntülenmez.

Kullanımı şu şekildedir.

İnput etiketinin type parametresine verebileceğimiz değerleri öğrendik.

Şimdi de bu etikete verebildiğimiz diğer parametreleri inceleyelim.

     ♦ disabled : İnputu pasif hale getirir. Pasif olan bir input kullanılamaz ve form gönderilirken bunun değeri gönderilmez.

     ♦ placeholder : Bu parametreye verilen değer input içerisinde görünür. Ama input’a odaklanıldığında yani birşey yazarken o değer görünmez. Eğer input içindeki yazıları tekrar silersek yine placeholder değeri görünmeye başlar. 

Genelde formlara birşey yazmadan önce metin kutularında “Buraya Adınızı Yazınız” gibi yazılar görürüz. İşte bunlar placeholder parametresi ile yapılıyor. 

html-form-yapma-placeholder 

     ♦ multiple : Birden fazla seçim yapılmasını sağlar.

Örneğin type parametresi file olan inputa verdiğimizde birden fazla dosyayı seçebiliriz. Bu parametreyi vermediğimizde sadece bir dosya seçebiliyoruz.

     ♦ min ve max : Type parametresi number, date vb.. olan inputlarda minimum ve maximum değerler vermek için kullanılır.

Örneğin type parametresine number, min parametresine 3, max parametresine 9 değeri verelim. Böylece 3 ile 9 arasında bir değer seçilebilir.

html-form-yapma-number-min-max

     ♦ maxlength : İnputa yazılacak max karakter sayısını belirlememizi sağlar.

Örneğin maxlength parametresine 10 değeri verelim. Böylece max 10 karakter yazabiliriz. Sonrasına izin verilmez.

html-form-yapma-maxlength

     ♦ pattern: Bu parametre ile inputlara girilen değerlerin belirli bir koşula göre olmasını sağlayabiliriz.

Örneğin bir parolaya küçük harf, büyük harf, rakam girme zorunluluğu getirebiliriz.

     ♦ readonly : İnputa bilgi girilemez, sadece okuma yapılabilir.

     ♦ required : Bu parametrenin verildiği inputlar doldurulmak zorundadır. Doldurulmadan form gönderilemez.

     ♦ size : İnputun boyutunu karakter olarak belirlememizi sağlar.

     ♦ step : Örneğin type parametresi number olan bir input olsun. Normalde bu inputta değerler 1’er artar ve azalır. Biz bu inputun step parametresine 15 değerini verdiğimizi düşünelim. Artık 1’er değilde 15’er artıp azalacaktır.

 html-form-yapma-step   

     ♦ value : İnputun başlangıç değerini belirtir.

     ♦ autocomplete : Tarayıcının inputu otomatik tamamlaması gerekip gerekmediği belirtilir. Varsayılan değeri on‘dur.

Bu şekilde iken örneğin inputa adınızı Ahmet olarak girdiniz diyelim. Daha sonra tekrar bu alana birisi adını girerken klavyeden a tuşuna basıldığı zaman tarayıcı Ahmet ismini öneri olarak sunar. Eğer bu değeri off yaparsak herhangi bir öneri durumu olmaz.

     ♦ checked : Type parametresi checkbox ve radio olan inputlarda kullanılır. Bu inputlara checked parametresini verdiğimiz zaman seçili halde görünürler.

     ♦ accept : Belirli dosya türleri ile işlem yapmak için kullanılır.

Örneğin type değeri file olan bir input olsun. Bu dosya seçici ile sadece resimlerin seçilmesini istiyorsak;

şeklinde yazabiliriz. Böylece sadece resimler seçilebilir. Birden fazla değer verirken değerleri virgül ile ayırırız.

Örneğin;

Dosya uzantılarına göre de sınırlama getirebiliriz.

Örneğin sadece .jpg ve .doc uzantılı dosyalar olmasını istiyorsak şöyle yazabiliriz.

     ♦ autofocus : Sayfa yüklendiğinde, bu parametrenin verildiği inputa odaklanma olur.

HTML SELECT VE OPTİON ETİKETLERİ

Html formlarında açılır bir menü oluşturmak için kullanılır. Select etiketi ile menüyü, option etiketi ile de menünün her bir elemanını ekleriz.

Örneğin illerden oluşan bir listemiz olsun ve kullanıcıya bu listeden bir ili seçtirdiğimizi düşünelim.

Html açılır menü kodları

Html açılır menü 

html-acilir-menu

Gördüğünüz gibi açılır menümüz oluştu. Varsayılan olarak menünün ilk öğesi görünür durumda geliyor.

Bunu değiştirmek isterseniz, option etiketinde selected parametresini yazmanız yeterli olacaktır.

Örneğin İzmir öğesinin seçili gelmesini sağlayalım.

Html açılır menü kodları

Html açılır menü  

html-acilir-menu-kodlari

Normalde bu açılır menüden sadece bir öğeyi seçebiliyoruz.

Bunu değiştirip birden fazla seçim yapılabilir hale getirmek için select etiketine multiple parametresini vermemiz gerekiyor.

Html açılır menü kodları

Html açılır menü 

html-acilir-menu-yapimi

Eğer açılır menünüz çok uzunsa menü öğelerini optgroup etiketi ile gruplayabilirsiniz.

Grup başlıklarını bu etiketin label parametresi ile veriyoruz.

Html açılır menü kodları

Html açılır menü 

html-acilir-menu-olusturma

 Önemli :  Option etiketlerine vermiş olduğumuz value değerlerini istediğiniz gibi verebilirsiniz. Tasarımda herhangi bir değişikliğe neden olmaz. Bu değerleri sunucu tarafında yapacağımız işlemler için veriyoruz.

HTML TEXTAREA ETİKETİ

Normal input lardan daha geniş metin alanları oluşturmak için kullanılır. Bu metin alanlarına rows parametresi ile yükseklik, cols parametresi ile genişlik değerleri verebiliriz.

Html metin alanı kodları

Html metin alanı

html-form-kodlari

Oluşturulan metin alanının boyutunu sağ alt köşesinden tutup değiştirebiliriz.

HTML BUTTON ETİKETİ

İnputlar ile butonların yapmış olduğu işlevleri zaten yapabiliyoruz. Görünüm olarakta herhangi bir farklılıkları bulunmuyor.

Aralarındaki tek fark, input etiketini kullandığımızda bu etiket içerisine başka etiketler yerleştiremiyoruz. Ama button etiketini kullanırsak, içerisine farklı etiketlerde koyabiliriz.

Button etiketinin type parametresine button, reset ve submit değerlerini verebiliyoruz.

Html buton ekleme kodları

Html buton 

html-buton-ekleme

Css kullanarak ileri seviye buton tasarımları yapabiliriz. Nasıl yapıldığını öğrenmek için Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..) yazımı okuyabilirsiniz.

HTML FİELDSET VE LEGEND ETİKETLERİ

Fieldset etiketi ile formda bulunan nesneleri gruplayabiliriz. Legend etiketi ile de bu gruplara başlık tanımlaması yapabiliriz.

Fieldset etiketi ile html form oluşturma kodları

Fieldset etiketi ile html form oluşturma

html-form-ornekleri

HTML DATALİST ETİKETİ

İnput ile oluşturulmuş bir metin alanına daha önce tanımladığımız bir listeden seçim yaparak metin girişini sağlayabiliriz.

İnput etiketinin list parametresine datalist’in id değerini veriyoruz. Datalist içerisinde de option ile liste öğelerini tanımlıyoruz.

Datalist etiketi ile html form oluşturma kodları

Datalist etiketi ile html form oluşturma

html-form-elemanlari

Datalist etiketi Html5 ile gelen yeni bir etiket olduğu için Safari tarayıcısı tarafından hala tam olarak desteklemiyor.

Html form oluşturma yazımızın sonuna geldik.

Şu yazılar da ilginizi çekebilir.

Html Form Örnekleri (İletişim Formu, Kayıt Formu vb..)

Css ile Html İletişim Formu (İletişim Sayfası) Oluşturma

Bootstrap 4 ile İletişim Formu (İletişim Sayfası) Oluşturma

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply