نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیست و پنجم (Inputs)

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و پنجم (Inputs)

آموزش Bootstrap جلسه بیست و پنجم (Inputs) از سری آموزش های تک قسمتی است

سلام برنامه در این جلسه ادامه مبحث رسپانسیو کردن فرم ها را دنبال می کند

در این جلسه درباره رسپانسیو کردن Input ها بحث می کنیم

هر فرمی تشکیل شده از چند ورودی (input) است

پس رسپانسیو کردن این Input ها موضوعی است که حتما باید بررسی شود

در این ورودی ها مواردی مثل نام و نام خانوادگی ، شماره تلفن ، آدرس ایمیل و … وارد می شود

شما می توانید ورودی ها را به صورت تمام صفحه یا در کادری مشخص قرار دهید

 

input ها

در جلسه قبلی درباره فرم ها صحبت کردیم یک فرم تشکیل شده از تعدادی input است که شامل فیلد های مختلف میشود.همانطور که گفتیم input میتواند موارد زیادی را در بر بگیرد که چند مورد آن را برای شما لیست میکنیم:

  • برای گرفتن نام و نام خانوادگی که از نوع type آنها text است.
  • برای گرفتن ایمیل که type آن از نوع email است.
  • برای گرفتن رمز عبور که type آن از نوع password است.
  • برای ارسال اطلاعات که type آن از نوع submit است.
  • و …

پس با این اوصاف میتوان گفت رکن اصلی فرم ها input ها هستند البته کنترل های فرم به ۵ دسته کلی تقسیم میشوند یعنی هرآنچه داخل یک فرم است قطعا یکی از این ۵ مورد است که برای شما لیست میکنیم:

  1. input : درباره آن حبت کردیم و نحوه استفاده از آن را نیز در ادامه آموزش میگوییم
  2. textarea : این بخش برای نوشتن توضیحات ، آدرس ، پیام  و موارد این چنین استفاده می شود
  3. checkbox : مواردی که شما تیک میزنید مثل برگه هایی که از شما میپرسد اگر خدمت سربازی رفته اید مورد را تیک بزنید
  4. radio : سوالات چهار گزینه ای که در امتحانات دیده اید همین مورد است که با انتخاب تنها یک مورد گزینه صحیح را انتخاب میکنید
  5. select : اگر تا به حال خرید اینترنتی کرده باشید بخشی برای انتخاب استان و شهرستان وجود دارد که از آن لیست شهر خود را انتخاب میکنید.

در آموزش Bootstrap جلسه بیست و چهارم (Forms) مفصل درباره input ها صحبت کردیم و از آن مثال های عملی زدیم پس از این مورد میگذریم و به باقی گزینه ها میپردازیم و از آن مثال میزنیم.

textarea

از این مورد برای نوشتن متن های طولانی استفاده میشود که یک تگ دارد با نام textarea که مانند تگ body باز و بسته دارد برای اینکه این مووع را بهتر متوجه شوید برای شما مثالی از textarea میزنیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: textarea</h2>
  <p>The form below contains a textarea for comments:</p>
  <form>
    <div class="form-group">
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
  </form>
</div>

</body>
</html>

در کد بالا مینید که تگ textarea باز شده و سپس در انتها با / بسته شده است. برای تعیین اندازه textarea از rows استفاده میشود که مقدار عددی میگیرد که در این مثال ما مقدار ۵ را به آن داده ایم. همچنین کاربر نیز میتواند بنا به نیاز خود این باکس را کوچک و بزرگ کند البته بعد از بارگیری مجدد صفحه به حالت پیشفرض بر میگردد.

 

checkbox

همانطور که گفتیم با checkbox میتوانید موردی را ایجاد کنید که کاربر تواند با زدن تیک مورد مد نظر خود را انتخاب کند. برای اینکه با کار و نحوه استفاده از checkbox آشنا شوید برای شما مثالی آماده کرده ایم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: checkbox</h2>
  <p>The form below contains three checkboxes. The last option is disabled:</p>
  <form>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 1</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 2</label>
    </div>
    <div class="checkbox disabled">
      <label><input type="checkbox" value="" disabled>Option 3</label>
    </div>
  </form>
</div>

</body>
</html>

همانطور که در کد بالا میبینید با type که از نوع checkbox انتخاب کردیم توانستیم گزینه تیک زدن را به فرم اضافه کنیم همچنین با اضافه کردن مقدار disabled میتوانید امکان انتخاب چک باکس را غیر فعال کنید.

چک باکسی که بالا مثال زدیم از نوع پیشفرض بود شما میتوانید با اضافه کردن کلاس checkbox-inline چک باکس خود را در یک خط بسازید برای واضح شدن موضوع کد زیر را دنبال کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 3
    </label>
  </form>
</div>

</body>
</html>

 

radio

این موضوع همان چهار گزینه ای است که بالا را معرفی کردیم از این مورد برای پرسش های بلی و خیر نیز استفاده میشود که در radio شما تنها میتوانید یکی از موارد را انتخاب کنید و انتخاب ۲ مورد امکان پذیر نیست برای اینکه این مورد را بهتر متوجه شوید میتوانید از کد زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: radio buttons</h2>
  <p>The form below contains three radio buttons. The last option is disabled:</p>
  <form>
    <div class="radio">
      <label><input type="radio" name="optradio" checked>Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Option 3</label>
    </div>
  </form>
</div>

</body>
</html>

در کد بالا با استفاده از type مد نظر که radio است توانستیم مورد من نظر را ایجاد کنیم مانند checkbox با استفاده از disabled میتوانید گزینه ای را غیر فعال کنید.

مانند checkbox المان های خود را در یک خط بنویسید مجددا میتوانید مشابه checkbox از کلاس radio-inline استفاده کنید.

 

select

و در نهایت میپردازیم به آخرین مورد یعنی select.
برای اینکه موضوع را بهتر متوجه شوید همین ابتدای کار برای شما مثالی میزنیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: select</h2>
  <p>The form below contains two dropdown menus (select lists):</p>
  <form>
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>
</div>

</body>
</html>

select هم مانند textarea تگ باز و بسته دارد

گزینه های select بین باز و بسته آن با تگ option قرار میگیرند.

اگر شما مد نظر شما است که چند گزینه هم زمان انتخاب شود  از multiple در تگ خود استفاده کنید
می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و چهارم (Forms)

آموزش Bootstrap جلسه بیست و ششم (Inputs2)

 

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

 

و یا آنرا در آپارات ببینید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

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


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیست و پنجم (Inputs): نوع فایل:mp4 حجم فایل:30.31 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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