طراحی فرم ورود و ثبت نام در Bootstrap

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

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

<form>
  
</form>

در ادامه می بایست برای هر ردیف اطلاعاتی یک تگ div قرار داده و کلاس form-group را به آن اضافه کنید.

<form>
  <div class="form-group">
    
  </div>
</form>

داخل هر form-group می توانید label و input های مورد نیاز خود را قرار دهید. برای مثال اگر قصد طراحی فرم ورود را داشته باشید، کدها به شکل زیر خواهند بود:

<div class="container">
  <h2>فرم ورود</h2>
  <form>
    <div class="form-group">
      <label>نام کاربری : </label>
      <input type="email" class="form-control" />
    </div>
    <div class="form-group">
      <label>رمز عبور : </label>
      <input type="password" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary">ورود به سایت</button>
  </form>
</div>

توجه داشته باشید برای آنکه تگ های input استایل مناسب را دریافت نمایند، می بایست کلاس form-control را به آنها اختصاص داد.

خروجی کدهای فوق به شکل زیر خواهد بود.

همانطور که مشاهده می نمایید، عناصر طراحی شده به ترتیب و زیرهم نمایش داده می شوند.

آموزش بوت استرپ-طراحی فرم

طراحی فرم های افقی در بوت استرپ

یکی دیگر از روش های طراحی فرم، طراحی بصورت خطی می باشد که بر خلاف روش فوق، عناصر در مجاورت یکدیگر قرار می گیرند. در این روش ابتدا باید به تگ فرم کلاس form-inline را اختصاص دهید.

form class="form-inline">

و نیازی به قرار دادن عناصر فرم، درون form-group نیست و کافی است آنها را پشت سر هم اضافه نمایید.

<form class="form-inline">
  <label>نام کاربری : </label>
  <input type="email" class="form-control" />
  <label>رمز عبور : </label>
  <input type="password" class="form-control" />
  <button type="submit" class="btn btn-primary">ورود به سایت</button>
</form>

پس از ذخیره سازی و اجرا مشاهده خواهید نمود که عناصر فرم بصورت افقی قرار می گیرند.

آموزش بوت استرپ-طراحی فرم افقی