HTML’de Form Kullanımı
HTML’de Form Kullanımı
HTML’de Form Kullanımı, Bu yazımızda sadece görsel olarak kullanıcıya sunduğumuz yapılardan farklı olarak formlar yardımı ile kullanıcının da aktif olacağı dinamik web sayfaları hazırlamayı açıklamaya çalışacağız.
HTML’de Form Kullanımı <FORM> etiketi
<form> etiketi html formları oluşturmak için kullanılan etikettir. Form oluşturmaya yarayan bütün elemanlar <form>…..</form> etiketleri arasına yazılmaktadır.
Genel Kullanımı: <form action=”url” method=”get-post” target=”pencere”>…….</form>
Action: Forma girilecek olan bilgilerin değerlendirileceği dosyanın URL adresini belirlemek için kullanılmaktadır.
Method: Forma girilecek olan bilgilerin, değerlendirici dosyaya hangi yöntem ile gönderileceğini belirtmek için kullanılmaktadır. Method, post ve get değerlerini alabilmektedir. Method bölümüne, get değeri verildiği zaman kontrollere girilen içerik o anda bulunan adrese eklenip değerlendiriciye gönderilmektedir. Post ise form içeriğini direkt olarak değerlendiriciye göndermektedir.
HTML’de Form Kullanımı <input> etiketi
<input> etiketi form içerisinde bilgi almak için kullanılan etikettir. <input> etiketi kapatılmamaktadır.
<input> etiketi ile kullanılacak parametreler tabloda gösterilmiştir.
TYPE | Girilecek olan elemanın türünü belirlemek için kullanılan parametredir. |
SRC | Bir resim dosyası kullanılmış ise bu resim dosyanın adresini belirtmek için kullanılan parametredir. |
ALİGN | Tanımlanmış olan elemanın sayfada konumlanacağı yeri belirlemek için kullanılan parametredir. (sağ, sol, orta) |
NAME | Girilecek verinin değişken ismini belirlemek için kullanılan parametredir. |
MAXLENGTH | Girilecek verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılan parametredir. |
SIZE | Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılan parametredir. |
DISABLED | Veri girişini engellemek için kullanılan parametredir. |
CHECKED | Seçim kutusu kullanıldığı zaman kutunun işaretli olarak görünmesi için kullanılan parametredir. Sadece “radio” ve “checkbox” elemanları için kullanılmaktadır. |
HTML’de Form Kullanımı FORM NESNELERİ
Bir form içerisinde metin kutuları, radyo düğmeleri, onay kutuları, metin alanları, açılır menüler gibi elemanlardan istenilenler kullanılabilmektedir. Şimdi bunları açıklamaya çalışalım.
CheckBox: Hazırlamakta olduğunuz forma onay kutuları eklemek için kullanılmaktadır.
Örnek kullanımı ve tarayıcı görüntüsü:
Radio: Radio düğmeleri, kullanıcının verilen seçeneklerden sadece bir tanesinin seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin aynı olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenmektedir. Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir.
Örnek kullanımı ve tarayıcı görüntüsü:
Text: Hazırlamakta olduğunuz forma, tek satırlık yazı yazılabilecek alan (textbox) eklemek için kullanılmaktadır. Bu alan ile birlikte size, maxlength özelliklerini de kullanabilirsiniz.
Örnek kullanımı ve tarayıcı görüntüsü:
Password: Hazırlamakta olduğunuz forma şifreli alanlar eklemek için kullanılır. Type özelliğine, “password” değeri atanarak oluşturulmaktadır.
Örnek kullanımı ve tarayıcı görüntüsü:
Textarea: Textarea kullanarak forma, birden fazla satırdan oluşan alanlar ekleyebiliriz. Rows (satır) ve cols (sütun) tanımlamaları yapılarak bu metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenmektedir.
Örnek kullanımı ve tarayıcı görüntüsü:
Açılır Menüler: Hazırlamakta olduğunuz formlara <select> etiketi kullanarak açılır menüler eklemek için kullanılmaktadır. Listede yer alacak elemanların neler olacağı ise <option> etiketi ile belirlenmektedir.
Örnek kullanımı ve tarayıcı görüntüsü:
Reset: Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlamaktadır.
Submit: Submit (gönder), form içerisinde yer alan içeriklerin sunucuya gönderilmesini sağlamak için kullanılmaktadır.
Örnek kullanımı ve tarayıcı görüntüsü:
megep/modüllerden yararlanılmıştır.
kodları resim değil de yazı olarak yapmanız biraz sorun oldu
Gayet kaliteli teşekküerler
tam aradığım örnekler teşekkürler
Örnekler güzel ama biraz basit mi olmuş
yeni başladım güzel bilgi devamı gelsin