HTML derslerimize form oluşturma işlemleriyle devam ediyoruz. Eğer önceki HTML derslerini de incelemek istiyorsanız buradan ulaşabilirsiniz.
Şuanki dersimize kadar yapmış olduğumuz siteler statik bir yapıdaydı. Statikten kastım ziyaretçi ile bir etkileşim olmuyordu. Bu dersimizden sonra sayfamız dinamik bir yapıya kavuşacak. Yani ziyaretçi sayfanızda arama yapma, yazılara yorum ekleme, kullanıcı girişi yapma, resim veya dosya ekleme gibi işlemleri gerçekleştirebilecek. Tabi şunuda belirtelim sadece HTML form ögelerini bilmek yukarıda saydığımız işlemleri gerçekleştirmek için yeterli olmayacaktır.
İçindekiler
HTML Form Parametreleri
<form action="test.php" method="post" >
<label>Adınız : </label><br>
<input type="text" name="txtisim">
<br><br>
<input type="submit" name="btn">
</form>
- Action, form verilerinin gönderileceği adresi belirtirken kullanılır. Örneğin çift tırnak arasına test.php yazılırsa girilen veriler bu sayfada işlenmek için oraya gönderilir.
- Method, form verilerinin sunucuya gönderilme yöntemini belirlerken kullanılır. Genellikle post ve get parametreleri kullanılır.
Form Ögeleri
En çok kullanılan form elementi <input> dur. HTML’in kapatılmayan diğer bir etiketidir. Sunucuya veri göndermek için kullanılır. Sunucuya veri gönderileceği için name özelliğinin belirtilmesi gerekiyor. Girdi türü type özelliği belirtilerek farklı girdilerin alınmasını sağlar. Nedir bu girdiler? Beraber inceleyelim. input etiketinin paremetrelerini inceleyelim:
- type, veri tipi tanımlamada kullanılır. text, checkbox, radio, submit, password, hidden, image, button gibi değerler alır.
- name,Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.
- value, değişkene ön değer atamak için kullanılır. Kulanmak zorunda değiliz.
- size, “text” ve “password” elemanların karakter sayısını, diğer elemanların piksel cinsinden genişliğini belirtmek için kullanılır.
- checked, “radio” ve “checkbox” elemanları seçili kılmaya yarar.
- disabled, veri girişini engellemek için kullanılır.
- src, “image” elemanında resimin yolunu belirtmek için kullanılır.
- alt, fare elamn üzerindeyken görünecek yazı için kullanılır.
- align, elemanın nasıl konumlanacağını belirtmek için kullanılır. left sağa yaslar, center ortalar, right sola yaslar.
input text
Formumuza yazı yazabilceğimiz dikdörtgen şeklindeki form ögesidir. Örneğin;
<form action="test.php" method="post" >
<label>Adınız : </label><br>
<input type="text" name="txtisim">
<br>
<label>Soyadınız : </label><br>
<input type="text" name="txtsoyisim">
</form>
input password
Formumuza parola yazabilceğimiz alan oluşturmak için kullanılır. Bu alana girilen her karakter * ile gösterilir. Örneğin;
<form action="test.php" method="post" >
<label>Parolanız : </label><br>
<input type="password" name="password">
</form>
input checkbox
Formumuza onay kutusu eklemek için kullanılır. Birdern fazla seçeneği seçmemiz istenebilir. Örneğin;
<form>
<input type="checkbox" name="değer1" > HTML<br>
<input type="checkbox" name="değer2" checked="on" > CSS<br>
<input type="checkbox" name="değer3"> PHP
</form>
checked özelliğini sadece CSS için verdik. Dilerseniz diğerlerinede verebilirsiniz.
input radio
Formumuzda birbiriyle ilişkili fakat sadece birini seçebilceğimiz butonlar eklemede kullanılır. Örneğin cinsiyetimiz;
<form>
<label>Cinsiyetiniz : </label><br>
<input type="radio" name="değer1" > Erkek<br>
<input type="radio" name="değer2" checked="on" > Kadın<br>
<input type="radio" name="değer3"> Diğer
</form>
input submit
Kullanıcının girilen verileri form aciton ve post parametrelerinde belirtilen yere göndermek için kullanılır. Value değeri belirtilmezse tarayıcı otomatik olarak “Gönder” değerini atar. Tabi bu tarayıcıdan tarayıcıya farklılık gösterebilir. Örneğin;
<form>
<input type="submit" value="TAMAM"><br>
<input type="submit" value=" ">
</form>
Tarayıcı olarak Chrome kullandım. Value değerini vermediğimiz halde bir değer atamadı.
input reset
Butona bastığımız zaman girilen verileri silmemizi sağlar. Örneğin;
<form>
<input type="text" name="text"><br> <br>
<input type="reset" value="Verileri Temzile">
</form>
Butona tıkladığımız zaman deneme yazısı silinecek.
input file
Sunucuya dosya yükelemek için kullanırız. Dosyanın doğru bir şekile gönderilmesi için method özelliğinin post, enctype özelliğinin multipart/form-data olarak belirtilmesi gerekiyor. Örnek verecek olursak;
<form enctype="multipart/form-data" action="test.php" method=post>
<input name="message" type="file"><br> <br>
<input type="submit" value="Dosyayı Gönder">
</form>
input Hidden
Hidden elementi web sayfasında gösterilmeyecek gizli bir değer tanımlamak için kullanılan bir form kontrolü oluşturulmasını sağlar. Örneğin;
<input type="hidden" name="islem" value="guncelleme">Button etiketi kapatılan etiketlerden birisi olduğu için input etiketi ile oluşturulan butonlardan biraz daha gelişmiş buton oluşturmızı sağlar. Dilersek button etiketi içine resim, icon vs ekleyebiliriz. Örneğin;
<button type="button">
<img width="25" height="25" src="icon1.png"/>Gönder
</button>select Etiketi
İki tipi var bunlar: liste kutusu ve aşağı açılır listedir. İkisi arasındaki tek fark “size” özelliği ile belirtilen seçim kutusu içinde gösterilecek seçim miktarıdır. Bu iki tip için ayrı ayrı örnekler verecek olursak;
<form>
<select size="7" name="menu">
<option selected="" value="none">Hiçbiri</option>
<optgroup label="Tatlılar">
<option value="tatlı1">Şekerpare</option>
<option value="tatlı2">Künefe</option>
<option value="tatlı3">Kazandibi</option>
</optgroup>
<optgroup label="Meyveler">
<option value="meyve1">Çilek</option>
<option value="meyve2">Kavun</option>
<option value="meyve3">Karpuz</option>
</optgroup>
</select>
</form>
Yukarıda liste kutusu tipine örnek verdik. Tarayıcı ekranında size için verdiğimiz değer sayısı kadar veri görüntülenir.
<form>
<select>
<option>İstanbul</option>
<option>Ankara</option>
<option>İzmir</option>
<option>Denizli</option>
<option>Batman</option>
<option>Mersin</option>
</select>
</form>
Yukarıda aşagı açılır liste tipine örnek verdik.Girdiğiniz tüm değerler tarayıcı ekranında görüntüleniyor.
textarea Etiketi
Yüksekliği arttırılabilir textbox oluşturmamızı sağlar. Örneğin;
<form>
<textarea rows="8" cols="30"></textarea>
</form>
Bugünkü yazımızda HTML Form Etiketlerini inceledik. İsterseniz linkteki videodan konuyu tekrar edebilirsiniz.