Un código de qatar2023

1151 qatar2023

Abrir en el editor Publica tu código

Recomendado

30 November 2025

Formulario de inicio de sesión HTML (francés)

11 March 2025

Un código de stevenolaeem

23 October 2024

Tipografía animada de diseño digital VFS

HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نموذج تسجيل الدخول</title>
    <style>
        /* Basic styling for the login form */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            direction: rtl; /* Ensure body content flows right-to-left */
        }
        .login-container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 350px;
            text-align: center;
        }
        .login-container h2 {
            margin-bottom: 25px;
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
            text-align: right; /* Align labels and inputs to the right */
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: bold;
        }
        .form-group input[type="text"],
        .form-group input[type="password"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box; /* Include padding in width */
            font-size: 16px;
            text-align: right; /* Input text direction */
        }
        .form-group input[type="text"]:focus,
        .form-group input[type="password"]:focus {
            border-color: #007bff;
            outline: none;
        }
        .login-button {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .login-button:hover {
            background-color: #0056b3;
        }
        .forgot-password {
            margin-top: 15px;
            font-size: 14px;
        }
        .forgot-password a {
            color: #007bff;
            text-decoration: none;
        }
        .forgot-password a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>تسجيل الدخول</h2>
        <form action="#" method="POST">
            <div class="form-group">
                <label for="username">اسم المستخدم:</label>
                <input type="text" id="username" name="username" required placeholder="أدخل اسم المستخدم الخاص بك">
            </div>
            <div class="form-group">
                <label for="password">كلمة المرور:</label>
                <input type="password" id="password" name="password" required placeholder="أدخل كلمة المرور الخاصة بك">
            </div>
            <button type="submit" class="login-button">تسجيل الدخول</button>
            <div class="forgot-password">
                <a href="#">هل نسيت كلمة المرور؟</a>
            </div>
        </form>
    </div>
</body>
</html>

Un código de qatar2023

Recomendado

Formulario de inicio de sesión HTML (francés)

Un código de stevenolaeem

Tipografía animada de diseño digital VFS

HTML

CSS

JS

Recomendado

Formulario de inicio de sesión HTML (francés)

Un código de stevenolaeem

Tipografía animada de diseño digital VFS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS