HTML ve CSS Kullanarak Kullanıcı Kayıt Ol Sayfası Oluşturma

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Merhabalar!

Bu bölümde HTML ve CSS kullanarak bir kullanıcı kayıt olma sayfası oluşturacağız.

HTML Yapısı:


Önceki bölümlerde HTML Yapısı oluşturmayı öğrenmiştik, eğer HTML Yapısı oluşturmayı bilmiyorsanız önceki HTML makalelerini ziyaret edebilirsiniz.

Öncelikle, HTML yapısını oluşturalım. Bu yapı, form elemanlarını ve kayıt ol butonunu içerecek.


<!DOCTYPE html>
<html>
<head>
    <title>Kayıt Olma Formu</title>
</head>
<body>

    <form method="post" action="register.php">
        <div class="form-group">
            <label for="name">Adınız</label>
            <input type="text" id="name" name="name">
        </div>
        <div class="form-group">
            <label for="email">E-posta</label>
            <input type="email" id="email" name="email">
        </div>
        <div class="form-group">
            <label for="password">Şifre</label>
            <input type="password" id="password" name="password">
        </div>
        <button type="submit">Kayıt Ol
    </form>

</body>
</html>

Yukarıda Ne Yaptık?


Döküman Başlangıcı ve Başlık:

  1. <!DOCTYPE html> ile HTML5 belgesi başlatılır.
  2. <html> etiketi HTML dökümanının başlangıcını gösterir.
  3. <head> bölümünde sayfanın başlığı ve stil dosyasına bağlantı yer alır. Burada <title> etiketi sayfa başlığını tanımlar ve <link> etiketi CSS dosyasını HTML'e bağlar.

Gövde ve Form Yapısı:

  1. <body> etiketi, sayfanın gövdesini tanımlar.
  2. <form> etiketi, formun başlangıcını ve sonunu gösterir. action özelliği form verilerinin işleneceği sunucu adresini, method özelliği ise veri gönderme yöntemini (burada post ) belirtir.
  3. <input> etiketleri: Kullanıcıdan veri almak için kullanılır. Örneğin, ad, e-posta, şifre gibi bilgiler için.
  4. <label> etiketleri: Her input alanının açıklaması için kullanılır.
  5. type özelliği: Input alanlarının türünü belirtir (örneğin text, email, password).
  6. name özelliği: Form verileri gönderildiğinde, bu verilerin tanımlayıcısıdır.
  7. <button> veya <input type="submit">: Formu göndermek için kullanılır.

CSS Yapısı:


Şimdi, bu HTML yapısını stilize edelim. CSS dosyasını (style.css) oluşturun ve aşağıdaki kodları ekleyin.


         body {
            font-family: Arial, sans-serif;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"], input[type="email"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        button {
            padding: 10px 15px;
            background-color: blue;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: darkblue;
        }
 

Bu yapının sonucunda, kullanıcıdan kullanıcı adı, şifre ve email girmesini isteyen, basit ve şık bir giriş sayfası elde edilir. Bu sayfa, kullanıcıların kayıt olmaları için temel bir arayüz sağlar ve ihtiyaçlar doğrultusunda daha da geliştirilebilir.

Bu yapı sonrasında verileri işlemek için action bölümünde bulunan register.php dosyasının bulunduğundan emin olun, eğer bir login action php dosyası oluşturmadıysanız ve oluşturmak istiyorsanız PHP bölümünü ziyaret edebilirsiniz.

Sizin İçin Önerdiklerimiz

Blog Resim
HTML Dosyaları Nasıl Oluşturulur? (Ders-1)

HTML

HTML (Hyper Text Markup Language), web sitelerinin yapısal temelini oluşturan bir programlama dilidir. Bu programlama dili, web tasarımına yeni..

Devamını Oku
Blog Resim
HTML (h1, h2, h3) Başlık Etiketleri ve Kullanımı

HTML

HTML başlık etiketleri, bir web sayfasının içeriği hakkında bilgi verir ve arama motorlarına içeriğin neyle ilgili olduğunu açıklar. Bu nedenle, başlık etiketlerinin..

Devamını Oku
Blog Resim
Web Sitelesine Sosyal İkonlar Ekleme Kodu

HTML

Sosyal medya, modern çevrimiçi varlığın ayrılmaz bir parçasıdır ve web sitelerine sosyal medya ikonları eklemek, ziyaretçilerin markanızla sosyal platformlarda etkileşime girmesini teşvik eder.

Devamını Oku
Blog Resim
HTML Nitelikleri Nelerdir? Nasıl Kullanılır? (Ders-3)

HTML

HTML Derslerinin 3. bölümüne hoşgeldiniz, HTML (Hyper Text Markup Language), web sayfalarının yapısını ve içeriğini oluşturmak için kullanılan..

Devamını Oku