تصميم نموذج تسجيل أو اشتراك مستخدم جديد باستخدام HTML و CSS يعمل على جميع الأجهزة
في هذه المقالة سأشارك معكم كود بسيط ونظيف ومطابق للمواصفات العالمية لتصميم نموذج تسجيل دخول باستخدام HTML و CSS.
مقدمة
يعتبر نموذج الاشتراك أو التسجيل في موقعك من أهم الأمور التي يجب أن تنتبه لها، فعندما يقرر المستخدم إنشاء حساب جديد في موقعك فعلى الأغلب لن يخصص وقت كبير لذلك وسيقوم بإلغاء الأمر في حال صادفته أي مشكلة او في حال لم تكن التجربة سلسلة وسهلة. لذلك ننصح بشدة أن تقوم بالاهتمام الكبير بنموذج تسجيل الاشتراك وتجريبه على عدة منصات وأجهزة موبايل أو لابتوب.
الخرج المتوقع
عند الانتهاء من التصميم ستحصل على الشكل التالي عند تشغيله على مستعرض لابتوب:
أما عند استعراض النموذج على أجهزة الموبايل بشاشة صغيرة سيكون الشكل كمايلي (لاحظ كيف يحافظ النموذج على شكله بدون أن تتداخل المكونات ببعضها).
الكود البرمجي لتصميم نموذج اشتراك Sign Up form
<!DOCTYPE html>
<html>
<style>
/*add full-width input fields*/
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
/* set a style for the main container */
.main-container {
direction: rtl;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 700px;
}
/* set a style for all buttons*/
button {
background-color: Green;
color: white;
padding: 15px 20px;
margin: 8px 0;
cursor: pointer;
width: 100%;
}
/*set styles for the cancel button*/
.cancelbtn {
padding: 15px 20px;
background-color: #FF2E00;
}
/*float cancel and signup buttons and add an equal width*/
.cancelbtn,
.signupbtn {
float: left;
width: 50%;
}
/*add padding to container elements*/
.container {
padding: 16px;
}
/*clear floats*/
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*styles for cancel button and signup button
on extra small screens*/
@media screen and (max-width: 300px) {
.cancelbtn,
.signupbtn {
width: 100%;
}
}
</style>
<body>
<div class="main-container">
<h2>إنشاء حساب جديد</h2>
<!--Step 1:Adding HTML-->
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<label><b>البريد الالكتروني</b></label>
<input type="text" placeholder="أدخل بريدك الالكتروني هنا" name="email" required>
<label><b>كلمة السر</b></label>
<input type="password" placeholder="كلمة السر" name="psw" required>
<label><b>تأكيد كلمة السر </b></label>
<input type="password" placeholder="تأكيد كلمة السر" name="psw-repeat" required>
<input type="checkbox" checked="checked"> تذكرني
<p>لإنشاء حساب، يجب الموافقة على <a href="#"> شروط الاستخدام & الخصوصية </a>.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">إلغاء الأمر</button>
<button type="submit" class="signupbtn">إنشاء حساب</button>
</div>
</div>
</form>
</div>
</body>
</html>
بالنهاية تستطيع إضافة اي عنصر تريده على النموذج مثل الاسم الأول والأخير بتكرار العناصر في الأعلى.
كما تستطيع اضافة ال div الخاصة بالنموذج main-container إلى أي صفحة تريدها وخصوصا في حال كنت قد أعددت header او footer خاصة بموقعك.