form validation ب html & css


فهاد الدرس الجديد من سلسلة html & css غادي نشوفو كيفاش نديرو form validation ب html & css بطريقة بسيطة للمبتدئين فهنا مكيعنيش بلي غادي نستغناو على ل validation لي كنديرو ب php او لا بلغة أخرى فهنا فقط غادي نشوفو validation بطريقة مبسطة بإستعمال ل html و css.

نظرة سريعة بالفيديو

1- الملف index.html

أول حاجة كنزيد projet جديد سميه لي بغيتي انا سميتو html5_form منبعد فيه غادي نزيد ملف جديد سميه index.html فيه فورم عادي فيه des champs ولي كلهم required يعني حتى واحد ما يبقى خاوي ولي باستخدام css غادي نزيدو عليهم الإضافات لي بغينا الكود ديال الملف هو :

                                <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Html 5 Form</title>
</head>

<body>
    <div class="container">
        <h3>Inscription</h3>
        <hr>
        <form method="post">
            <label for="first">Nom*</label>
            <input type="text" autofocus required name="first" placeholder="Entrer votre nom">
            <label for="last">Prénom*</label>
            <input type="text" required name="last" placeholder="Entrer votre prénom">
            <label for="email">Email*</label>
            <input type="email" required name="email" placeholder="Entrer votre email">
            <label for="password">Passe*</label>
            <input type="password" required name="password" placeholder="Entrer votre mot de passe">
            <button type="submit">Valider</button>
        </form>
    </div>
</body>

</html>
                            

2- الملف style.css

منبعد كنزيد ملف جديد سميه style.css فيه كاين الكود css لي غادي يديرنا تغييرات على الفورم ديالنا فكل input كنعطيها طول وعرض محدد من بعد كنزيد لها border فليمن رمادي ومنبعد يلا كانوا invalid يعني خاويين كنعطيهم border حمر على ليسر أما يلا كانوا valid فكنعطيهم ل border خضر فبلاصت لحمر الكود ديال الملف هو:

                                body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 100px;
}
.container{
    background: #F7F2F2;
    width: 30%;
    margin: auto;
    border: 2px solid #A19A9A;
    border-radius: 2px;
}
form{
    padding: 10px;
    margin-left: 40px;
}
form input,label{
    display: block;
    margin-bottom: 10px;
}
input{
    height: 30px;
    width: 300px;
    border: 1px solid #000000;
    border-radius: 2px;
    padding: 5px;
    font-size: 20px;
    border-right: 7px solid gray;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
button{
    background: #0A9B4B;
    color:#F7F2F2;
    padding: 10px;
    border:3px solid #000;
    cursor: pointer;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
input:focus:invalid{
    border-left: 7px solid red;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
input:focus:valid{
    border-left: 7px solid green;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
input:focus{
   outline:none;
}
h3{
    text-align: center;
    font-size:20px;
    color:#0A9B4B;
}
                            

                                
                            


بحث في الموقع


إشترك للتوصل بالجديد