Temel Seviye
İleri Seviye
Form 'lar kullanıcıdan / ziyaretçiden bilgi almak için kullanılır. Alınan bilgileri ise farklı yazılım dilleri (Javascript, PHP vs.) ile kullanabiliriz. Yani formların esas görevi "Veri taşımak" tır. Örneğin bir kullanıcı giriş sayfasında bizden kullanıcı adı ve şifre istenir, bizde kullanıcı adı ve şifremizi sisteme gireriz. Diğer yazılım dilleri (Javascript, PHP vs.) ile formlardan bilgiyi alıp veritabanından doğrulama yapılabilir.
Sayfalarda form alanları oluşturmak için "<form> " etiketini kullanacağız. Bu formlar içerisinde kullanıcıya yazılabilir bir alan oluşturmak için ise "<input> " etiketini kullanacağız. "<input> " etiketine "type" ve "name" öznitelikleri eklenmelidir. "type" özniteliği için "text" değerini yazacağız, "name" özniteliği için ise kendi belirlediğimiz bir input adı yazacağız, JavaScript öğrendiğimiz zaman "name" özniteliğini ve kullanıcının girdiği bilgiyi nasıl alabileceğimizi göreceğiz.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Örneğin kullanıcımızın 2 özellikten sadece birini seçmesini istiyorsak "<type>" özniteliği için "<radio> " özelliğini kullanacağız. Dikkat edilmesi gereken nokta "<type>" özniteliği için "<radio>" özelliği seçildiğinde "<name>" özniteliklerinin ikiside aynı isime sahip olmalıdır.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Örneğin kullanıcımıza sevdiği spor dallarını soruyoruz ve birden fazla seçenek seçebilmesini istiyorsak"<type>" değeri için "<checkbox> " özelliğini kullanacağız.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Örneğin kullanıcımızdan kullanıcı adı veya şifre ya da benzeri bir bilgi istiyorsak "<type>" özniteliği için "<submit> " özelliğini kullanacağız.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Bir kutu içerisinde yazılabilir bir alan oluşturmak istiyorsak"<textarea>" etiketini kullanacağız. "<rows>" yükseklik değeri için "<cols>" ise genişlik değeri için kullanılmaktadır.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Bir açılır kutu içerisinde seçenekleri listelemek istiyorsak "<select>" etiketini kullanacağız. Menü içerisine seçenekleri eklemek için ise "<option>" etiketini kullanacağız. Menüde seçili olarak gelmesini istediğimiz seçenek için <selected="selected"> kodunu kullanmamız gerekiyor. Eğer seçim kutusunda ki seçenekleri gruplandırmak istiyorsak <optgroup> etiketini kullanacağız.
Not: " <select> " etiketi "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" gibi etiketler içinde kullanılmaıldır. Aksi takdirde kodumuz hata verecektir.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Öğrendiğimiz üzere Radio butonlarda sadece yuvarlak alan içine tıkladığımızda seçeneğimiz işaretleniyor. Biz radio butonun yanında ki yazıya tıklandığında da seçeneğimiz işaretlensin istiyorsak bu etiketi kullanacağız.
label etiketi içerisine radio butonu koyarak bu özelliği çalıştırabiliriz. Eğer label etiketini radio butonunun dışında (üstünde,altında,sağında ya da solunda) kullanacaksak input etiketine id vermemiz gerekir ve verilen id 'yi label etiketi içerisine for özniteliği olarak yazmamız gerekir.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
"<fieldset>" etiketi form elemanlarını gruplamak için kullanılır ve "<div>" etiketinde olduğu gibi form elemanlarının çevresini çizerek kapsar. "<legend>" etiketi ise hem form elemanlarının çevresini çizerek kapsar hem de çerveye başlık ekler. İkisi ayrı ayrı ya da içi içe kullanılabilir.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Tebrikler!! Artık Temel Seviye XHTML biliyorsunuz. Şu ana kadar temel seviyede XHTML öğrendik ama daha öğreneceğimiz çok güzellikler var. İleri Seviye 'ye geçmek için " Devam Et " butonuna tıklayınız.