Merhaba.

HTML Eğitimlerimize Form elementlerini ve ögelerini tanıtma işlemi ile devam ediyoruz.

WebMatrix’i açarak devam edelim.

Seçim Listesi Oluşturma <select></select>

Çoklu bir seçim listesi oluşturmak için Select elementini kullanabiliriz.

Kullanım

<select name=”Değer”>

<option value=”X”>Y</option>

.

.

.

</select> 

Görüldüğü üzere farklı dillerden de bildiğiniz bir Combobox oluşturduk aslında.

Şimdi biraz derinine girelim.

Bu seçim elementinin ilk görünen ögesini kendimiz belirleyebiliriz. Peki bunu neden ve niçin yapmalıyız. Mesela bir Maç Sonuçları sitesi kodladığınızı düşünün sitenin ziyaretçilerinin %90 nının erkek olduğunu istatistiklerden de görebilirsiniz. Bir üye kayıt formu oluştururken örneğin cinsiyet seçimi yaptırmak için böyle bir combo oluştursak erkek seçimini varsayılan olarak kullanıcılara bir kolaylık sağlanabilir. Bu tür kolaylaştırmalar çoğaltılabilir. User Friendly diye adlandırılan tasarımlar yaratmak önemlidir.

Şimdi Fiat’ı varsayılan yapalım.

Bunu yapabilmek için selected özelliğini kullanacağız.

Bir combobox yapmak yerine tamamen görünür seçenekler oluşturabiliriz. Kaç seçeneğin görünmesini istiyorsak select elementinin size özelliğine değer vermemiz gerekir.

Böyle bir durumda hala tek seçim yapılabilir listeden ancak birden fazla seçim yapılmasını olanaklı kılmak gerekseydi bunu multiple özelliği ile yapabilecektik.

TextArea Oluşturma

Form elemanlarımızdan biri de Textareadır. Daha uzun metinler girilecekse bir text yerine textarea kullanmak daha mantıklıdır.

Kullanıma bakalım.

Burada Rows değeri kaç satır olacağını cols değeri de textareanın ilk görünen genişliğini belirtir. Bu değerleri vermezseniz nasıl olurdu? Bunu deneyebilirsiniz.

Button Elementi

İnput elementine verebileceğimiz tiplerden biri butondur. Ancak HTML de button ayrıca bir element olarak da tanımlıdır. 3 Tip buton vardır. Birincisi standart buton birisi reset biriside submittir.

Şimdi bunları görelim

İlk butonumuza ayrıca bir linke gitmesi için a tagi ile beraber kullandım. Butona bastığımızda bizi o sayfaya götürecektir.

Submit kullanımıyla ilgili bir örnek yapalım. Form elementinin action özelliğine bir sayfa adresi girilirse submit butonuna tıklandığında sizi direk içinde bulunduğu form ögesinin action özelliğindeki sayfaya götürür.

Datalist Tanımlama

Datalist ögesi bir input ögesidir. Önceden tanımlanmış seçenekler listesini ifade eder. 

<input list=”İfade”>

<datalist id=”İfade”>

<option value=”X”>

.

.

.

</datalist>

Bu yapının gerçekleştirilmesi gerekir.

Bu özellik HTML 5 ile gelen özelliklerden biridir.

Bugünlük bu kadardı. Bir sonraki yazımda görüşmek üzere.

 


muratbilginer