Artık formlarla birlikte dinamik web tasarımına ilk adımı
atmış oluyoruz. Formlar yoluyla ziyaretçiden bilgi alabilir, aldığımız bilgi
doğrultusunda birçok işlemi gerçekleştirebiliriz. Ziyaretçiye gönderilecek
formu hazırlarken, göze hoş görünmesi açısından, tablolar en çok kullanacağımız
bileşenler olacaktır. e-bankacılık, e-sigortacılık, e-ticaret, e-eğitim,... gibi
etkileşimli (interactive) her işte form kullanılır.
action = "dosya ismi" Formdan girilecek bilgilerin değerlendirileceği dosyanın tam
yolu.
method = "yöntem" Formdan
girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemi Formdan gelen
verilerin gizli ya da açık olarak gönderileceğini belirtir. Post=gizli, Get=açık
yoldur.
<input>
Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi
yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını
sağlar.
Input etiketi yardımcı kodları
type = "eleman türü" Eleman türü belirtilir. text, password, checkbox, radio, submit,
reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu
değerlerle nasıl kullanıldığını aşağıda örnekleriyle açıklamaya çalıştım.
name = "isim" Girilen
verinin hangi değişken ismi altında değerlendirileceğini belirtmek için
kullanılır. Mutlaka belirtilmelidir.
value = "değer" "radio"
ve "checkbox" dışında bu parametrenin kullanımı isteğe bağlıdır.
Belirtilecek "değer" eleman türüne göre değişir.
size = "değer" "text"
ve "password" elemanlarında karakter sayısını, diğerlerinde ise
piksel cinsinden genişliği belirtmek için kullanılır.
maxlength = "değer" "text" ve "password" elemanlarında
girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı
değeri sınırsızdır.
checked = "değer" Sadece
"radio" ve "checkbox" elemanlarında seçili elemanı
"on" olarak belirtmek için kullanılır. Diğerlerinde yok sayılır.
src = "dosya ismi" "image"
elemanında resim dosyasını belirtmek için kullanılır.
aredonly Veri
girme amacıyla kullanılmayacak elemanlar içindir.
disabled Veri
girişi engellenecek elemanlar içindir.
Autocomplete Html5
ile gelen bir özellik, önceden kayıtlı verilerin çıkmasını engeller. Siz bir
metin kutusuna bir şeyler yazmaya başladığınızda daha önceden benzer bir şeyler
yazılmışsa otomatik olarak tarayıcı bunları çıkarır, bu durumu engellemek için
değeri "off" yapılmalıdır.
Autofocus Html5 ile
gelen bir özellik, sayfa yüklendiğinde otomatik olarak odaklanılmasını
istediğiniz input elemanına yazabilirsiniz.
Placeholder Html5 ile
gelen bir özellik, başlangıçta metin kutusu içerisinde görünmesini istediğiniz
metni yazabilirsiniz. Tıklanıp yeni bir metin yazılmaya başlandığında
kaybolacaktır.
Required Bir input
alanının boş bırakılmasını istemiyorsanız zorunlu hale getirmek için
kullanılır.
Pattern Html5 ile
gelen bir özellik, regexp yazım formatı ile kullanıcıyı istediğiniz formata
uygun veri girişine zorlamanız mümkün.
Novalidate HTML5 ile
gelen validation özelliklerini iptal etmek için kullanılır
type parametresi ile belirtilebilecek eleman türleri:
text
Formumuza tek satırlık yazı yazılabilecek alan eklemek için
kullanılır.
label
Verilerimize etiket tanımlamak için
kullanılır. For parametresi ile tanımlanan etiketin hangi nesneye ait olduğu
belirtile bilinir
<label for="ad"> ADINIZI GİRİN
<input type="text" name="ad"
value="Adınız">
</label>
password
Formumuza parola yazılabilecek alan eklemek için kullanılır.
"text" elemanından farklı olarak bu alana girilen her karakter * ile
gösterilir.
Kullanıcı: <input type="text" name="username"><br>
Parola: <input type="password"
name="password">
checkbox
Formumuza onay kutuları eklemek için kullanılır.
<input type="checkbox" name="kutu1"
checked="on"> HTML<br>
<input type="checkbox"
name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3">
MySQL
radio
Seçim butonları koyar. Kullanıcıya birden çok seçenek
arasından birinin seçilmesi istenirse bunları kullanırız
<form> Cinsiyetinizi Seçiniz
<input type="radio" name="cinsiyet"
value="Bayan">
Bayan <br> <input type="radio"
name="cinsiyet" value="Bay">
Bay
</form>
submit, reset, button,
Formumuzda belirtilen bilgileri ilgili dosyaya yollamak için
kullanılacak düğmeler yerleştirmek için kullanılır. Submit formu kabul eder ve
yollar, reset ise girilen bilgileri sıfırlar. Button ve image herhangi bir
amaçla kullanmak içindir. Diğer ikisi gibi ön tanımlı bir davranışı olmayan,
gerçekleştireceği eylem bir betikle tanımlanabilen düğmelerdir.
file
Formumuza dosya ismi giriş alanı eklemek için kullanılır.
<input type="file">
<button> </button>
Düğmelerin input etiketiyle kullanımına benzer şekilde
kullanılır. Ancak sonlandırıcı etiket içerdiğinden yorum alanında başka
etiketlerin yer alabilmesi nedeniyle daha geniş bir kullanım alanı vardır. Image ile oluşturulan düğme src parametresinde belirtilen dosyadaki düğme resmi kullanılarak oluşturulur.
bir sonraki derste görüşmek üzere esen kalın... ebi
yararlanılan kaynaklar:
Hiç yorum yok:
Yorum Gönder