Formları site ziyaretçileri ya da kullanıcılarından bilgi veya yorum almak için kullanırız. Bu formları da Form Nesneleri sayesinde oluştururuz. Onlardan metin, şifre, seçim kutuları vb. Nesneler oluşturarak bilgiler alırız. Bir form Form Etiketi rasında oluşturulur. Öncelikle bilgi amaçlı kullandığımız form nesnelerini tanıyalım.
Başlıca Form Nesneleri
Bir web sitede kullanıcıdan bilgi yada geri dönüş almak istendiğinde başvurulan ilk şey bir form oluşturmaktır. formlar istenilen bilginin türüne göre oluşturulur. Bu formlar oluşturulurken de başlıca Form Nesneleri kullanılır.
Form Etiketi (<form>)
Tüm etiketleri içinde barındırabilen genel Form Etiketidir. Diğer form nesneleri bu etiket içerisinde konumlandırılıp kullanılır.
Giriş Etiketi (<input>)
Giriş tipinin tanımlandığı etikettir. Bu etiket ile istenilen bilginin türü belirlenir ve kullanıcıdan o türe göre bilgi istenir.
Temel İnput Tipleri
<input type=”text”>
İnput elementi text tipinde belirlenir. Yani klasik textbox kullanımı olarak ifade edilebilir. Örn; adı, soyadı için idealdir.
<input type=”password”>
Şifreler için kullanılır. Textbox’a girilen ifadeler “*” biçiminde gizlenerek gösterilir.
<input type=”radio”>
Radio button şeklinde, istenilen veriler veya seçenekleri seçmek için geliştirilen giriş yöntemidir.
<input type=”checkbox”>
Checkbox tipinde, onay istenilen veya gerektiren durumlarda kullanılması için geliştirilen giriş yöntemidir.
<input type=”button”>
Normal bir buton oluşturur. Varsayılan olarak hiç bir işlem yapmaz. Javascript vb. programlama dilleri ile birlikte işlevsel hale gelir.
<input type=”submit”>
Form içerisinde girilen yazı, şifre ve dosyaları, gönderme işlemini yapar. action ile açılacak olan yeni sayfaya yada var olan sayfanın kendisine, get veya post metoduna göre değişecek şekilde veri gönderme işlemini gerçekleştirir. methot=”get” kullanılmışsa action durumunda göre sayfanın adres çubuğundaki url’nin sonunda, methot=”post” kullanılmışsa sayfanın arka planında veriler saklanır.
<input type=”reset”>
Buton şeklinde bir nesne oluşturur. Form içerisindeki elementlere girilen değerler reset’e tıklandığında temizlenir ve elementleri ilk haline getirir.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Elementi</title>
</head>
<body>
<form>
<i><strong>type="text":</strong></i><br><br>
<input name="metin1" type="text" placeholder="Bünyamin Yusufoğlu" />
<hr />
<i><strong>type="password":</strong></i><br><br>
<input name="sifre" type="password" />
<hr />
<i><strong>type="radio":</strong></i><br><br>
<input name="radio" type="radio" value="abs" value="Sec" />
<hr />
<i><strong>type="checkbox":</strong></i><br><br>
<input name="onay" type="checkbox" value="Onay Sec" />
<hr />
<i><strong>type="button":</strong></i><br><br>
<input name="buton" type="button" value="Gönder" />
<hr />
<i><strong>type="submit":</strong></i><br><br>
<input name="gonder" type="submit" value="Submit" />
<hr />
<i><strong>type="reset":</strong></i><br><br>
<input name="reset" type="reset" value="Temizle" />
<hr />
</form>
</body>
</html>
HTML5 ile gelen input tipleri
<input type=”color”>
Renk çeşitlerini sunan ve seçim yapmamızı sağlayan giriş tipidir. value=”#RenkKodu” içerisinde istediğimiz rengin hexadecimal kodunu girerek ekrandaki rengi belirtebiliriz.
<input type=”date”>
Tarayıcıda tarihi gösterir. gg.aa.yyyy varsayılan formatında görünür. Elemente tıklandığında bir takvim çıkar ve istenilen tarihin seçilmesini mümkün hale gelir. max(gg.aa.yyyy) ve min(gg.aa.yyyy) özellikleri ile alt ve üst sınır tarihi belirlenebilir.
<input type=”email”>
Sadece e-mail girişi yapabilmek için kullanılır. Email formatı dışındaki girişlerde, düzgün veri girişi yapılması gerektiği yönünde uyarı vermektedir. Safari dışındaki tüm tarayıcılar desteklemektedir.
<input type=”number”>
Sadece sayı girmemiz için kullanılır. Sayı dışındaki girişlerde, düzgün veri girişi yapılması gerektiği yönünde uyarı vermektedir. Safari dışındaki tüm tarayıcılar desteklemektedir.
<input type=”range”>
Bir aralık belirtmemiz gerektiğinde, bu giriş tipini kullanmamız gerekmektedir. Dizi şeklinde veri gösterimi yapar. min=”başlangıç değer” ve max=”son değer” ile aralık belirlemesi yapılır. Tüm tarayıcılar tarafından desteklenmektedir.
<input type=”search”>
Arama yapmamızı sağlayan giriş tipidir. Aktif olacak form içerisinde, girilecek olan veri aranır. Sadece Google Chrome ve Safari tarafından desteklenmektedir.
<input type=”time”>
Tarayıcıda saat gösterimini sağlayan tipdir. hh.mm varsayılan formatında görünür. Element üzerinde saat belirlemesi yapılması mümkündür. İnternet Explorer ve Mozilla Firefox dışındaki tarayıcılar tarafından desteklenmetedir.
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 ile yeni gelen input elementleri</title>
</head>
<body>
<form>
<i><strong>type="color":</strong></i><br><br>
<input name="renk" type="color" value="#3300FF"/>
<hr />
<i><strong>type="date":</strong></i><br><br>
<input name="tarih" type="date" />
<hr />
<i><strong>type="email":</strong></i><br><br>
<input name="email" type="email" />
<hr />
<i><strong>type="number":</strong></i><br><br>
<input name="sayi" type="number" />
<hr />
<i><strong>type="range":</strong></i><br><br>
<input name="aralik" type="range" />
<hr />
<i><strong>type="search":</strong></i><br><br>
<input name="arama" type="search" />
<hr />
<i><strong>type="time":</strong></i><br><br>
<input name="saat" type="time" />
<hr />
<input name="Submit" type="submit" />
<hr />
</form>
</body>
</html>
Diğer Form Etiketleri
<textarea> : Geniş yazıların girişini mümkün kılan, çok boyutlu metin kutusu(textbox)
<label> : Nesnelerin önüne tanıtma maksadıyla konulan etiket
<fieldset> : Form içerisinde birbiriyle ilişkili nesneleri kapsayan etiket
<legend> : <fieldset> nesnesine aittir. Gruplandırılmış nesnelerin başlığını oluşturur
<select> : Açılır liste(drop-down list) elemanlarını(item) ifade eden etiket
<optgroup> : Birçok açılır listenin bir arada kullanılabilmesini mümkün kılan etiket
<option> : Açılır liste oluşturulabilmesi için gerekir. bu nesnenin içine yazılır
<button> : Tıklanabilen buton oluşturabilmek için kullanılan etiket
<datalist> : Önceden tanımlanmış açılabilir liste tanımlar. Otomatik tamamlama özelliği vardır
<keygen> : Girilen verileri şifreleyerek, güvenli bir şekilde iletimini sağlayan etiket
<output> : Girilen ve sonuçlandırılan hesaplamayı gösteren etiket