HTML ve CSS Kullanarak Kullanıcı Giriş Sayfası Oluşturma

Kategori: HTML

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

Merhabalar!

Bu bölümde HTML ve CSS kullanarak bir kullanıcı giriş 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 giriş butonunu içerecek.


 <!DOCTYPE html>
 <html>
 <head>
    <title>Giriş Sayfası</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="login-container">
        <form action="/submit-your-login-form.php" method="post">
            <h2>Giriş Yap</h2>
            <div class="input-group">
                <label for="username">Kullanıcı Adı</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Şifre</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Giriş Yap</button>
        </form>
    </div>
</body>
</html>

Yukarıda Ne Yaptık?

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

<!DOCTYPE html> ile HTML5 belgesi başlatılır.
<html> etiketi HTML dökümanının başlangıcını gösterir.
<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ı:

<body> etiketi, sayfanın gövdesini tanımlar.
login-container sınıfına sahip bir <div> içinde, form elemanları yer alır.
<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.
Form içinde <h2> etiketi başlık için kullanılır.
Kullanıcı adı ve şifre için iki <div> grubu oluşturulur. Her grup bir <label> ve bir <input> içerir. label etiketleri, giriş alanlarını tanımlar, input etiketleri ise kullanıcıdan veri almak 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;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.login-container {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h2 {
    text-align: center;
    color: #333;
}

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

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

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #5c6bc0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #3f51b5;
}

Yukarıda Ne Yaptık?

Genel Stiller:

body seçicisi ile sayfanın genel arka plan rengi, yazı tipi ve diğer merkezleme stilleri tanımlanır.
Sayfanın tam ortasında içeriği göstermek için display: flex, justify-content: center ve align-items: center gibi Flexbox özellikleri kullanılır.

Login Container Stilleri:

.login-container sınıfı ile formun ana kutusuna stil verilir. Arka plan rengi, padding, kenar yuvarlaklığı ve gölge efekti eklenir.

Form Elemanları Stilleri:

h2 ile form başlığının metin hizalama ve rengi ayarlanır.
.input-group ile her giriş grubunun altındaki boşluk ayarlanır.
label ve input elemanlarına ait stiller tanımlanır. input elemanları için genişlik, padding, kenarlık ve kenar yuvarlaklığı belirlenir.

Buton Stilleri:

button seçicisi ile giriş butonuna stil verilir. Genişlik, padding, arka plan rengi, yazı rengi ve kenarlık ayarları yapılır.
button:hover ile butonun üzerine gelindiğinde arka plan renginin değişmesi sağlanır.

Bu yapının sonucunda, kullanıcıdan kullanıcı adı ve şifre girmesini isteyen, basit ve şık bir giriş sayfası elde edilir. Bu sayfa, kullanıcı girişi 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 /submit-your-login-form.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.