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 Yazı Elementleri ve Kullanım Örnekleri (Ders-5)

HTML

Merhabalar! 5. Bölüme Hoşgeldiniz, bu bölümde HTML yazılarının elementleri ve kullanım örneklerini göstereceğiz. HTML (Hyper Text Markup Language)..

Devamını Oku
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 Elementleri Nelerdir? Nasıl Kullanılır? (Ders-2)

HTML

Günümüzde, internet siteleri markaların online varlıklarını temsil eden en önemli unsurlar arasında yer almaktadır. Bu sebeple, web sitelerinin..

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

HTML

Bu bölümde HTML Stillerini inceleyeceğiz. Günümüzde internetin hayatımızdaki yeri her geçen gün artmakta ve web sayfalarının tasarımı da aynı şekilde..

Devamını Oku