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-containersı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 (buradapost) 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:
bodyseç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: centervealign-items: centergibi Flexbox özellikleri kullanılır.
Login Container Stilleri:
.login-containersınıfı ile formun ana kutusuna stil verilir. Arka plan rengi, padding, kenar yuvarlaklığı ve gölge efekti eklenir.
Form Elemanları Stilleri:
h2ile form başlığının metin hizalama ve rengi ayarlanır..input-groupile her giriş grubunun altındaki boşluk ayarlanır.labelveinputelemanlarına ait stiller tanımlanır.inputelemanları için genişlik, padding, kenarlık ve kenar yuvarlaklığı belirlenir.
Buton Stilleri:
buttonseçicisi ile giriş butonuna stil verilir. Genişlik, padding, arka plan rengi, yazı rengi ve kenarlık ayarları yapılır.button:hoverile 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.
