Bu tasarım, basit bir login formu oluşturur. Formun başlığı, iki giriş alanı ve bir Giriş Yap düğmesi içerir. Giriş adı ve şifre girişi, gerekli olduğundan, formu göndermeden önce doldurulması zorunludur. Formun kenarlıkları yuvarlatılmıştır ve bir gölgelendirme efektiyle zeminle ayırt edilir. Sayfa arka planı hafif bir gri renktedir ve font, Arial veya benzer bir sans-serif yazı tipidir.
Stil dosyası
/* Genel stiller */
body {
font-family: Arial, sans-serif;
background-color: #F4F4F4;
padding: 0;
margin: 0;
}
/* Form stilleri */
form {
background-color: #FFFFFF;
max-width: 400px;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #FFFFFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3E8E41;
}Forum Öğeleri
<form action="post edilecek sayfa" method="POST">
<h2>Login (Üye Giriş)</h2>
<label for="username">Kullanıcı Adı</label>
<input type="text" id="username" name="username" required>
<label for="password">Şifre</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Giriş Yap">
</form>Tüm Kodlar Bir arada
<!DOCTYPE html>
<html lang="TR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login (Üye Giriş) Sayfası</title>
<style>
/* Genel stiller */
body {
font-family: Arial, sans-serif;
background-color: #F4F4F4;
padding: 0;
margin: 0;
}
/* Form stilleri */
form {
background-color: #FFFFFF;
max-width: 400px;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #FFFFFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3E8E41;
}
</style>
</head>
<body>
<form>
<h2>Login (Üye Giriş) </h2>
<label for="username">Kullanıcı Adı</label>
<input type="text" id="username" name="username" required>
<label for="password">Şifre</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Giriş Yap">
</form>
</body>
</html>Bunu Paylaş
