Project Zeta – HTML 13 Form Elements


0

Merhaba;

HTML eğitimlerimize önemli konulardan biri <form> </form> elementi ile devam ediyoruz.

Web sayfaları kullanıcıya sadece bilgi göstermek için değil aynı zamanda kullanıcı bilgileri almak ya da kullanıcıların kendi paylaşımlarını oluşturabilecek yapılarda gerektirir. İşte bu tür işlemleri Form nesneleri ile yapacağız.

WebMatrix’i açalım ve başlayalım.

Form Oluşturma

<form> </form> şeklinde bir form oluşturabilir. Formun kendisi görünür değildir. Form içine istediğiniz HTML ögelerini yerleştirebilirsiniz.

Form ögelerine kabaca bakacak olursak metin alanları, onay kutuları, butonlar, radyo butonlar ve daha pek çok öge sayılabilir.

Input Kullanımı

Input formun en önemli elementlerinden birisidir. 

Input, type attribute’u sayesinde pek çok farklı şekilde gösterilebilir. 

Bir tane text alanı oluşturarak başlayalım.

type özelliğinden sonra pek çok form elemanının ismini yazarak oluşturabilirsiniz. WebMatrix gibi intellisensi olan bir geliştirme uygulaması kullanıyorsanız yazabileceğiniz diğer ögeleri görebilirsiniz.

Yazdığımız nasıl göründü bir ona bakalım.

Button Oluşturma

Form ögelerimizi biraz artıralım.

Value özelliği girilen form ögesine görülebilen text alanı var ise orada görünmesini istediğimiz değeri girmemize yarıdımcı olur. 

Buton ögesinin kullanıcıya Giriş Yap olarak görünmesini istedim ve bunu gerçekleştirdim.

Girdiğimiz form ögelerini kendimiz boyutlandırmassak otamatik değerleri ile oluşur. Mesela bir Text alanının genişliği 20 karakter alacak kadar oluşur. 

Buton üzerine yazılan metnin genişliği kadar.

Radio Buton Ekleme

Nesnelerimizi eklemeye devam edelim.

Radio butonun en büyük özelliği yapılacak olan seçimlerde tek bir olayı seçme hakkı olduğunda kullanılmasıdır. Tek bir seçeneğin seçilebilir olması içinde Radio butonlar aynı name özelliğine sahip olup kendi içinde bir grup oluşturabilmelidir. 

Şu anda kodladığımız kodların çıktını görüp deneyelim.

Şu anda hangi seçeneği seçerseniz bir daha önce seçili olandan değer işaret kalkacaktır.

Name değerleirini farklılaştırıp tekrar deneyelim.

Hepsi işaretlenebilir duruma geldi.

Form Verilerini Gruplandırma

<fieldset> </fieldset> oluşturulan form ögelerini gruplamanızı sağlar.

Bu element form içine, form ögeleride bu elemen içine yazılır.

<legend></legend> ile gruba isim verebilirsiniz.

Bugünlük bu kadardı. Yarın görüşmek üzere.

 


Like it? Share with your friends!

0
muratbilginer

0 Comments

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir