logo
logo
تبلیغ کلیکی تاپ سایت 98

ساخت فرم با بوت استرپ

ساخت فرم با بوت استرپ
هدایت عباسی آموزش بوت استرپ

ساخت فرم با بوت استرپ 4 راست چین و چپ چین به زبان فارسی را در قسمت زیر مشاهده می کنید. کدهای فرم تماس با ما ، فرم لاگین و فرم ثبت نام را بصورت رایگان می توانید دانلود کنید.

در این بخش از آموزش بوت استرپ از تاپ سایت 98 به سراغ ساخت فرم با بوت استرپ می رویم.

برای طراحی و ساخت فرم با بوت استرپ ابتدا بایستی فایل های css و js و فایل جی کوئری را به صفحه اضافه کنیم.

دانلود فرم های بوت استرپ

دانلود فرم های بوت استرپ که در زیر مشاهده می کنید. بر روی لینک زیر کلیک کنید.

پس از دانلود پوشه ای می بینید که فرم های زیر در آن وجود دارد .

برای اجرای آنها و دیدن نتیجه کافی است روی فایل های html دابل کلیک کنید و با یک مرورگر آنها را باز کنید.

سعی کنید از مرورگرهای کروم یا فایرفاکس استفاده کنید.

کدها همه تست شده است و می توانید از آنها در پروژه های خود استفاده کنید.

دانلود فرم های بوت استرپ

فرم تماس با ما با بوت استرپ

در زیر فرم تماس با ما با بوت استرپ 4 را مشاهده می کنید.

فایل کامل این مثال در بخش دانلود همین صفحه قرار دارد. می توانید آن را در فایل form1.html مشاهده نمایید.

در فرم تماس با ما چندین فیلد وجود دارد هر فیلد دارای یک label و یک input میباشد.

در صورت تمایل می توانید بعضی از آنها را حذف یا ویرایش نمایید.

معمولا در فرم تماس با ما ، فیلدهای نام ، نام خانوادگی ، ایمیل و متن وجود دارد.

متن اصلی چون طولانی است در یک textarea قرار می دهیم.

نام و نام خانوادگی در یک input از نوع text قرا می دهیم.

نوع input ایمیل را نیز email قرار می دهیم. در صورتی ک کاربر ایمیل را درست وارد نکند پیغام خطا می دهد.

<div class="contact-form">
<div class="form-group">
<label class="control-label col-sm-2" for="fname">First Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fname" placeholder="Enter First Name" name="fname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lname">Last Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lname" placeholder="Enter Last Name" name="lname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Comment:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>

فرم ثبت نام با بوت استرپ

فرم ثبت نام با بوت استرپ 4 را در زیر مشاهده می کنید.

کد کامل فرم ثبت نام با بوت استرپ را می توانید در قسمت دانلود با عنوان form2.html ببینید.

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

در صورتی که بخواهید نام و نام خانوادگی یا تلفن را اضافه کنید می توانید نوع input را text قرار دهید.

نوع متد را معمولا post در نظر می گیرند و در action می توانید فایل php خود را قرار دهید.

نوع input ایمیل را email قرار داده ایم و نوع input رمز عبور را password گذاشته ایم.

نوع password باعث می شود حروفی که وارد می شود دیده نشود و بجای ان دایره نشان داده شود . این مورد برای امنیت بالاتر میباشد.

<form action="" method="post">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pass1">Password:</label>
<input type="password" class="form-control" id="pass1" placeholder="Enter password" name="pass1">
</div>
<div class="form-group">
<label for="pass2">Repeat Password:</label>
<input type="password" class="form-control" id="pass2" placeholder="Enter password" name="pass2">
</div>
<button type="submit" class="btn btn-primary">save</button>
</form>

فرم لاگین با بوت استرپ

در قسمت زیر فرم لاگین با بوت استرپ 4 را مشاهده می کنید.

برای فرم لاگین می توانید از دو input از نوع email و password استفاده کرد.

همچنین label ها نیز برچسب را نشان می دهند تا کاربر بداند چه چیزی را باید وارد کند.

کد کامل فرم لاگین را می توانید در فایل دانلود شده بالا ببینید.

<form action="" method="post">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.