1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Web Tasarım - Formlar

'Html - CSS - XML - JavaScript - Ajax' forumunda Lesyoner tarafından 14 Kasım 2020 tarihinde açılan konu

  1. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,880
    Meslek:
    Öğrenci.

    Özel Mesaj
    Merhabalar
    Bir önceki konumuz navbardı
    konu linklerine aşağıdaki bağlantılardan ulaşabilirsiniz.

    https://forum.ayyildiz.org/konu/web-tasarım-navbar.163633/
    https://forum.ayyildiz.org/konu/1-giriş-seviyesi-web-tasarım.163521/

    Formlar

    Form nedir? nasıl kullanılır?

    Formlar kullanıcı girişi, kayıt işlemleri gibi
    bir çok işlem için kullanılabilmektedir.

    Örnek form:

    [​IMG]

    Nasıl form oluşturabiliriz?


    metin editörümüzü açıyoruz daha sonra bootstrapın resmi websitesinde "forms" diye arama yapıyoruz

    [​IMG]

    kodlarımızı kopyalıyoruz ve dosyamıza yapıştırıyoruz..

    [​IMG]

    Çok şekilsiz durdu değil mi?

    buna bir çekin düzen vermek şart

    [​IMG]

    Önce türkçeleştirelim ve şekil verelim

    [​IMG]

    Bunu nasıl yaptım?

    önce bir card oluşturdum.. bootstrap bunu yapabilmek için aşağıda vereceğim kodları kullanmanız gerekir..

    Kod:
    <div class="card" style="width: 18rem;">
      <div class="card-body">
    
    
      </div>
    </div>
    arasına form kodlarımızı yapıştırdım daha sonra ortalanması için CSS kodu verdim CSS kodunu aşağıya bırakıyorum

    Kod:
        <style type="text/css">
            .card {
                margin: 0 auto; /* Added */
                float: none; /* Added */
                margin-bottom: 10px; /* Added */
            }
        </style>
    ve ortalandı...

    ama sanki hala bir şeyler eksik gibi? evet placeholder eksik...

    nedir bu placeholder?

    placeholder inputun içinde yazılan yazılardır örneğin

    "lütfen şifrenizi giriniz"

    tarzında...

    bunu nasıl ekleyeceğiz?

    [​IMG]

    Birazda olsa iyi oldu fakat sanki hala eksik var gibi? mesela üste bir logo ekleyebiliriz?
    hemen yapalım...

    [​IMG]


    herhangi bir resimi seçiyoruz

    [​IMG]

    en üste kodumuzu yazıyoruz

    [​IMG]

    Sanırım böylesi daha güzel oldu.

    bir sonraki konuda görüşmek üzere ...


     
    Selvi5885, iEsat, Orion-Pax ve 1 kişi daha bunu beğendi.
  2. Orion-Pax Guest

    • Guest
    Katılım:
    10 Mayıs 2018
    Mesaj:
    2,102
    Alınan Beğeniler:
    6,697
    Meslek:
    Sosyal Medya Uzmanı

    Özel Mesaj
    elinize, emeğinize sağlık. kolay gelsin diyor, iyi forumlar diliyorum. saygılar.
     
    Lesyoner bunu beğendi.
  3. osman521 Guest

    • Guest
    Katılım:
    14 Ekim 2020
    Mesaj:
    13
    Alınan Beğeniler:
    9

    Özel Mesaj
    elinize, emeğinize sağlık.
     
    Orion-Pax bunu beğendi.

Bu Sayfayı Paylaş