گروه ورودی

با افزودن متن ، دکمه یا گروه های دکمه ای در هر دو طرف ورودی های متنی ، انتخاب های سفارشی و ورودی های فایل سفارشی ، کنترل های فرم را به راحتی گسترش دهید.

مثال اساسی

یک افزودنی یا دکمه را در هر دو طرف ورودی قرار دهید. همچنین ممکن است یکی را در هر دو طرف ورودی قرار دهید. ما از چندین کنترل فرم در یک گروه ورودی واحد پشتیبانی نمی کنیم و S باید خارج از گروه ورودی باشد.

@به عنوان مثال. com URL غرور شما https://example. com/users/ با Textarea

 کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن" شناسه ="BASIC-ADDON1">@   نوع ="متن" کلاس ="کنترل فرم" مکان نگهدارنده ="نام کاربری" آریا-برچسب ="نام کاربری" آریا- توصیف شده ="BASIC-ADDON1">   کلاس ="گروه ورودی MB-3">  نوع ="متن" کلاس ="کنترل فرم" مکان نگهدارنده ="نام کاربری گیرنده" آریا-برچسب ="نام کاربری گیرنده" آریا- توصیف شده ="Basic-addon2">  کلاس ="ورودی گروهی">  کلاس ="متن-گروه-متن" شناسه ="Basic-addon2">@به عنوان مثال. com    برای ="پایه اصلی">URL غرور شما  کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن" شناسه ="BASIC-ADDON3">https://example. com/users/   نوع ="متن" کلاس ="کنترل فرم" شناسه ="پایه اصلی" آریا- توصیف شده ="BASIC-ADDON3">   کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن">$   نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="مبلغ (به نزدیکترین دلار)">  کلاس ="ورودی گروهی">  کلاس ="متن-گروه-متن">. 00    کلاس ="گروه ورودی">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن">با Textarea   کلاس ="کنترل فرم" آریا-برچسب ="با Textarea"> 

اندازه

کلاس های اندازه نسبی شکل را به خود گروه . put-group اضافه کنید و محتویات درون آن به طور خودکار تغییر اندازه می دهند-نیازی به تکرار کلاسهای اندازه کنترل فرم بر روی هر عنصر نیست.

اندازه در عناصر گروه ورودی فردی پشتیبانی نمی شود.

کم اهمیت پیش فرض بزرگ

 کلاس ="ورودی گروه ورودی-گروه-گروه SM MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن" شناسه ="INPUTGROUP Size-SM">کم اهمیت   نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="کم اهمیت" آریا- توصیف شده ="INPUTGROUP Size-SM">   کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن" شناسه ="اندازه گیری ورودی گروه">پیش فرض   نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="پیش فرض" آریا- توصیف شده ="اندازه گیری ورودی گروه">   کلاس ="گروه ورودی-گروه-گروه-LG">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن" شناسه ="INPUTGROUP SIOSING-LG">بزرگ   نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="بزرگ" آریا- توصیف شده ="INPUTGROUP Size-SM"> 

کادر و رادیوها

هر چک باکس یا گزینه رادیویی را به جای متن در افزونه گروه ورودی قرار دهید.

 کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن">  نوع ="چک باکس" آریا-برچسب ="چک برای ورودی متن زیر">    نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="ورودی متن با چک باکس">   کلاس ="گروه ورودی">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن">  نوع ="رادیو" آریا-برچسب ="دکمه رادیویی برای وارد کردن متن زیر">    نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="ورودی متن با دکمه رادیویی"> 

ورودی های متعدد

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

نام و نام خانوادگی

 کلاس ="گروه ورودی">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن" شناسه ="">نام و نام خانوادگی   نوع ="متن" کلاس ="کنترل فرم">  نوع ="متن" کلاس ="کنترل فرم"> 

افزونه های متعدد

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

 کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن">$  کلاس ="متن-گروه-متن">0. 00   نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="مبلغ (به نزدیکترین دلار)">   کلاس ="گروه ورودی">  نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="مبلغ (به نزدیکترین دلار)">  کلاس ="ورودی گروهی">  کلاس ="متن-گروه-متن">$  کلاس ="متن-گروه-متن">0. 00  

افزونه های دکمه ای

دکمه دکمه دکمه دکمه دکمه دکمه

 کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه   نوع ="متن" کلاس ="کنترل فرم" مکان نگهدارنده ="" آریا-برچسب ="" آریا- توصیف شده ="BASIC-ADDON1">   کلاس ="گروه ورودی MB-3">  نوع ="متن" کلاس ="کنترل فرم" مکان نگهدارنده ="نام کاربری گیرنده" آریا-برچسب ="نام کاربری گیرنده" آریا- توصیف شده ="Basic-addon2">  کلاس ="ورودی گروهی">  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه    کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه   نوع ="متن" کلاس ="کنترل فرم" مکان نگهدارنده ="" آریا-برچسب ="" آریا- توصیف شده ="BASIC-ADDON1">   کلاس ="گروه ورودی">  نوع ="متن" کلاس ="کنترل فرم" مکان نگهدارنده ="نام کاربری گیرنده" آریا-برچسب ="نام کاربری گیرنده" آریا- توصیف شده ="Basic-addon2">  کلاس ="ورودی گروهی">  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه  

دکمه هایی با فهرست کشویی

کشویی کشویی

 کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="btn btn-outline-secondary dropdown-toggle" نوع ="دکمه" data-toggle="کشویی" aria-haspopup="درست است، واقعی" aria-expanded="کاذب">کشویی  کلاس ="فهرست کشویی">  کلاس ="موارد کشویی" href="#">عمل  کلاس ="موارد کشویی" href="#">یک اقدام دیگر  کلاس ="موارد کشویی" href="#">یه چیز دیگه اینجا  نقش ="جداکننده" کلاس ="تقسیم کننده کشویی">  کلاس ="موارد کشویی" href="#">لینک جدا شده    نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="ورودی متن با دکمه کشویی">   کلاس ="گروه ورودی">  نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="ورودی متن با دکمه کشویی">  کلاس ="ورودی گروهی">  کلاس ="btn btn-outline-secondary dropdown-toggle" نوع ="دکمه" data-toggle="کشویی" aria-haspopup="درست است، واقعی" aria-expanded="کاذب">کشویی  کلاس ="فهرست کشویی">  کلاس ="موارد کشویی" href="#">عمل  کلاس ="موارد کشویی" href="#">یک اقدام دیگر  کلاس ="موارد کشویی" href="#">یه چیز دیگه اینجا  نقش ="جداکننده" کلاس ="تقسیم کننده کشویی">  کلاس ="موارد کشویی" href="#">لینک جدا شده   

دکمه های تقسیم بندی شده

اکشن Toggle Dropdown اکشن Toggle Dropdown

 کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  نوع ="دکمه" کلاس ="btn btn-outline-secondary">عمل  نوع ="دکمه" کلاس ="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="کشویی" aria-haspopup="درست است، واقعی" aria-expanded="کاذب">  کلاس ="فقط sr">کشویی را تغییر دهید   کلاس ="فهرست کشویی">  کلاس ="موارد کشویی" href="#">عمل  کلاس ="موارد کشویی" href="#">یک اقدام دیگر  کلاس ="موارد کشویی" href="#">یه چیز دیگه اینجا  نقش ="جداکننده" کلاس ="تقسیم کننده کشویی">  کلاس ="موارد کشویی" href="#">لینک جدا شده    نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="ورودی متن با دکمه کشویی بخش بندی شده">   کلاس ="گروه ورودی">  نوع ="متن" کلاس ="کنترل فرم" آریا-برچسب ="ورودی متن با دکمه کشویی بخش بندی شده">  کلاس ="ورودی گروهی">  نوع ="دکمه" کلاس ="btn btn-outline-secondary">عمل  نوع ="دکمه" کلاس ="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="کشویی" aria-haspopup="درست است، واقعی" aria-expanded="کاذب">  کلاس ="فقط sr">کشویی را تغییر دهید   کلاس ="فهرست کشویی">  کلاس ="موارد کشویی" href="#">عمل  کلاس ="موارد کشویی" href="#">یک اقدام دیگر  کلاس ="موارد کشویی" href="#">یه چیز دیگه اینجا  نقش ="جداکننده" کلاس ="تقسیم کننده کشویی">  کلاس ="موارد کشویی" href="#">لینک جدا شده   

فرم های سفارشی

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

انتخاب سفارشی

گزینه ها گزینه ها دکمه دکمه

 کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن" برای ="InputGroupSelect01">گزینه ها   کلاس ="انتخاب سفارشی" شناسه ="InputGroupSelect01">  انتخاب شد>انتخاب کنید.  مقدار ="1">یکی  مقدار ="2">دو  مقدار ="3">سه    کلاس ="گروه ورودی MB-3">  کلاس ="انتخاب سفارشی" شناسه ="InputGroupSelect02">  انتخاب شد>انتخاب کنید.  مقدار ="1">یکی  مقدار ="2">دو  مقدار ="3">سه   کلاس ="ورودی گروهی">  کلاس ="متن-گروه-متن" برای ="InputGroupSelect02">گزینه ها    کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه   کلاس ="انتخاب سفارشی" شناسه ="InputGroupSelect03">  انتخاب شد>انتخاب کنید.  مقدار ="1">یکی  مقدار ="2">دو  مقدار ="3">سه    کلاس ="گروه ورودی">  کلاس ="انتخاب سفارشی" شناسه ="InputGroupSelect04">  انتخاب شد>انتخاب کنید.  مقدار ="1">یکی  مقدار ="2">دو  مقدار ="3">سه   کلاس ="ورودی گروهی">  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه  

ورودی پرونده سفارشی

بارگذاری انتخاب فایل انتخاب فایل بارگذاری دکمه انتخاب فایل انتخاب فایل دکمه

 کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="متن-گروه-متن">بارگذاری   کلاس ="پرونده سفارشی">  نوع ="فایل" کلاس ="ورودی پرونده سفارشی" شناسه ="InputGroupFile01">  کلاس ="برچسب پرونده سفارشی" برای ="InputGroupFile01">انتخاب فایل    کلاس ="گروه ورودی MB-3">  کلاس ="پرونده سفارشی">  نوع ="فایل" کلاس ="ورودی پرونده سفارشی" شناسه ="InputGroupFile02">  کلاس ="برچسب پرونده سفارشی" برای ="InputGroupFile02">انتخاب فایل   کلاس ="ورودی گروهی">  کلاس ="متن-گروه-متن" شناسه ="">بارگذاری    کلاس ="گروه ورودی MB-3">  کلاس ="ورودی-گروه مقدم">  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه   کلاس ="پرونده سفارشی">  نوع ="فایل" کلاس ="ورودی پرونده سفارشی" شناسه ="InputGroupFile03">  کلاس ="برچسب پرونده سفارشی" برای ="InputGroupFile03">انتخاب فایل    کلاس ="گروه ورودی">  کلاس ="پرونده سفارشی">  نوع ="فایل" کلاس ="ورودی پرونده سفارشی" شناسه ="InputGroupFile04">  کلاس ="برچسب پرونده سفارشی" برای ="InputGroupFile04">انتخاب فایل   کلاس ="ورودی گروهی">  کلاس ="btn btn-outline-secondary" نوع ="دکمه">دکمه  

دسترسی

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

تکنیک دقیقی که مورد استفاده قرار می گیرد (عناصر پنهان با استفاده از کلاس فقط . SR ، یا استفاده از ویژگی های آریا-برچسب و آریا-برچسب ، احتمالاً در ترکیب با آریا-توصیف شده) و اینکه اطلاعات اضافی نیاز به انتقال دارد بسته به بسته به نظر می رسددر نوع دقیق ویجت رابط مورد نظر شما. مثالهای موجود در این بخش چند روش پیشنهادی و خاص را ارائه می دهد.