Bölüm 2 HTML

Bağlı Özellikler (Attributes)

Bağlı özelliklerden kısaca bahsetmiştik. Ama üzerinden tekrar geçmekte fayda var. Bağlı özellikler bir eleman hakkında tarayıcıya ilave bilgiler sağlamak için kullanılır. Bu değerler eleman içeriğinde sayfada görünmezler. Tüm HTML elemanları bağlı özelliklere sahip olabilir.

Bağlı özellikler yazılırken belirlenmiş kurallar vardır:

Eleman adı ile aralarında boşluk olmalıdır. <meta charset="utf-8"> gibi.
Bir bağlı özelliğin değerini girmek için "eşittir" işareti kullanılır.
Özellik değeri her zaman tırnak içinde yazılır ("utf-8" gibi).
Bağlı özellikler her zaman elemanın açılış tag'i içine yazılır.
:isim="değer" formatında bildirilmelidir.

Daha önce index.html dosyamız içinde resim gösterirken <img> elemanının src (kaynak-source) özelliğini kullanmıştık.

<img src="images/pupy.jpg" alt="Sevimli köpecik">

Bir çok farklı bağlı özellikler olabilir. src özelliği bağlı olduğu elemanın iliştirildiği dosyanın yerini gösterir. <img> elemanında kullanıldığı bu yerde tarayıcıya resim dosyasının adını bildiriyor. Burada kullanılan images/pupy.jpg değeri tarayıcıya resmin index.html dosyasının bulunduğu klasörün bir alt klasörü olan images klasöründe pupy.jpg isimli dosya olduğunu bildiriyor. Bu durumda tarayıcı kodda o img elemanının tarif ettiği yerde bu dosyadaki resmi yayınlayacaktır.

alt bağlı özelliği ise resim bir sebepten tarayıcıya yüklenemezse kullanıcıya gösterilecek yazılı mesajı içerir. alt özelliğinin başka bir kullanım amacı da "Screen Reader" (ekran okuyucu) uygulaması ile sayfayı inceleyen görme engelli kullanıcılara resim hakkında bilgi vermektir. Bu yüzden sayfanızda görme engellilerin de dikkatini çekecek bir şeyler olduğunu düşünüyorsanız alt özelliğinde resmi anlatan daha açıklayıcı bilgiler veriniz.

Daha bir çok bağlı özellik var. Bunları ilerledikçe görmeye devam edeceğiz.

Yazıları Şekillendirmek

Bu başlıkta sayfanızdaki yazıların görünümünü tayin eden elemanlardan bahsedeceğiz. Başlık (heading) elemanlarından başlayalım. Başlık elemanları <h1> den <h6> ya kadar olan elemanlardır. Hadi gelin index.html içindeki <h1> elemanının altına 2 tane daha diğer başlıklardan ekleyelim.

        <h1>Merhaba Dünya!</h1>
        <h2>Merhaba Dünya!</h2>
        <h3>Merhaba Dünya!</h3>

Merhaba Dünya!

İlk 3 header elemanı genellikle çok kullanılır. Sonrakiler küçük olmaları sebebiyle tercih edilmez.

Örneğimizde bir de paragraf (<p>) elemanı kullanmıştık. Paragraflar normal boyutta yazılardan oluşan bloklardır. Bu yazı da paragraflardan oluşuyor ancak ben yazıların daha rahat okunması için tarayıcının standart paragraf yazı boyutunu biraz büyüttüm. Daha önceki bölümde verdiğim çıktı resimlerine bakarsanız, paragrafın standart yazı boyutu o kadardır. Şimdi index.html dosyamıza birkeç paragraf daha ekleyelim bakalım.

....
        <p>Aşağıda sevimli bir köpecik resmi var.</p>
        <p>Paragraf 2</p>
        <p>Paragraf 3</p>
....

Resimden göreceğiniz gibi paragraflar arasında otomatik olarak boşluklar bırakılıyor.

Bir diğer yazı şekillendirme elemanı da listeler. Bir çok web içeriğinde listeler kullanılır. 2 çeşit liste var, ilki sıra numaralı liste olan <ol> elemanı (ordered list - sıralı liste) ve numarasız liste olan <ul> elemanı (unordered list - sırasız liste). Liste içindeki her liste elemanı da her iki eleman için <li> (list item - liste elemanı) elemanıdır.

Örneğin bir alınacaklar listesi yaparken sıra numaralarının önemi yok, burada numarasız liste kullanılır.

        <p>Alınacaklar :</p>
        <ul>
            <li>Et</li>
            <li>Süt</li>
            <li>Yumurta</li>
        </ul>

Alınacaklar :

Et
Süt
Yumurta

Sıralı bir şeyleri belirtmek için, örneğin bir yemek yapılışı tarif ederken sıralı liste kullanılır. Tek farkı yukarıdaki kodda <ul> elemanı yerine <ol> elemanı kullanmaktır. Hadi listemiz numaralı hale getirelim.

        <p>Alınacaklar :</p>
        <ol>
            <li>Et</li>
            <li>Süt</li>
            <li>Yumurta</li>
        </ol>

Alınacaklar :

Et
Süt
Yumurta

Bu kadar yazı şekillendirme bilgisi yeterli şimdilik. Devam ettikçe bilgilerimiz çoğalacak. İnterneti kullanmaya ilk başladığım yılları hatırlıyorum da bu öğrendiklerimiz kadar bile içerik şekillendirme yoktu, birçok web sayfası dümdüz yazılardan oluşuyordu.

Sayfada Bağlantılar Oluşturmak

Bağlantılar (link'ler) web'i web yapan en önemli elemanlardan biridir. Bu başlıkta sayfanızdan diğer sayfa ya da web sitelerine nasıl bağlantı yapılacağını göreceğiz. Hemen her web sayfasında bağlantılar bulunur. Bunlara tıklanınca tarayıcınız başka bir sayfa yada siteye geçecektir. Bağlantılar bir yazı, bir resim ya da diğer herhangi bir HTML eleman olabilir.

Bir bağlantıyı oluşturmak için <a> (anchor - çapa) elemanı ve onun href bağlı özelliği kullanılır. href özelliğine değer olarak kullanıcının tıkladığında gitmesini istediğimiz web sayfası adresi girilir. Hypertext Reference kelimelerinden üretilmiştir, bağlantı yazısı referansı gibi bir anlamı vardır.

Adım adım Google sayfasına bir link oluşturalım

        <a>Google</a>

Google

Bu bağlantı henüz tıklandığında bir yere gitmiyor, çünkü href özelliğine değer girilmemiş. Şimdi hedef adres değerini de girelim.

<a href="http://google.com">Google</a>

Google

Dikkat ederseniz kursörü üzerine getirince tıklanabilir olduğunu belirten parmak şeklinde görünüyor. Artık bağlantıya tıkladığınızda tarayıcı Google sitesine gidecektir.

<a> elemanı içeriğine ne koyarsanız onun üzerine tıklanınca bağlantıya geçiş gerçekleşir. İçerikte bir ya da birden fazla HTML eleman olabilir. Mesela sayfadaki resime tıklayınca sadece resmin olduğu dosyayı göstermesini sağlayalım.

<a href="images/pupy.jpg"><img src="images/pupy.jpg" alt="Sevimli köpecik"></a>

Gördüğünüz gibi resmin kodunu bir <a> elemanının içine aldık ve href özelliğine de resmin adresini girdik. Şimdi resme tıklarsanız tek başına resim dosyası gösterilecektir. Buna benzer içiçe eleman kullanımları web sayfası tasarımlarında çok sıklıkla kullanacağınız şeyler olacak. Ama bir şey daha , yukarıdaki kodu tek satır yazmak yerine şöyle yazın:

        <a href="images/pupy.jpg">
            <img src="images/pupy.jpg" alt="Sevimli köpecik">
        </a>

Böylece kodunuzda içiçe olan elemanlar daha anlaşılabilir bir şekilde görünecektir.

Bağlantılar konusunda bir diğer önemli nokta da renkleri. Tarayıcılarda default olarak bağlantılar ziyaret edilmeden önce yazıları mavi olacaktır, sayfayı daha önce ziyaret etmişseniz rengi mor'a dönecektir. Bunu zaten Google aramalarınızda falan daha önce ziyaret ettiğiniz bir sayfa denk geldiğinde görüyorsunuz.

gibi.

Yorumlar

Yorumlar yazılım geliştirirken size çok lazım olan şeyler. Kodun içinde neler yaptığınızı ya da yapacağınızı daha sonraki bir zamanda rahat hatırlamak için kodun arasına yorum eklersiniz. Bu yorumlar bir ya da birkaç satırdan oluşabilir. Ama bunların tarayıcınız tarafından dikkate alınmaması gerekir. Bu amaçla yorumlar belirlenen bir formata göre yazılırlar. index.html dosyamızı şu hale getirelim :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Örnek Web Sayfam</title>
    </head>
    <body>
        <h1>Merhaba Dünya!</h1>
        <p>Aşağıda sevimli bir köpecik resmi var.</p>
        <img src="images/pupy.jpg" alt="Sevimli köpecik">

        <!-- Buraya bir buton gelecek -->
    </body>
</html>

Yukarıda görünen yeşil renkteki satır bir yorum satırıdır.  ile biter. Bu elemanın içindekiler tarayıcı tarafından sayfada gösterilmezler. İsterseniz sayfadaki herhangi eleman ya da elemanları da bu şekilde çevreleyerek geçici olarak görünmez yapabilirsiniz. Kodunuzu silmediğiniz için sonradan geri dönmesi kolay olur.

Kaynak Kodu

Kaynak kodu denen şey bir web sitesi tasarlarken ya da bir program yazarken kullandığınız herşey demektir. Bununiçinde yazılar, resimler, script'ler, medya dosyaları vs hepsi vardır. İlk web sayfamızı incelersek içinde index.html dosyası ve bir resim var. Eğer birine sitemizin kaynak kodu lazım olursa ona sadece html dosyalarını vermemiz yetersiz olur. Bizim sitemizin kaynak kodu aslında "ilk-sayfam" klasörünün tamamıdır.

Bir de internette baktığımız sayfanın kaynak kodunu görmek isteyebiliriz. Tüm tarayıcılarda sayfa üzerinde bir yere sağ tıkladığımızda açılan menüde "View web page source" ya da Türkçesi "Sayfa kaynağını göster" seçeneği vardır. Şimdi kendi yazdığımız web sayfasının kaynağına bir bakalım.

Açılan yeni sekmede sayfamızın kaynak kodu görünür.

Gördüğünüz üzere index.html içine yazdığımız her kod burada görünüyor. Aşağıdaki <script> elemanını ve onun kalabalık içeriğini dikkate almayın, VSCode editör Live Server ile sayfamızı kodu değiştirip kaydettiğimizde otomatik yenileme yapmak için o kodu oraya ilave etmiş. Zaten yorum satırında da bunu belirtiyor.

Şimdi gidin bir de gelişmiş bir web sayfasının kaynak kodunu açın ve görün elemanlar ne kadar uğraşmış o sayfayı yapmaya. Ama merak etmeyin siz de oralara geleceksiniz sabır gerekiyor birazcık.

HTML Formlar

Formlar her yerde kullanılıyor. Bir web sitesine kayıt olurken formlara bilgi giriyorsunuz, site içinde arama yapmak için bir küçük form oluyor vs.

Yukarıda Facebook giriş sayfası görülüyor. Sağ tarafta giriş yapmanız için bir form var. Email adresinizi ve şifrenizi girmeniz için birer <input> elemanı ve bilgileri göndermek için bir <button> elemanı var. Devam eden birkeç bölümde bu formların nasıl oluşturulduğunu ve bilgilerin server'a nasıl gönderildiğini inceleyeceğiz.

Basit Bir Form Oluşturalım

Bu bölümde kullanmak üzere web sitemize index.html dosyası dışında yeni bir syafa ekleyelim. Sayfamızın adı forms.html olsun

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Formlar</title>
    </head>
    <body>
        <h1>HTML Form Örneği</h1>
        <form>
            
        </form>
    </body>
</html>

Formlar <form> elemanı içinde oluşturulurlar. Şimdi form içine isim ve soyad giriş elemanları ekleyelim.

        <form>
            Adı : <br>
            <input type="text" name="firstname">
            <br>
            Soyadı : <br>
            <input type="text" name="lastname">
        </form>

Koddaki <br> elemanı boş bir eleman ve bulunduğu yerde içeriğin bir alt satıra geçmesini sağlıyor (break). <input> elemanları ise formlarda kullanıcının bilgi girmesi için kullanılan elemanlar. type bağlı özelliğine verilen değere göre bir çok değişik giriş elemanı elde edilebilir. Örnekte type="text" olduğu için düz yazı girilecek bir kutu elemanı çıkıyor karşımıza. name özelliği ise form bilgileri server'a gönderildiğinde bu <input> içindeki bilginin hangi parametre ile iliştirileceğini bildiriyor. Şimdi kullanıcının cinsiyetini seçmesi için seçenekler ekleyelim forma :

        <form>
            Adı : <br>
            <input type="text" name="firstname">
            <br>
            Soyadı : <br>
            <input type="text" name="lastname">
            <br>
            Cinsiyet : <br>
            <input type="radio" name="cinsiyet" value="male" checked>Erkek
            <input type="radio" name="cinsiyet" value="female">Kadın
        </form>

Bu sefer <input> elemanını type="radio" özelliği verdiğimiz için radio buton şeklinde gösteriliyor. name özelliği yine form gönderilince burada seçilen bilginin hangi parametrede olacağını bildiriyor. value özelliği ise bulunan radio buton seçilirse parametrede gönderilen değerin ne olacağı. Yani Erkek seçili iken cinsiyet parametresi değeri male olacak. Kadın seçili ise female olacak. checked ise değeri olmayan bir özellik. Boolean bir özellikdir ve boolean özelliklerin sadece adı girildiğinde değeri true kabul edilir, adı yazılmazsa değeri false kabul edilir. type="radio" olan elemanlarda özelliklerin içinde checked varsa o radio default seçili olarak gelir.

Yukarıdaki radio butonlardan ikisine de checked özelliği girilmezse ikisi de seçilmemiş olarak gelir. İkisi de checked özelliğine sahip olursa tarayıcı sadece ikinciyi seçili gösterecektir. Çünkü aynı eleman altında konulan radio butonların sadece biri seçili olabilir. Şimdi formun gönderme butonunu ekleyelim.

        <form>
            Adı : <br>
            <input type="text" name="firstname">
            <br>
            Soyadı : <br>
            <input type="text" name="lastname">
            <br>
            Cinsiyet : <br>
            <input type="radio" name="cinsiyet" value="male" checked>Erkek
            <input type="radio" name="cinsiyet" value="female">Kadın
            <br><br>
            <input type="submit" value="Gönder">
        </form>

<input> elemanına type="submit" özellik değeri verilirse bir gönderme butonu şeklinde görünür ve çalışır. Ama formu nereye gönderecek? Onu ileride göreceğiz, forma bir aksiyon tanımlanacak. İkinci özellik olan value buton üzerine yazılacak yazıyı bildiriyor. Şimdilik form aksiyonu belirtilmediği için butona tıklarsanız butonu aynı bulunulan sayfaya gönderir. Formu doldurun ve tarayıcınızın adres barına tıklayıp o anki adrese bakın şöyle bir şey olur:

Parametrelerin server'a nasıl gönderildiği ile ilgili kafanızda bir şeyler belirmeye başlamıştır. Ayrıntılarını zamanla göreceğiz.

TextArea Elemanı İçeren Form

<textarea> elemanı çok uzun yazıların girilebileceği bir HTML elemanıdır. Sayfada bir TextArea elemanı kullanan form için örnek bir kod aşağıda görülüyor.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Formlar</title>
    </head>
    <body>
        <h1>HTML Form Örneği</h1>
        <form action="#" method="post">
            <textarea name="message" cols="30" rows="10">
Formlar web sitenizi ziyaret eden kişilerden bilgi toplamak için kullanılırlar.
            </textarea>
            <br><br>
            <input type="submit">
        </form>
    </body>
</html>

Bu sefer <form> elemanına bağlı özellikler görüyoruz. action özelliği formun submit butonuna tıklanınca gönderileceği adresi belirtiyor. Bu örnekte bir adres verilmemiş sadece "#" işareti konmuş, bu durumda form yine aynı sayfaya gönderiliyor. Gerçek uygulamalarda formlar gelen bilgileri bir scriptle işleyen aktif server'lara gönderilir. Şu ana kadar biz pasif server'da yayınlanan statik dediğimiz web sayfalarını yayınlamayı gördük. İlerleyen konularda aktif server kullanmayı da göreceğiz nasipse.

Formun ikinci özelliği olan method ise formu server'a gönderirken hangi teknik kullanılacağını anlatıyor. Normalde web sayfalarımız tarayıcıda gösterilirken server'a http GET metoduyla istekte bulunuluyor. Örnekte ise http POST metodu ile isteğin yapılacağı belirtiliyor. POST metodu veriyi göndermek için kullanılan bir metoddur ve karşıda veriyi işleyebilen bir aktif server olması gerekir. Bunun da çalışmasını ileride göreceğiz.

<textarea> elemanı daha önce dediğimiz gibi çok uzun yazıları barındırabilen bir yazı giriş kutusu. Özellikleri içinde yer alan name daha önce gördüğümüz form elemanları gibi gönderilenn form parametrelerinde bu eleman içinde girilen bilgiyi hangi isimle sakladığımızı belirtir. cols (columns) özelliği eleman genişliğinin kaç karakter olacağını belirtir. rows ise lemanın yüksekliğinin kaç satır alacak kadar olduğunu belirtir. Bir küçük ayrıntı daha, textarea içinde ilk başta olmasını istediğiniz default bir yazı istiyorsanız, yazıyı ya hiç alt satıra geçmeden yazmanız gerekiyor ya da alt satırda soldan boşluk bırakmadan yazmanız. Çünkü bu ve bazı başka elemanlar içerik yazılarındaki boşluk, tab, enter vs. karakter boşluklarını kabul eder, bu sayede solda boşluk bırakırsanız eleman içndeki yazıda da solda boşluk olacaktır.

Gönderme butonunda bu sefer sadece type="submit" özelliği var. value özelliği verilmeyince submit butonu üzerine işletim sisteminizin dilinde bir yazı olur. Mesela bende Gönder yazıyor.

Açılan Listesi Olan Form

Açılan liste (dropdown list) için html <seleect> elemanı kullanılır. Bir form örneği yapalım.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Formlar</title>
    </head>
    <body>
        <h1>HTML Form Örneği</h1>
        <form>
            <select name="meyve">
                <option value="elma">Elma</option>
                <option value="portakal">Portakal</option>
                <option value="ayva">Ayva</option>
                <option value="muz">Muz</option>
            </select>
            <br><br>
            <input type="submit">
        </form>
    </body>
</html>

<select> elemanında listede olacak seçenekler <option> elemanları olarak içeriğinde verilir. Normalde ilk seçenek seçili olarak gelir ama listeden başka biri seçili olarak gelsin isterseniz o seçeneğe selected boolean özelliği eklersiniz. Mesela :

<option value="ayva" selected>Ayva</option>

Yazarsanız sayfa ilk açıldığında Ayva seçeneği seçilmiş olarak form gelecektir. Form gönderilirken select elemanının name özelliği ile verilen isimdeki parametrede , kullanıcının seçtiği option elemanının value özelliğinde verilen değerin aynısı gönderilir.

Form İçinde Gruplama

Form içinde bazı elemanların bir grup içinde toplanması için <fieldset> elemanı kullanılır. Diyelim 2 grup radio buton seçim var , bunları direk form içine koyarsak toplamda sadece biri seçili olabilir. Ama iki gruptan birer tane seçili olması bekleniyor. Bu gruplama için <fieldset> elemanı kullanılır. Örnek :

        <form>
            Adınız : <br>
            <input type="text" name="name" value="Ümit"><br>
            Cinsiyet : <br>
            <fieldset style="width: 250px;">
                <input type="radio" name="cinsiyet" value="male" checked> Erkek - 
                <input type="radio" name="cinsiyet" value="female"> Kadın
            </fieldset><br>
            Yaş : <br>
            <fieldset style="width: 250px;">
                <input type="radio" name="old" value="junior" checked> 0 - 15  
                <input type="radio" name="old" value="senior"> 16 - 65 
                <input type="radio" name="old" value="gold"> 66 - ... 
            </fieldset><br>
            <input type="submit">
        </form>

Yeni olan şeylere bakalım. type="text" olan input elemanında value özelliğine verilen değer başlangıçta içine yazılı geliyor. <fieldset> elemanları etrafında çerçeve çizgisi var. style özelliği ile bağlı elemana CSS stili dediğimiz stil değerleri veriliyor, ayrıntılı olarak göreceğiz stilleri. Buradaki örnek olan style="width: 250px;" ile eleman genişliği 250 piksel olarak belirleniyor. Bu stil değerini kullanmazsak <fieldset> elemanı yatay olarak içinde bulunduğu tüm genişliğe yayılır.

Bir Form Projesi

Yeni bir klasör oluşturup yeni bir projeye başlayalım. Adım adım bir form sayfası yapacağız. Bu sefer stillerde olacak içinde. Proje klasörümüzün adı proje-form olsun. İçine form.html adında bir HTML sayfa kodu ve style.css adında bir stil dosyası ekleyelim. Stil dosyaları web sayfamızın içindeki elemanların stillerini (renkler, büyüklükler, pozisyon vs) belirleyen kodlar içerir.

Önce HTML kodumuzdan başlayalım.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        
    </body>
</html>

Burada bildiğimiz HTML kod dosyası kodu dışında sadece stil dosyamız style.css dosyasının sayfamızın gösteriminde kullanılması için yapılan bir bağlantı var. <link> elemanı kapatma tag'i olmayan bir eleman ve dışarıdan stil dosyalarına bağlama yapmak için kullanılır. rel özelliğinde başvurunun ne için yapılacağı belirtiliyor. Burada başvurulanın bir stylesheet yani stil dosyası olduğu belirtiliyor. type özelliği ile bağlanan dökümanın düz yazı stil kodlarından oluşan CSS dosya türünde olduğu belirtiliyor. href özelliği ise aynı <a> elemanında olduğu gibi bağlanılacak dosyanın adını ve yerini bildiriyor. Örnekte bağlanılan dosya aynı klasörde bulunulan style.css dosyası.

Sayfaya bir form ekleyerek başlayalım:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <form id="hesap" action="#" method="post">
            <fieldset>
                
            </fieldset>
        </form>
    </body>
</html>

Bu sefer <form> elemanına id bağlı özelliğini de ekledik. Bu özellik daha sonra scriptler ve CSS şekillendiricilerin sayfada o elemanı bulması için kullanılır. Sayfanızda aynı id değerine sahip sadece bir tane eleman olmasına özen gösterin. Çünkü id özelliği identification kelimesinden geliyor ve veri tablolarında falan da kullanılır ve tek bir kayda ait işaretleme değeridir. Birden fazla elemana aynı anda erişmek isterseniz class özelliğini kullanın. Gerçi birden fazla elemana aynı id değeri verseniz, çalışmasında sıkıntı olmaz, ama mesela bazı JavaScript kütüphaneleri id değeri ile eleman ararsanız sadece ilk bulduğu elemanı işler.

Şimdilik formda sadece bir <fieldset> elemanı var , o da görselde bir boş çerçeve çizer o kadar. Formun içine kullanıcının sisteme giriş yapması için bir e-mail ve bir şifre giriş kutusu ekleyelim.

<form id="hesap" action="#" method="post">
    <fieldset>
        <h2>E-mail kullanarak giriş yapınız</h2>
        <br>
        <input class="inp" type="text" name="E-mail" value="E-mail">
        <br>
        <br>
        <input class="inp" type="password" name="Password" value="Password">
        <br>
    </fieldset>
</form>

Her iki <input> elemanına da class değeri olarak inp değeri verildi. Biraz sonra stilleri belirlerken bu iki giriş kutusunun da aynı stilde görünmesi için bir tek inp sınıfına stil yazınca ikisi de stil değiştirecek. name değeri daha önce bahsettiğimiz gibi form gönderilirken o elemandan girilen bilginin hangi parametrede olacağını belirtir. Yukarıdaki e-mail girilmesi için konulan kutuda type değeri text'dir, yani düz metin. İkinci kutuda şifre girilecek olduğu için tipi password olarak veriliyor. Çünkü kullanıcı şirfe girerken ekranda girilen karakterlerin görünmesini istemiyoruz. Her iki kutuda da olan value özelliği ise başlangıçta kutu içine yazılı olarak gelmesini istediğimiz default değeri veriyor. Şu anda form görüntüsü şöyle:

Gördüğünüz üzere alttaki şifre alanına girilen karakterler nokta nokta olarak görünüyor. Forma bir tane "Beni Hatırla" seçeneği ile cinsiyet seçimi de ekleyelim.

<form id="hesap" action="#" method="post">

    <fieldset>

        <h2>E-mail kullanarak giriş yapınız</h2>

        <br>

        <input class="inp" type="text" name="E-mail" value="E-mail">

        <br>

        <br>

        <input class="inp" type="password" name="Password" value="Password">

        <br><br>

        <input type="checkbox" name="remember" value="details"> 

            İsim ve Şifreyi Hatırla <br>

        <input type="radio" name="cinsiyet" value="female" checked> Kadın <br>

        <input type="radio" name="cinsiyet" value="male"> Erkek <br>

    </fieldset>

</form>

Burada bilmediğimiz eleman olarak type="checkbox" olan bir <input> elemanı var. Checkbox da bir seçimi belirtmek içindir ama radio butonlar gibi sadece bir tanesinin seçili olması zorunluluğu yoktur. Bir grubun içinde birden fazla checkbox varsa birden fazlası seçilebileceği gibi hiç birinin seçili olmama imkanı da vardır. Eğer kullanıcı bu checkbox'ı tıklayıp seçili yapmışsa form gönderilirken parametrelerinde remember=details değeri de olacaktır. Eğer checkbox seçili değilse parametrede remember isimli bir değer hiç olmadan form gönderilir.

Son olarak forma bir gönderme butonu ekleyelim.

<form id="hesap" action="#" method="post">
    <fieldset>
        <h2>E-mail kullanarak giriş yapınız</h2>
        <br>
        <input class="inp" type="text" name="E-mail" value="E-mail">
        <br>
        <br>
        <input class="inp" type="password" name="Password" value="Password">
        <br><br>
        <input type="checkbox" name="remember" value="details"> 
            İsim ve Şifreyi Hatırla <br>
        <input type="radio" name="cinsiyet" value="female" checked> Kadın <br>
        <input type="radio" name="cinsiyet" value="male"> Erkek <br>
        <input id="login" type="submit" value="Giriş Yap">
    </fieldset>
</form>

Gönderme butonuna da id değeri olarak login değerini verdik. Onun da stilini belirtirken bu id değerini kullanacağız. id ve class değerlerini eleman bağlı özelliklerinde ilk sırada vermeye özen gösterin. Aslında sıralamanın bir önemi yok, ama kodunuzu incelerken bu değerlerin en başta olması özellikle stilleri belirlerken rahatça görmeniz bakımından çok lazım olacak.

Formun CSS Stil Kodlarının Yazılması

style.css dosyamız şu anda boş. İçine yazacağımız kodlarla form elemanlarının görünümünde değişiklikler yapacağız. Öncelikle formdaki <fieldset> elemanını bulup onun stilini değiştireceğiz. style.css dosyamızın içine şu kodu yazalım:

fieldset {
    background-color: #35a1c4;
    border: none;
    border-radius: 10px;
    margin: 55px 0 0 250px;
    width: 450px;
    height: 350px;
}

CSS stil dosyası içinde kod yazarken önce aradığımız eleman(lar)ı bulmak için bir seçici (selector) değer yazarız. Bir eleman türündeki tüm elemanları bulmak için o elemanın ismi yazılır. Burada biz sayfadaki <fieldset> elemanını bulmak istediğimiz için onun adını yani fieldset yazdık. Seçicinin arkasından bir boşluk bırakıp süslü parantez içinde olacak şekilde stil kodları yazılır.

Stil kodu yazarken de alt satıra geçme ve soldan girintilerin kod olarak anlamı yok, sadece görünümü kolaylaştırmak için böyle yapılıyor. Ömemli olan her stil deyiminin sonuna bir noktalı-virgül ( ; ) karakteri eklemek. Şimdi satır satır yazdığımız stil kodlarının fieldset elemanının görünümünü nasıl değiştirdiğine bakalım.

background-color: #35a1c4; deyiminde background-color değiştirmek istediğimiz stil öğesinin adı. Bu isimden kolayca anlaşıldığı üzere elemanın arka plan rengini değiştiriyor. Stil öğesinin adını girdikten sonra iki nokta üsüste karakteri koyup istediğimiz değeri giriyoruz. Burada değer # işareti ile başladığına göre hexadesimal bir renk kodu. Kırmızı Yeşil ve Mavi bileşenleri var. İlk 2 rakamın gösterdiği sayı kırmızı sonraki iki yeşil, son iki rakam da mavi bileşen miktarı. Bu değerler desimal 0-255, hexadesimal 0-ff arası olurlar. Değere bakarsak yeşile çalan bir mavi arkaplan olacak. Zaten VSCode kullanıyorsanız kursörü değerin üzerine getirince size rengi göstererek yardımcı olacaktır.

E-mail kullanarak giriş yapınız

İsim ve Şifreyi Hatırla
Kadın
Erkek
border: none; - Bu stil elemanın çerçeve çizgisini belirlemek için kullanılır ve none değeri verildiyse elemanda çerçeve çizgisi olmayacak demektir.

E-mail kullanarak giriş yapınız

İsim ve Şifreyi Hatırla
Kadın
Erkek

Artık o ince çerçeve çizgisi yok.
border-radius: 10px; - Elemanın köşelerinde 10 piksel çapında bir yuvarlatma yapılacağını bidiriyor.

E-mail kullanarak giriş yapınız

İsim ve Şifreyi Hatırla
Kadın
Erkek
width: 450px; ve height: 350px; - Sırasıyla elemanın genişliğini 450 piksel olarak ve yüksekliğini 350 piksel olarak belirliyor.

E-mail kullanarak giriş yapınız

İsim ve Şifreyi Hatırla
Kadın
Erkek
margin: 55px 0 0 250px; - Margin demek elemanın dışında bırakılacak boşluklar demek. Burada boşluklarla ayrılmış 4 tane değer verilmiş. Sıfırlar için yanında birimin piksel olduğunu belirtmeye gerek yok. Hangi birim kullanılırsa kullanılsın , sıfır sonuçta. Bu 4 değer sırasıyla üst-sağ-alt-sol taraflardaki boşluk bırakma değerleri. Margin o yöndeki elemana göre ölçülür. Bu örnekte <fieldset> elemanının sağında solunda başka eleman olmadığına göre direk görsel alanın sınırlarına olan mesafeler belirtilmiş olur. Yani <fieldset> elemanı üstten 55 piksel aşağıda ve soldan 250 piksel içeride olacak.

Formun şu andaki görünümü şöyle olmalı:

Devam edelim. Formdaki <h2> başlık yazısının stilini de şöyle girelim:

h2 {
    background-color: #0066ff;
    color: #fff;
    margin: 0 -11px 0 -11px;
    padding: 15px;
    position: relative;
    bottom: 4.5px;
    border-radius: 10px;
}

Burada ben tek tek her satır sonrası örnek vermeyeceğim , siz isterseniz satırları tek tek girerek etkisini görün. Bir konu daha bu yazdığımız blok sayfadaki tüm <h2> elemanların stillerini değiştirir. Bu örnekte sadece bir tane h2 olduğu için seçiciyi böyle yazdık. Birden fazla aynı isimde elemandan varsa id ya da class özelliği girerek sadece istediğiniz elemanları seçmeniz gerekir. Hadi stil satırlarını tek tek inceleyelim. Amacımız Başlık yazısını formun en üstünde bir bant şeklinde göstermek.

background-color: #0066ff; başlığın arka renginin biraz daha koyu bir mavi olmasını sağlıyor.

color: #fff; başlık yazı rengini beyaz yapıyor. Burada değer olarak 3 rakamlı #fff girilmiş. 3 rakamlı değerler aslında her rakamdan ikişer ikişer kulanarak yapılanla aynı, yani #ffffff ile ve bu da "beyaz" renk demek.

margin: 0 -11px 0 -11px; - Normalde bir çok diğer eleman gibi başlık elemanlarının da altında ve üstünde default olarak boşluk yapsın diye margin değerleri vardır. Biz başlık bantını en üste yapıştırmak için üst ve altındaki margin değerlerini sıfırlıyoruz. Başlığın sağında ve solunda da içinde bulunduğu <fieldset> elemanının iç boşlukları (padding) yüzünden 11 piksellik default boşluklar oluşuyor. Bunları yok etmek ve başlık bantının sağa ve sola tam sıfır dayalı olmasını sağlamak için sağ ve sola da -11 piksel margin vererek başlığı genişletiyoruz.

padding: 15px; stili bir elemanın iç boşluklarını belirler yani içindeki elemanlarla kenarlar arasında ne kadar boşluk olacak? Burada <h2> elemanı içerisinde sadece yazı var ve biz bu yazının etrafında boşluklar olmasını istediğimiz için padding değeri giriyoruz. Değeri aynı margin gibi 4 tane verirsek her kenara ayrı boşluk girbiliriz, ama biz tüm kenarlardan 15 piksel içeride olsun dersek tek bir değer yazmamız yeterli. Tüm kenarlara aynı değer uygulanacaktır.

position: relative; ve bottom: 4.5px; - Şu ana kadar olan stilleri yükleyip denerseniz, başlık üzerinde küçük bir boşluk olduğu ve başlığın formun üst kenarına tam yapışmadığını görürsünüz. Bunun sebebi içinde bulunduğu <fieldset> elemanının padding değeri. Aslında daha önce sağ ve sol kenar için yaptığımız gibi üste de -11 margin verebilirdik. Fakat burada başka bir şey yapıyoruz. İlk satır olan position: relative; tarayıcıya elemanın olması gereken yere göre başka bir yere kaydırılacağını bildiriyor. bottom: 4.5px; deyimi de elemanın olması gereken pozisyondan 4.5 piksel yukarı kaydırılacağını bildiriyor. Bu değerler denem yoluyla bulunmuş olmalı bence.

border-radius: 10px; - Başlık yukarı kaydı ama arkaplanı transparan olmadığı için köşeleri formun üst köşelerinin yuvarlak görünümünü kapattı. Bu yüzden başlığın da köşelerini 10 piksel yuvarlatılmış yapıyoruz.

Geldik bilgi giriş kutularının stillerine. Hatırlarsak ikisine de class değeri olarak inp vermiştik. Bir class değerine sahip elemanları bulmak için seçici kelime olarak nokta ve arkasından değeri yazarız.

.inp {
    width: 330px;
    height: 40px;
    border: none;
    border-radius: 10px;
    text-align: center;
    margin-left: 50px;
    font-size: 15px;
    font-weight: bold;
}

Daha önce görmediğimiz stillere odaklanalım. Bildiklerimiz şöyle genişlik-330 piksel, yükseklik-40 piksel, sınır çizgisi yok, köşeler 10 piksel yuvarlatılmış. Diğerlerine bakalım:

text-align: center; - İçinde yazı olan elemanlarda yazının ne yana dayanacağını belirtir. center değeri yazının kutunun yatay olarak ortasına yerleştirileceğini bildirir.

margin-left: 50px; - Daha önce tüm margin değerlerini tek satırda vermeyi görmüştük. Bu da sadece soldaki margin değerini değiştiriyor. Yani kutular soldan 50 piksel içeriden başlayacak. Diğer margin seçenekleri margin-top , margin-right ve margin-bottom.

font-size: 15px; - Kutu içindeki yazının boyutunu 15 piksel olarak belirliyor.

font-weight: bold; - Kutu içindeki yazının kalın yazı olacağını bildiriyor.

Son elemanımız da gönderme butonu. Biliyorsunuz on da id değeri olarak login değeri vermiştik. id değerine göre eleman bulmak için seçici olarak önce bir diyez işareti (#) arkasından id değeri yazılır.

#login {
    width: 150px;
    height: 45px;
    border-radius: 10px;
    border: none;
    margin-top: -7px;
    background-color: #f50f41;
    color: white;
    margin-left: 145px;
    font-size: 20px;
    font-weight: bold;
}

Buton büyütülüyor, yazıları büyütülüyor, buton formun yatay olarak ortalarına alınıyor. Dikkat ederseniz bu sefer color değerini white olarak isim verdik. Olası renk isimleri W3School sitesinde gösteriliyor.

Client Tarafta Form Girdilerini Saklamak

Burada çok basit bir işlemle formdan girilen bir bilginin kullanıcının bilgisayarında tarayıcı tarafından nasıl saklanabileceği konusunda bilgi vereceğiz. Bu örnek projemizde JavaScript programlama kullanacağız. JavaScript programlama dilini ileride ayrıntılı işleyeceğiz, ama burada formları işlerken en azından böyle bir şeyin yapılabileceğine dair ön bilgi verelim. Çok anlamasanızda yönlendirmeleri takip edin. İleride JavaScript kodlara çok daha hakim olacaksınız ve bu kısımda anlatılanları da anlayacaksınız.

Öncelikle yerel-sakla.html adıyla yeni bir sayfa dosyası üretin ve içine şunları aynen kopyalayın.

<!DOCTYPE html>
<html>
    <head>
        <title>Yerele Kaydetmek</title>
        <script>
            function save() {
                var isim = document.getElementById("firstname").value;
                localStorage.setItem("text", isim);
            }
            function retrieve() {
                var retrieveData = localStorage.getItem("text");
                if(retrieveData) {
                    document.getElementById("firstname").value = retrieveData;
                }
            }
            function removed() {
                document.getElementById("firstname").value = "";
                localStorage.removeItem("text");
            }
        </script>
    </head>
    <body onload="retrieve()">
        <h1>Adınızı Giriniz</h1>
        <form>
            <input type="text" id="firstname">
            <input type="button" value="Kaydet" onclick="save()">
            <input type="button" value="Sil" onclick="removed()">
        </form>
    </body>
</html>

Adınızı Giriniz

HTML kodumuzun <head> bölümünde JavaScript kodumuzu girdiğimiz <script> elemanı var. Bu eleman içine yazılanlar tarayıcınız tarafından JavaScript program kodu olarak algılanır ve çalıştırılır. Bu kısmı incelerseniz 3 bloktan oluşuyor. Her bir blokta bir fonksiyon tanımlanıyor. Bunlar sayfamızı işlerken kullanacağımız fonksiyonlar. Bunların ne iş yapacağını kısaca anlatayım.

save() fonksiyonu üzerinde Kaydet yazan butona tıklandığında çalışacak olan fonksiyon. Form içinde Kaydet butonu koduna bakarsanız onclick="save()" özelliği verilmiş. Bu butona tıklanınca save() fonksiyonunun çalışmasını istiyoruz demişiz. save() fonksiyonu var isim = document.getElementById("firstname").value; satırında isim değişkenine id değeri "firstname" olan kutunun içindeki yazıyı alıyor. Notasyonu şimdilik dert etmeyin, ayrıntılarını göreceğiz. Daha sonra localStorage.setItem("text", isim); satırı tarayıcının kendisi için kullandığı yerel saklama alanına okunan bu isim değerini text anahtar kelimesi ile kaydediyor.
retrieve() fonksiyonu <body> elemanının onload olayına bağlanmış. Bu fonksiyon da sayfayı ilk yüklediğinizde ya da refresh (yenile) ettiğinizde çalışacak demektir. Burada ilk önce tarayıcının yerel hafızasındaki text anahtar değerine sahip vberinin değeri okunuyor. Altındaki if(retrieveData) deyimi okunan değer varsa arkasından gelen bloğun içindeki kodun çalışmasına izin verecek. Eğer yerel hafızada bilgi bulunamamışsa blok çalışmaz ve bu fonksiyon da bir şey yapmaz. Ama değer okunması başarılıysa (yani daha önce save butonu ile hafızaya bir değer kaydedilmişse) id değeri firstname olan kutumuzun içine hafızadaki değer yazılır.
removed() fonksiyonu ise yerel hafızadan ve kutunun içinden önceden girilmiş olan değerleri siliyor. Bu fonksiyon da üzerinde Sil yazan butonun onclick özelliğine bağlanmış, yani o tıklanınca çalışacak.

Tarayıcının yerel hafızasında ne olduğunu görmek için o tarayıcıya ait Geliştirici Araçları (ya da Developer Tools) penceresini açmak gerekiyor. Menüden bu pencereyi açabilirsiniz. Ben Opera web browser kullanıyorum ve onda şuna benzer bir görüntü oluyor:

Geliştirici Araçlarını ileride çok kullanacağız. Gördüğünüz gibi text anahtarına sahip değer bizim girdiğimiz değer. Bu değer tarayıcı kapansa da hafızada kalır, daha sonra tarayıcı tekrar açıldığında bu değer kullanılabilir. Örnek olarak altında gördüğünüz Session storage de aynı saklama işini yapar ancak tarayıcıyı kapatıp açınca değerler silinir. Session storage genellikle web siteleri tarafından sizin o anda yapmakta olduğunuz seçimleri falan geçici kaydetmek için kullanılır.

Formlarla ilgili şimdilik bu kadar. Sayfa da baya bir uzadı. Burada bir ara verip 3. bölüm sayfasıyla devam edelim.

< 1. Bölüm 3. Bölüm >