İnternet sitesinde yer alan çeşitli formlar bizim kullanıcıdan veri almak için kullandığımız bir araçtır. HTML5 Form oluşturma işlemi ile biz internet sitemizde bir form oluşturarak kullanıcıdan girmesini istediğimiz bilgileri PHP yardımı ile alabiliriz.
Bu kısımda ise HTML ile form oluşturma işlemini gerçekleştirirken formun eylem kısmına ise PHP ‘ye bu verileri hangi metot ile göndereceğimizi seçmemiz gerekmektedir. Bu içerikte ise sizlere temel olarak HTML5 ‘te form oluşturmayı öğrenirken PHP içeriklerinde ise gelen bu form verilerini almayı öğreneceğiz.
HTML5 Form Oluşturma
HTML ile form oluşturmak istiyor isek bilmemiz gereken bazı temel etiketler bulunmaktadır. Bu içeriğimiz de temel olarak form oluşturmayı öğrendikten sonrasında bir sonra ki dersimizde daha iyi ve kullanılabilir bir form oluşturmayı öğreneceğiz. Öncelikle dikkat etmemiz gereken nokta ise bizim bu içeriği atlamamızdır. Şimdiden basit ama ayrıntısına kadar öğreneceğimiz özellikler işimize yarayacaktır.
[accordion] [accordion_content title=”HTML Form Nasıl Oluşturulur ?” icon=”” active=”active”]HTML ‘de form oluşturmak istiyor isek internet sitemizin görünen kısmı olan body içine form etiketlerinin başlangıcını ve bitişini yazmamız gerekmektedir. Bu etiketler sayesinde ise biz artık oluşturacağımız şeyin bir form olduğunu sunucuya ve tarayıcılara bildirmemiz sağlanır.
<body> <form> </form> </body>
Yukarıda yer aldığı şekilde ise bizim form için kullanacağımız etiketler <form>ile başlayıp </form> ile bitmektedir. Bu sayede artık bir form oluşturacağımızı tanımlayabiliriz.[/accordion_content][accordion_content title=”HTML İnput Type Kullanımı” icon=”” active=”active”]HTML ile oluşturacağımız formun içine radio butonu, metin kutusu ve gönderme butonu eklemek istiyor isek bunlar için kullanacağımız etiketi input type olacaktır. Bu etiket sayesinde ne tür bir nesnenin ekran gösterileceğini seçebilir ve bunlara bir değer ve değer ve isim ekleyebiliriz.
<form> <br>İsminizi Girin<input type ="text" name="isim" placeholder="gökmen"><br> <input type ="radio" value="erkek" checked>Erkek<br> <input type ="radio" value="bayan">Erkek<br> <input type ="submit" value="Gönder"> </form>
Yukarıda yer alan kodlara baktığımız zaman input türlerini üçe ayrıldığınız görüyoruz. Bunlar ise metin, radio ve buton olarak karşımıza gelmiş bulunmaktadır. Metin kutusuna girmiş olduğumuz name değeri bizim PHP ‘de gelen verinin ne olduğunu ve nereden geldiğini anlamamıza ve çekmemize yarayacaktır. Burada kullanmış olduğumuz placeholder etiketi ile biz o metin kutusunun içine Gökmen değerini yazdırarak bir örnek isim göstermiş bulunuyoruz. Radio butonlarına ise value sayesinde bir değer atıyoruz ve atadığımız bu değeri ise yine PHP sayesinde değerlendirmemize olanak sağlayacaktır. Kullanıcıların görebilmesi adına ise yanına hangi radio butonunun ne olduğunu anlatabilmek için ismini yazıyoruz. “checked” komutuna kullanarak hangi radio butonunun seçili gelmesi gerektiğini ayarlayabiliriz.[/accordion_content][accordion_content title=”HTML Form Action Kullanımı” icon=”” active=”active”] Şimdi ise asıl işin şatapatlı olan kısmına geldik. Biz iyi güzel formumuzu oluşturacağız. Önemli olan ise oluşturduktan sonrasında bu formumuzu başka bir taraftan daha doğrusu gönder butonuna basıldıktan sonrasında bir PHP dosyası karşılamalı ve karşılanan bu dosyayı PHP veritabanına kaydetmeli yada sizin istediğiniz bir işlemi yapmalı. Bunu yapabilmek için form verilerini gönderebilmek adına HTML action özelliğini kullanacağız.
<form action ="/form.php" method="post"> <br>İsminizi Girin<input type ="text" name="isim" placeholder="gökmen"><br> <input type ="radio" value="erkek" checked>Erkek<br> <input type ="radio" value="bayan">Erkek<br> <input type ="submit" value="Gönder"> </form>
Yukarıda yer alan kod parçacıkların da ise form etiketi içine eklediğimiz action özelliği sayesinde bu formda gönder butonuna basıldığında bu form “form.php” dosyasına gidecek ve PHP dosyası içine yazacağımız kodlar ile bu form verileri metoduna göre karşılanacaktır. Bu kısımda ise bizim karşımıza iki farklı metot çıkmaktadır. Bunlardan birincisi “get” olurken ikincisi ise “post” tur. Bu ikisinin bir birinden farkı ise eğer özel bir veri girilen formunuz var ise girilen verilerin url çubuğunda gözükmemesini istiyor iseniz post metodu kullanılır. Eğer özel bir veri girilmeyecek ise ve bir kullanıcının sonuca yer işareti koymak istediği form gönderimleri için kullanışlı bir durum almaktadır.[/accordion_content][accordion_content title=”HTML Form Verilerini Gruplama” icon=”” active=”active”] Eğer formumuzun güzel bir görünüme ve düzenli bir şekilde kullanıcın karşına gelmesini istiyorsak bunun için HTML fieldset kullanımı işlemini gerçekleştirebiliriz. Bu bizim formumuzu bir grup yani blokmuş gibi göstererek içerisinde düzenli bir görünüm elde edebiliriz.
<form> <fieldset> <legend> Kişisel Bilgiler Formu</legend> <br>İsminizi Girin<input type ="text" name="isim" placeholder="gökmen"><br> <input type ="radio" value="erkek" checked>Erkek<br> <input type ="radio" value="bayan">Erkek<br> <input type ="submit" value="Gönder"> </fieldset> </form>
Yukarıda ise biz bir fieldset komutu açarak ve formun sonundan bir önce ki satırda kapatarak formun bu etiketlerinin bir biri ile ilgili bir blok şeklinde görünmesini sağladık. Legend komutu ile ‘de biz forma bir başlık tanımlamış bulunuyoruz.[/accordion_content] [/accordion]
Yukarıda yer alan kodları artık alıp kendiniz deneme işlemine geçebilirsiniz. Her bir denemeniz sizlere birden fazla şekilde bir çok şey kazandıracaktır. Bundan sonrasında ise bir sonra ki dersimizde daha iyi bir form oluşturmak için görüşmek üzere.