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> 

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <form>

            <select name="Arabalar" >

                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>

            </select>

        </form>

    </body>

</html>

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.

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <form>

            <select name="Arabalar">

                <option value="volvo">Volvo</option>
                <option value="saab" >Saab</option>
                <option value="fiat" selected>Fiat</option>
                <option value="audi">Audi</option>

            </select>

        </form>

    </body>

</html>

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.

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <form>

            <select name="Arabalar" size="3">

                <option value="volvo">Volvo</option>
                <option value="saab" >Saab</option>
                <option value="fiat" selected>Fiat</option>
                <option value="audi">Audi</option>

            </select>

        </form>

    </body>

</html>

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.

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <form>

            <select name="Arabalar" size="3" multiple>

                <option value="volvo">Volvo</option>
                <option value="saab" >Saab</option>
                <option value="fiat" selected>Fiat</option>
                <option value="audi">Audi</option>

            </select>

        </form>

    </body>

</html>

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.

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <form>

            <textarea name="Özgeçmiş" rows="10" cols="30">Özgeçmişinizi Yazınız</textarea>

        </form>

    </body>

</html>

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

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <form>

            <button type="button" ><a href="/DenemeKod.html" style="text-decoration: none">Buton</a></button>

            <button type="reset">Reset</button>

            <button type="submit">Submit</button>

        </form>

    </body>

</html>

İ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.

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <form action="/DenemeKod.Html">

            <button type="button" ><a href="/DenemeKod.html" style="text-decoration: none">Buton</a></button>

            <button type="reset">Reset</button>

            <button type="submit">Submit</button>

        </form>

    </body>

</html>

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.

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <form action="/DenemeKod.Html">

            <input list="Tarayıcılar">

            <datalist id="Tarayıcılar">

                <option value="Yandex">
                <option value="Chrome">
                <option value="Firefox">
                <option value="Safari">
                <option value="IE">

            </datalist>

            <input type="submit">

        </form>

    </body>

</html>

Bu özellik HTML 5 ile gelen özelliklerden biridir.

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

 


muratbilginer