Bildiğiniz üzere internet interaktif bir ortam, yani karşılıklı bilgi alışverişi, formlar ise bu işin ziyaretçiden bilgi alma kısmını oluşturuyor. Ziyaretçiye sunulacak birçok form tipi vardır bunların tek amacıysa ziyaretçiden bilgi almaktır. Tabi sadece bilgiyi almak yetmiyor, bu bilgileri bir yerde tutmamız lazım. Bunu HTML ile yapamayız çünkü HTML yapısı gereği, tek başına (yani hiçbir script`in yardımı olmaksızın) dosya silme, taşıma, yazma, okuma ve veritabanı oluşturma gibi yetilere sahip değildir. Bunun için ASP, CGI, Perl, PHP, ve benzeri dillerde yazılmış programlara ihtiyacımız var. Burası bizi pek de ilgilendirmiyor zira bunu yapan çeşitli servisler var.
Form, <FORM> tag`i ile yapılıyor. Fakat tek başına hiçbir işe yaramaz. Birkaç bilgi giriş hücresi oluşturmalıyız. Bu hücreler <INPUT... ile oluşturuluyor. Type attribute`u ile tipini belirliyor ve name attribute`u ile de isim verip işi bitiriyoruz. Şimdi bir örnek yapalım.
<FORM method="post" action="mailto:isim@siteadi.com" enctype="text/plain">
<INPUT type="text" name="isim" value="Lütfen İsminizi yazınız">
<p> <INPUT type="password" name="sifre" value="Lütfen şifrenizi yazınız">
<p> <INPUT type="submit" value="Gönder">
<INPUT type="reset" value="Temizle">
</FORM>
Yukarıdaki örnekte action attribute`u ile isim@siteadi.com mail adresine ziyaterçinin hücrelere yazdığı bilgileri göndermesini söylemiş olduk. Bu alana bir ASP veya CGI programının adresi veya istediğiniz bir mail adresini yazabilirsiniz. Burada, mail adreslerine link verirken de kullanmak zorunda olduğumuz mailto: ifadesi ile adresin bir mail adresi olduğunu belirtiyoruz. method attribute`u ile bilginin gidiş tipini belirledik. Bu alana Post yazarsanız bilgiler gizli gider, get yazdığınızda ise bilgiler browserın adres çubuğunda gözükür. Son olarak enctype ile yazı formatını belirliyoruz. Biz burada mail`a gönderdiğimiz için text/plain ifadesi ile düz yazı formatında göndermiş olduk.
Birinci hücredeki INPUT tipi, type attribute`u ile belirttiğimiz text yani düzyazı tipidir. İçine yazdığımız Value komutu ile bu hücrelerin içine bazı yazılar girebilirsiniz. İkinci hücrede type kısmında belirttiğimiz password ifadesi ile bu hücreye yazılan tüm bilgilerin * asterisk karakterinde gözükmesi sağladık. Submit ile formu göndermek için bir buton, reset ile de yazıları temizlemek için bir buton koymuş oluyoruz.
<FORM method="post" action="mailto:isim@siteadi.com" enctype="text/plain">
<INPUT type="radio" name="secim" value="birinci">Birinci Seçenek<BR>
<INPUT type="radio" name="secim" value="ikinci">İkinci Seçenek<BR>
<INPUT type="radio" name="secim" value="ucuncu">Üçüncü Seçenek<BR>
<INPUT type="radio" name="secim" value="dorduncu">Dörtüncü Seçenek
</FORM>
Yukarıdaki örnekte ziyeretçinin sadece bir seçim yapabileceği radio butonları görüyorsunuz. Bu tür birşey ziyaretçinin bir soruya cevap vermesi için kullanılabilir. Sorunun sadece bir cevabı olacağı için tüm butonları name ifadeleri aynı yani secim
<FORM method="post" action="mailto:isim@siteadi.com" enctype="text/plain">
<INPUT type="checkbox" name="muzik">Müzik<BR>
<INPUT type="checkbox" name="oyun">Oyun<BR>
<INPUT type="checkbox" name="kitap">Kitap<BR>
<INPUT type="checkbox" name="teknoloji">Teknoloji<BR>
<INPUT type="checkbox" name="spor">Spor
</FORM>
Bu input tipinde de ziyaretçinin birçok unsuru seçebileceği checkbox tipi butonları görüyorsunuz. Bunun kullanıldığı alanda örnekteki gibi hobilerini öğrenmek olabilir. Ziyaretçinin hobileri arasında, sunduğumuz seçeneklerden bir yada birkaçı bulunabilir.
<FORM method="post" action="mailto:isim@siteadi.com" enctype="text/plain">
<SELECT name="secenekler"> <BR>
<OPTION value="birinci">Birinci Seçenek<BR>
<OPTION value="ikinci">İkinci Seçenek<BR>
<OPTION value="ucuncu">Üçüncü Seçenek<BR>
<OPTION value="dorduncu">Dörtüncü Seçenek<BR>
</SELECT>
</FORM>
Bu örnektede Pull Down listeleri görüyorsunuz. Buradaki en önemli fark önce SELECT sonrada seçenek kadar OPTION tagi kullanılmasıdır. Ve select tag` ini de kapatıyoruz.
<FORM method="post" action="mailto:isim@siteadi.com" enctype="text/plain">
<TEXTAREA name="fikir" rows="10" cols="40">
</TEXTAREA>
</FORM>
Burada ise ziyaretçinin istediğini yazabileceği sınırsız bir alan yapmış olduk. Ve textarea tag` ini de kapatıyoruz. Bunun dışında tüm form input`larında hücrelerin büyüklüğünü ayarlamak için Size="değer" ve yazılacak karakterleri sınırlamak içinse Maxlenght="değer" attribute`larını, istediğiniz değerleri vererek kullanabilirsiniz. Mesela şifre giriş alanını 7 karakter ile sınırlamak isterseniz, Maxlenght="7" değerini vermelisiniz.
İnternette gezinirken mutlaka görmüşsünüzdür, Pull Down input tipinde seçenekler tıklanarak başka sayfalara gidilebiliyor, yani link olarak kullanılıyor. Ayrıca yine link gibi kullanılan butonlarda yapılabiliyor ama bu JavaScript ile sağlandığı için bunu JacaScript derslerimizde bulabilrsiniz. Yapabileceğiniz input tipleri bundan ibaret. Bunlardan istediklerinizi istediğiniz kadar kullanabilirsiniz, fakat bilgilerin size karışmadan doğru gelmesi için her name attribute`una değişik isim verin. Son olarak ise bir gönder ve temizle butonu yaparak FORM tagini kapatın.
Formlar hakkında son olarak söylemek istediğim, eğer sitenizden gönderilen formların sayısı fazla değilse, bu bilgilerin size mail olarak gelmesinde zarar yok; ama eğer günde yüzlerce form alıyorsanız sizin ASP, CGI ve benzeri dillerde hazırlanmış veritabanına bilgiler girebilen programlara ihtiyacınız var. Burası benim de ilgi ve bilgi alanıma girmiyor.
Az sayıda Form bilgisi alıyor ve bunların size mail olarak gelmisini istiyorsanız yukarıdaki örnekteki gibi action kısmına mail adresinizi yazmanız yeterli olacaktır. Fakat benim bu kısımda değinmek istediğim gedikler var. Öncelikle action kısmında bir mail adresi yazıyorsa ziyaretçi gönder butonunu tıkladığında browser Bu form, e-posta yoluyla teslim ediliyor. Formu teslim etmek alıcıya e-posta adresinizi gösterecek ve formdaki veriler gizlilik için şifrelemesi yapılmadan gönderilecektir. işleme devam etmek istiyor musunuz ? TAMAM gibi bir uyarıda bulunacaktır. Bu uyarı birçok kullanıcıyı kıllandıracak ve formu göndermekten vaz geçirecektir. Bütün bunlar yetmiyormuş gibi uyarıya tamam dediğinde, sanki bir mail linkini tıklamış gibi mail göndermek için kullandığı program açılacak ve bu açılan programda ziyaretçinin forma yazdığı bilgilerin hiçbiri olmayacaktır. Ziyaretçiye ise eğer yeteri kadar istekli ve sabırlıysa mesajını bu seferde mail programına yeniden yazmaktan başka çare bırakmayacaktır, üstelik normal bir mail atmış olacak ve mail adresini istemeden vermiş olacaktır. Dolayısıyla bizim formu yapmamızın hiçbir değeri kalmayacak, "çünkü mesaj formdan değil mail programından geliyor olacak", ve ziyaretçi de çoktan caymış olacaktır. Ehh o zaman niye böyle bir yöntem anlattın derseniz, cevabım bütün FORM örneklerinde bunun kullanılması olacaktır. Kim bilir belkide bu özellik, güvenlik nedeniyle browser`ların yeni versiyonlarında engellenmiştir, belki eski sürümlerde bu kullanılıyordur, bilemiyorum !
Bizim action kısmına, üye olduğumuz bir Form Mail servisinin verdiği linki koymaktan başka çaremiz kalmamış oluyor. Bu tür hizmet veren siteleri arama motorlarından çok rahat bulabilirsiniz, tabi tüm dünyada ki internet şirketlerinde yaşanan krizinden kapanmayan kaldıysa. Ben sitede Web-Tr`nin sunduğu çok kolay bir hizmeti kullanıyorum, bunun için üye olmanız gerekmiyor. Yapmanız gereken sadece action kısmına http://www.web-tr.net/automail.cgi? adresini yazdıktan sonra istediğiniz mail adresini yazmak.
Mesela http://www.web-tr.net/automail.cgi?isim@siteadi.com gibi. Tabi bildiğiniz üzere Web-Tr servisi parasız hizmetlerini sonlandırma kararı aldı, umarım bu servisi iptal etmezler. Evet benim Formlar hakkında anlatmak istediklerim bu kadar, eğer sizin konu hakkında bilginiz veya sorularınız varsa bize yazabilirsiniz.
Bir sonraki sayfada CSS, CSS-P (Cascading Style Sheet - Positioning), JavaScript ve Katmanlar ile Dinamik HTML (hareketli görsel efektler, yazıların üzerine gidince renginin değişmesi ve/veya altının çizgili olması gibi) oluşturma teknikleri.
