HTML

Html – Login (Üye giriş) Sayfası

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ş
Pin Share

KoMedya

2000 yıllarda başlayan web tasarım heyecanı her geçen gün artarak devam ediyor. Bu kadar yıllık tecrübemi artık insanlara aktarma zamanı geldi de geçiyor. Birlikte güzel tasarımlar da buluşmak dileklerimle...

Bir yanıt yazın

Bizi Sosyal Medyadan Takip edebilirsiniz.