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.
|
1 2 3 4 5 |
<form> <!--form ögeleri yazılacak--> </form> |
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;
|
1 2 3 |
https://www.mehsatek.com/kayit.php?ad=Ahmet&soyad=Demir |
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.
|
1 2 3 |
https://www.google.com/search?q=araba&rlz=1C1CHWL_trTR802TR802&oq=araba&aqs=chrome..69i57j0l5.1213j0j8&sourceid=chrome&ie=UTF-8 |
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.
|
1 2 3 |
<input type="password"> |
♦ button : İnput nesnesini buton görünümünde oluşturur.
♦ file : İnput nesnesini bir dosya seçebileceğimiz şekilde oluşturur.
|
1 2 3 |
<input type="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.
|
1 2 3 |
<input type="checkbox"> Kitap Okumak <br /><input type="checkbox"> Müzik Dinlemek <br /><input type="checkbox"> Spor Yapmak |
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.
|
1 2 3 |
<input type="radio" name="cinsiyet"> Bay<br /><input type="radio" name="cinsiyet"> Bayan |
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.
|
1 2 3 |
<input type="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.
|
1 2 3 |
<input type="range"> |
♦ url : Geçerli bir Url formatı girilmesini zorunlu kılar.
♦ date : Tarih seçmemiz için bir seçici oluşturur.
|
1 2 3 |
<input type="date"> |
min ve max parametreleri ile tarih seçimini belirli bir aralıkta sınırlandırabilirsiniz.
|
1 2 3 |
<input type="date" min="1980-01-01" max="2010-01-01"> |
♦ time : Saat belirlememizi sağlar.
|
1 2 3 |
<input type="time"> |
♦ month : Yıl ve ay seçmemiz için bir seçici oluşturur.
|
1 2 3 |
<input type="month"> |
♦ week : Yıl ve hafta seçmemiz için bir seçici oluşturur.
|
1 2 3 |
<input type="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.
|
1 2 3 |
<input type="hidden" value="ürünün-id-değeri"/> |
İ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.
|
1 2 3 |
<input type="text" placeholder="Lütfen adınızı giriniz.."> |
♦ 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.
|
1 2 3 |
<input type="number" min="3" max="9"> |
♦ 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.
|
1 2 3 |
<input type="text" maxlength="10"> |
♦ 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.
|
1 2 3 |
<input type="number" min="5" max="50" step="15"/> |
♦ 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;
|
1 2 3 |
<input type="file" accept = "image/*" /> |
şeklinde yazabiliriz. Böylece sadece resimler seçilebilir. Birden fazla değer verirken değerleri virgül ile ayırırız.
Örneğin;
|
1 2 3 |
<input type="file" accept = "audio / *, video / *, image / *" /> |
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.
|
1 2 3 |
<input type="file" accept = ".jpg, .doc" /> |
♦ 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ı
|
1 2 3 4 5 6 7 |
<select> <option value="34">İstanbul</option> <option value="35">Ankara</option> <option value="06">İzmir</option> </select> |
Html açılır menü
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ı
|
1 2 3 4 5 6 7 |
<select> <option value="34">İstanbul</option> <option value="35">Ankara</option> <option value="06" selected>İzmir</option> </select> |
Html açılır menü
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ı
|
1 2 3 4 5 6 7 |
<select multiple> <option value="34">İstanbul</option> <option value="35">Ankara</option> <option value="06">İzmir</option> </select> |
Html açılır menü
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<select> <optgroup label="Frontend"> <option value="html">Html</option> <option value="css">Css</option> <option value="jquery">Jquery</option> </optgroup> <optgroup label="Backend"> <option value="php">Php</option> <option value="mvc">Asp.Net MVC</option> </optgroup> </select> |
Html açılır menü
Ö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ı
|
1 2 3 |
<textarea rows="10" cols="40"></textarea> |
Html metin alanı
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ı
|
1 2 3 4 5 6 7 8 9 10 11 |
<!--input etiketini kullanarak buton oluşturma--> <input type="button" value="Normal Buton" /> <input type="submit" value="Submit Buton" /> <input type="reset" value="Reset Buton" /> <!--button etiketini kullanarak buton oluşturma--> <button type="button">Normal Buton</button> <button type="submit">Submit Buton</button> <button type="reset">Reset Buton</button> |
Html buton
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form> <fieldset> <legend>Kişisel Bilgiler : </legend> Ad : <input type="text"><br /><br /> Soyad: <input type="text"> </fieldset> <br /><br /> <fieldset> <legend>İş Bilgileri : </legend> Çalıştığınız Yer : <input type="text"><br /><br /> Çalıştığınız Pozisyon: <input type="text"> </fieldset> </form> |
Fieldset etiketi ile html form oluşturma
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form> <input list="iller"> <datalist id="iller"> <option value="İstanbul"> <option value="Ankara"> <option value="İzmir"> <option value="Bursa"> <option value="Sakarya"> </datalist> </form> |
Datalist etiketi ile html form oluşturma
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.
iyi günler bu kısmın kodunu oluşturmayı biliyorum ancak bu kısımdan yazılanlar bana nasıl ulaşacak
Onun için C#, Php vb. bir programlama dili bilmeniz gerekiyor. Yada WordPress gibi hazır yazılımlar ile de yapabilirsiniz. WordPress de hangi eklenti ile yapılabileceğini ve gerekli ayarlarının nasıl yapılacağını anlattığım bir yazım bulunuyor. Detaylı bilgi için WordPress İletişim Formu Eklentisi – Contact Form 7 Ayarları ve Kullanımı yazımı okuyabilirsiniz.
İyi çalışmalar.