如何创建：社交登录表单

学习如何使用 CSS 创建社交媒体登录表单。

سوشل لاگین فرم کیسٹرین

پہلا قدم - ایچ تی ام ال اضافہ کریں:

ایمپلائز کا استعمال کریں <form> علامت کے ذریعے داخل کیا جائے گا. آپ کو ہمارے پی ایچ پی درستکاری کورس میں مزید معلومات مل سکتی ہیں.

بعد میں ہر کالیم میں انٹرپوٹ کنٹرول یا سوشل میڈیا لنک اضافہ کریں:

<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <h2 style="text-align:center">لاگین کریں سوشل میڈیا یا دستی</h2>
      <div class="vl">
        <span class="vl-innertext">یا</span>
      </div>
      <div class="col">
        <a href="#" class="fb btn">
          <i class="fa fa-facebook fa-fw"></i> لاگین کریں فیس بک
        </a>
        <a href="#" class="twitter btn">
          <i class="fa fa-twitter fa-fw"></i> لاگین کریں ٹوئیٹر
        </a>
        <a href="#" class="google btn">
          <i class="fa fa-google fa-fw"></i> لاگین کریں گوگل پلس
        </a>
      </div>
      <div class="col">
        <div class="hide-md-lg">
          <p>یا به صورت دستی وارد شوید:</p>
        </div>
        <input type="text" name="username" placeholder="نام کاربری" required>
        <input type="password" name="password" placeholder="کلمه عبور" required>
        <input type="submit" value="ورود">
      </div>
    </div>
  </form>
</div>
<div class="bottom-container">
  <div class="row">
    <div class="col">
      <a href="#" style="color:white" class="btn">ثبت‌نام</a>
    </div>
    <div class="col">
      <a href="#" style="color:white" class="btn">فراموش کردم؟</a>
    </div>
  </div>
</div>

مرحله دوم - اضافه کردن CSS:

* {box-sizing: border-box}
/* تنظیم استایل برای جعبه‌ها */
.container {
  position: relative;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px 0 30px 0;
}
/* تنظیم استایل برای فیلد‌های ورودی و دکمه‌های پیوند */
input,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* حذف زیرخط‌های پیوند */
}
input:hover,
.btn:hover {
  opacity: 1;
}
/* لایه‌ای برای اضافه کردن رنگ مناسب به دکمه‌های Facebook، Twitter و google */
.fb {
  background-color: #3B5998;
  color: white;
}
.twitter {
  background-color: #55ACEE;
  color: white;
}
.google {
  background-color: #dd4b39;
  color: white;
}
/* انٹرلیکشن بٹن کی سائز اور انداز کا تعین کریں */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049;
}
/* دو کال لائن اپ */
.col {
  float: left;
  width: 50%;
  margin: auto;
  padding: 0 50px;
  margin-top: 6px;
}
/* کال کے بعد کی تلاش کو ختم کریں */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* عمودی لائن */
.vl {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  border: 2px solid #ddd;
  height: 175px;
}
/* عمودی لائن کے اندر کا لیکھ */
.inner {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 10px;
}
/* میڈیم اور بڑے اسکرین پر کچھ لیکھ مخفی کریں */
.hide-md-lg {
  display: none;
}
/* پائین کانٹینر */
.bottom-container {
  text-align: center;
  background-color: #666;
  border-radius: 0px 0px 4px 4px;
}
/* ریپونسٹیو لائن اپ نا کریں - جب اسکرین کی چوڑائی 650 پیکسل سے کم ہو جائے تو دو پلانٹ کو ساتھ نہیں ساتھ کریں */
@media screen and (max-width: 650px) {
  .col {
    width: 100%;
    margin-top: 0;
  }
  /* عمودی لائن مخفی کریں */
  .vl {
    display: none;
  }
  /* نچچے اسکرین پر مخفیالبتو دکھائیں */
  .hide-md-lg {
    display: block;
    text-align: center;
  }
}

آزمایش شخصی

صفحات مرتبط

آموزش‌ها:فرم HTML

آموزش‌ها:فرم CSS