مقاله ی ساخت یک فرم ثبت نام با Modal

فرم ثبت نام با Modal

در این بخش آموزشی میخواهم به شما نشان دهم که چگونه یک فرم ثبت نام  با Modal بسازیم . به جای ساختن یک صفحه ی وب جدید برای فرم ثبت نام ما از Modal استفاده میکنیم که بتوانیم حافظه و فضای راهنمای وب مان را ذخیره کنیم. برای شروع برنامه باید ابتدا یک چارچوب bootstrap توییتر دانلود کنیم تا برای برنامه از آن استفاده کنیم.Modal یکی از ابزار های بوت استرپ است که میتوانید برای برای آموزش کامل از آموزش تصویری bootstrap استفاده کنید .بعد از دانلود آن را خارج کنید و این سه فولدر را کپی کنید : css , font و js و سپس یک فولدر جدید در داخل سند Register میسازیم و فایل های کپی شده را در این فولدر میریزیم.

فرم ثبت نام با Modal

بعد از دانلود آن را خارج کنید و این سه فولدر را کپی کنید : css , font و js  و سپس یک فولدر جدید در داخل سند Register میسازیم و فایل های کپی شده را در این فولدر میریزیم.

این ساختار فولدر است :
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

در این زمان میخواهیم که یک فایل PHP جدید بنام login.php بسازیم و کد زیر را اضافه کنیم :

این کد زیر یک فرم ورود ساده را نمایش میدهد اما تمرکز اصلی ما بیشتر بر روی نمایش یک Modal برای ثبت نام است و این Modal برای فرم ثبت نام زمانی اجرا خواهد شد که کاربر بر روی لینک Not Registered کلیک کند.

<!DOCTYPE html>
 
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="description">
  <meta content="" name="author">
  <link href="" rel="shortcut icon">
 
  <title>Signin Template for Bootstrap</title><!-- Bootstrap core CSS -->
  <link href="css/bootstrap.css" rel="stylesheet"><!-- Custom styles for this template -->
  <link href="signin.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="../../assets/js/html5shiv.js"></script>
    <script src="../../assets/js/respond.min.js"></script>
  <![endif]-->
</head>
 
<body>
  <div class="container">
    <form class="form-signin">
      <h2 class="form-signin-heading">Please sign in</h2><input autofocus="" class=
      "form-control" placeholder="Email address" type="text"> <input class="form-control"
      placeholder="Password" type="password"> <label><a data-target="#EditBasicInfo"
      data-toggle="modal" href="" title="Click here to register.">Not Registered?</a></label>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
 
<!-----This area is where we are going to add the code for Modal---->
 
</div>
</div>
  <!-- /container -->
  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="assets/js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

 

 

 

هرگاه شما کد را در browser اجرا کنید همانند زیر نمایش داده خواهد شد :

فرم ثبت نام با Modal

سپس میخواهیم که کد زیر را در فضای بوجود آمده برای Modal اضافه کنیم و این هم کد :

 

<!-- Modal -->
  <div class="rows">
    <div class="col-xs-12">
      <div class="modal fade" id="EditBasicInfo" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button class="close" data-dismiss="modal" type="button">×</button>
 
              <h4 class="modal-title" id="myModalLabel">Registration Form</h4>
            </div>
 
            <div class="modal-body">
 
               <div class="form-group">
                  <div class="rows">
                      <div class="col-md-12">
                        <div class="col-lg-12">
                          <input class="form-control input-lg" name="fname" placeholder="First Name" type="text">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                  <div class="rows">
                      <div class="col-md-12">
                        <div class="col-lg-12">
                          <input class="form-control input-lg" name="fname" placeholder="Last Name" type="text">
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div class="form-group">
                  <div class="rows">
                      <div class="col-md-12">
                        <div class="col-lg-12">
                          <input class="form-control input-lg" name="email" placeholder="Email Address" type="email">
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div class="form-group">
                  <div class="rows">
                      <div class="col-md-12">
                        <div class="col-lg-12">
                          <input class="form-control input-lg" name="password" placeholder="Password" type="password">
                        </div>
                      </div>
                    </div>
                  </div>
 
 
             </div>
 
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
            <button class="btn btn-success" data-dismiss="modal" type="button">Register</button> 
          </div><!--  </form>-->
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </form>
  </div><!-- /.modal -->

 

هرگاه کد بالا اجرا شود همانند شکل زیر خواهد شد :

فرم ثبت نام با Modal

 

 

فرم ثبت نام با Modalclass="container"
class="form-signin"
class="form-signin-heading"
class="form-control"
class="btn btn-lg btn-primary btn-block"
class="rows"
class="col-xs-12"
class="modal fade"
class="modal-dialog"
class="modal-content"
class="modal-header"
class="close"
class="modal-title"
class="modal-body"
class="form-group"
class="form-control input-lg"
class="modal-footer"
class="btn btn-default"
class="btn btn-success"

 

 

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    POOP پاسخ

    این قسمت
    "سپس میخواهیم که کد زیر را در فضای بوجود آمده برای Modal اضافه کنیم و این هم کد :"
    عکس هاش لوود نمیشه

      داریوش فرخی پاسخ

      با عرض پوزش ...
      مشکل برطرف شد!
      :)

ما یک پرسشنامه‌ی کوچولو داریم، که قول میدیم وقتتون رو خیلی نمی‌گیره، ولی کلی به ما کمک می‌کنه، چون هم assessment مونه ,و هم شما به ما در این زمینه کمک میکنید.بزن بریم