طراحی فرم ثبت نام جذاب سایت با استفاده از CSS و JS

در این مطلب، در قالب یک پروژه ساده و جذاب طراحی فرم ثبت نام وب سایت، قصد یادگیری HTML، جاوا اسکریپت و CSS را داریم.

طراحی وب سایت با استفاده از زبان های HTML و CSS انجام می شود. بیشتر کاربران امروزه از این دو زبان استفاده نمی کنند. اغلب از صفحه ساز ها و کد های آماده برای طراحی صفحات وب سایت استفاده می کنند. اما در این مطلب قصد طراحی فرم ثبت نام یک وب سایت از پایه و با قابلیت های جذاب را داریم. در این آموزش برای بررسی صحت اطلاعات از جاوا اسکریپت نیز استفاده می کنیم.

طراحی فرم ثبت نام

برای طراحی فرم ثبت نام از دو input و یک دکمه برای ثبت اطلاعات استفاده می کنیم. پس در ابتدا کد های HTML به شکل زیر خواهد بود:

<form action="" class="register">
    <h1><i class="fa-solid fa-lock"></i> فرم ثبت نام</h1>
    <input type="text" id="username" required>
    <input type="password" id="password" required>
    <button id="submit"><i class="fa-solid fa-right-to-bracket"></i> ثبت نام</button>
    <a href="#" id="login">عضو هستم!</a>
</form>

در این کد دو ورودی برای نام کاربری و کلمه عبور ایجاد کردیم. اما با توجه به طراحی مدرن و بروز، باید از لیبل ها نیز استفاده کنیم. برای پیاده سازی افکت کنار رفتن لیبل ها باید input و لیبل مربوط را در یک بخش قرار دهیم. سپس با استفاده از CSS، لیبل را بر روی ورودی های خود قرار دهیم. پس کد های HTML به شکل زیر تغییر می کنند:

<form action="" class="register">
    <h1><i class="fa-solid fa-lock"></i> فرم ثبت نام</h1>
    <div class="input">
        <input type="text" id="username" required>
        <label for="username">نام کاربری</label>
    </div>
    <div class="input">
        <input type="password" id="password" required>
        <label for="password">کلمه عبور</label>
    </div>
    <button id="submit"><i class="fa-solid fa-right-to-bracket"></i> ثبت نام</button>
    <a href="#" id="login">عضو هستم!</a>
</form>

حال سراغ نوشتن استایل ها در فایل CSS خود می رویم. در مرحله اول فرم خود را زیبا می کنیم:

.register {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: #fff;
  padding: 40px 30px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

برای طراحی فرم ثبت نام با استفاده از زمینه سفید و ایجاد سایه، آن را از زمینه جدا می کنیم. سپس با padding ها کمی از اطراف فاصله ایجاد می کنیم. برای جاگذاری صحیح المان ها نیز از flex استفاده می کنیم.

در مرحله بعد به input ها و label ها استایل می دهیم. در اینجا با استفاده از position: relative باکس و position: absolute لیبل ها، آن ها را در جای مورد نظر خود قرار می دهیم. با استفاده از رنگ زمینه، خط حاشیه و ایجاد فضای خالی، رابط کاربری فرم خود را ایجاد می کنیم:

.input {
  width: 350px;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
}
.input label {
  position: absolute;
  top: 20px;
  right: 15px;
  color: #666;
  z-index: 10;
  transition: all 0.3s ease;
}
.input input {
  width: 100%;
  padding: 25px 15px 15px 15px;
  background-color: transparent;
  border: none;
  outline: none;
  z-index: 20;
}

برای اجرای انیمیشن جابجایی لیبل ها به سادگی از تغییر مقدار top استفاده می کنیم. با این کار در صورت focus کاربر و یا وجود مقدار در داخل input ها، لیبل بالا می رود:

.input input:focus + label,
.input input:valid + label {
  top: 10px;
  font-size: 10px;
}

تا اینجا طراحی بخش اصلی فرم ثبت نام تمام می شود. در مرحله بعدی سراغ ایجاد خطا برای انتخاب کلمه عبور و امکان نمایش کلمه عبور به کاربر می رویم.

اعتبارسنجی فرم ثبت نام

برای اعتبار سنجی و طراحی فرم ثبت نام بهتر، باید از جاوا اسکریپت استفاده کنیم. ابتدا سراغ سنجش ورودی کاربر می رویم. برای این کار پیام های مورد نظر خود را در پایین فرم اضافه می کنیم:

<div id="passwordError">
    <strong>کلمه عبور باید شامل:</strong>
    <p id="er1"><i id="er1i" class="fa-regular fa-circle-xmark"></i> حداقل ۸ کاراکتر</p>
    <p id="er2"><i id="er2i" class="fa-regular fa-circle-xmark"></i> حداقل یک کاراکتر بزرگ</p>
    <p id="er3"><i id="er3i" class="fa-regular fa-circle-xmark"></i> یک کاراکتر خاص شامل: @ # $</p>
</div>

سپس با استفاده از کد های CSS، آن را زیباتر می کنیم:

#passwordError {
  width: 100%;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#passwordError strong {
  margin-bottom: 10px;
}
#passwordError p {
  color: #666;
}

حال نوبت استفاده از جاوا اسکریپت است. برای این کار رویداد onkeyup را برابر با checkPassword قرار می دهیم. این همان نام تابع ما در کد های جاوا اسکریپت است. برای بررسی ورود کاربر به شکل زیر عمل می کنیم:

function checkPassword() {
  const password = document.getElementById("password").value;

  if (password.length > ۸) {
    // حداقل ۸ کاراکتر
  }

  if (password.search(/[A-Z]/) != -1) {
    // شامل حروف بزرگ
  }

  if (password.search(/[@|$|#]/) != -1) {
    // شامل کاراکتر های خاص
  }
}

در هر بخش امکان شخصی سازی طراحی فرم ثبت نام وجود دارد. روش ساده برای اعمال تغییرات، اضافه و حذف کلاس های CSS است. برای مثال برای تغییر رنگ متن های خطا به قرمز، یک کلاس با همین نام اضافه می کنیم. سپس در این کلاس رنگ متن ها را قرمز می کنیم. برای تایید نیز از کلاس سبز و رنگ متن های سبز استفاده می کنیم. البته قبل از بررسی شرط ها باید رنگ متن ها و آیکون های خود را تنظیم کنیم.

ایجاد دکمه نمایش کلمه عبور

برای ایجاد دکمه نمایش کلمه عبور در طراحی فرم ثبت نام خود از فونت آیکون ها استفاده می کنیم. در این آموزش از fontawesome استفاده شده است. آیکون مورد نظر خود را مانند لیبل ها با استفاده از position: absolute، در محل مورد نظر قرار می دهیم. سپس رویداد onclick آن را برابر showPassword قرار می دهیم. حال باید این تابع را به شکل زیر در کد های جاوا اسکریپت خود تعریف کنیم:

function showPassword() {
  const password = document.getElementById("password");

  if (password.type === "password") {
    password.type = "text";
  } else {
    password.type = "password";
  }
}

برای طراحی جذاب تر امکان باز و بسته شدن آیکون چشم را با استفاده از اضافه و حذف کلاس را نیز اضافه می کنیم.

جمع بندی

برای استفاده بهتر از این آموزش، تماشای ویدیو رو پیشنهاد می کنیم. به صورت کلی توضیح کد نویسی دشوار است. اما در ویدیو به دلیل نمایش عملی خروجی، درک بهتری خواهید داشت. امکان شخصی سازی زیادی در طراحی فرم ثبت نام وجود دارد. برای مثال شرط های مختلف دیگری برای بررسی وجود دارد. همچنین به سادگی امکان نمایش قدرت کلمه عبور نیز وجود دارد. این مورد می تواند به عنوان یک تمرین برای شما باشد! همچنین در پایان مطلب نیز امکان دانلود کد های خروجی این پروژه نیز فراهم شده است.