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:
<!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.<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.<input>etiketleri: Kullanıcıdan veri almak için kullanılır. Örneğin, ad, e-posta, şifre gibi bilgiler için.<label>etiketleri: Her input alanının açıklaması için kullanılır.typeözelliği: Input alanlarının türünü belirtir (örneğintext,email,password).nameözelliği: Form verileri gönderildiğinde, bu verilerin tanımlayıcısıdır.<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.
