Arabic Login Form HTML CSS

1150 qatar2023

Open In Editor Publish Your Code

<!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>

Arabic Login Form HTML CSS

Recommended

CSS Animated Loading Screen HTML Example

HTML Landing Page

Basket Random Game HTML5 Source Code

HTML

CSS

JS

Recommended

CSS Animated Loading Screen HTML Example

HTML Landing Page

Basket Random Game HTML5 Source Code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS