Giriş Formu CSS

Today at 11:51 OP

Thread Starter #0

Giriş formları, web uygulamalarının en temel bileşenlerinden biridir. Kullanıcıların sisteme erişimini sağlamak için gerekli olan bu formlar, kullanıcı deneyimini artıracak şekilde tasarlanmalıdır. Aşağıda, bir giriş formunun CSS ile nasıl stilize edileceğine dair örnekler ve açıklamalar sunulacaktır.

1. Temel HTML Yapısı

İlk olarak, basit bir giriş formu oluşturmalıyız. Aşağıdaki HTML kodu, formun temel yapısını oluşturmaktadır:

CODE

12345678910

    Kullanıcı Adı:
    

    Şifre:
    

    Giriş Yap

2. CSS ile Stil Verme

Formun görünümünü geliştirmek için CSS kullanarak stiller ekleyebiliriz. Aşağıda, formun daha çekici görünmesi için bazı CSS stil tanımlamaları verilmiştir:

CODE

123456789101112131415161718192021222324252627282930313233343536373839
.login-form {
    width: 300px;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.login-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.login-form button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-form button:hover {
    background-color: #0056b3;
}

3. Açıklamalar

Form Genişliği ve Merkezi Konumlandırma: Formun genişliği 300 piksel olarak ayarlanmış ve margin ile ortalanmıştır.
Arka Plan Rengi ve Kenar Yuvarlama: Formun arka plan rengi açık gri tonunda belirlenmiş ve kenarları yuvarlatılmıştır.
Giriş Alanları: Giriş alanlarının genişliği %100 olarak ayarlanmış, böylece formun içinde düzgün bir görünüm sağlanmıştır.
Buton Stili: Buton, mavi bir arka plana sahip olup, üzerine gelindiğinde daha koyu bir mavi tonuna geçiş yapmaktadır.

Bu örnek, basit bir giriş formunun CSS ile nasıl stilize edilebileceğini göstermektedir. Daha karmaşık formlar için, stil ve yapılandırmalar genişletilebilir. Form tasarımında dikkat edilmesi gereken en önemli nokta, kullanıcı deneyimini ön planda tutmaktır.

Similar threads

Report Content