نمونه های رادیویی css را وارد کنید. شکل دادن به چک باکس ها و دکمه های رادیویی با CSS3
به لطف CSS3، می توانیم تقریباً به هر اثری که نیاز داریم بر روی صفحه نمایش دست پیدا کنیم. در این درس به نحوه استایل دادن به چک باکس ها و دکمه های رادیویی خواهیم پرداخت.
ورودی: بررسی شده + برچسب: قبل (محتوا: "\2022"؛ رنگ: #f3f3f3؛ اندازه قلم: 30 پیکسل؛ تراز متن: مرکز؛ ارتفاع خط: 18 پیکسل؛ )
حالا وقتی دکمه رادیو را فشار می دهیم باید یک دایره سفید کوچک در دایره خاکستری اصلی ظاهر شود.
چک باکس های استایل
حالا بیایید طراحی چک باکس ها را شروع کنیم. ابتدا اجازه دهید دوباره عنصر را پنهان کنیم:
ورودی (نمایش: هیچ؛ )
از آنجایی که ما با استفاده از شبه عنصر :before صفحه چک باکس استاندارد را حذف می کنیم، به سادگی یک حاشیه اضافه می کنیم:
برچسب کادر انتخاب: قبل (شعاع حاشیه: 3 پیکسل؛ )
سپس یک علامت "تیک" اضافه می کنیم که با کلیک بر روی کادر انتخاب ظاهر می شود. بیایید این کار را با قیاس با یک دایره رادیویی انجام دهیم. آیا این بار باید کاراکتر HTML را تبدیل کنیم؟ ✓.
ورودی: علامت‌گذاری شده + برچسب: قبل (محتوا: "\2713"؛ متن-سایه: 1px 1px 1px rgba(0, 0, 0, .2)؛ اندازه قلم: 15px؛ رنگ: #f3f3f3؛ تراز متن: مرکز ;ارتفاع خط: 15px;
در نتیجه، این چیزی است که باید به دست آوریم:
نتایج
در این درس، روشی را بررسی کردیم که می توانید از آن برای نمایش دکمه های رادیویی و چک باکس های مورد نیاز خود استفاده کنید. از آنجایی که ما از CSS3 استفاده کردیم، این تکنیک فقط در مرورگرهایی کار می کند که از این فناوری پشتیبانی می کنند. برای دستیابی به نتایج مشابه در مرورگرهای قدیمی، می توانید از مناسب استفاده کنید
موضوع درس آخر را ادامه می دهیم و در آن نگاه می کنیم فرآیند ایجاد فیلدهای ورودی متن منظم. امروز، به عنوان ادامه، نحوه ایجاد یک عنصر فرم دیگر - دکمه های رادیویی را یاد خواهیم گرفت. این دکمه‌ها زمانی استفاده می‌شوند که باید یکی از گزینه‌های پاسخ را برای یک انتخاب نشان دهید، به عنوان مثال، "بله" یا "خیر"، و نه هر دو گزینه. بیایید این دکمه های رادیویی را ایجاد کنیم، نتیجه نهایی آخرین درس و بعد از فیلدها را برداریم ورودی بیایید یک پاراگراف جدید ایجاد کنیم و یک تگ دیگر بنویسیم و در آن صفات زیر را نشان می دهیم.
اولین مورد نوع میدان است نوع="رادیو"- یک ویژگی که نوع دکمه را مشخص می کند. دومی یک ویژگی است که نام دکمه ما را مشخص می کند نام ="زمان". زمانی که بازدیدکننده بر روی دکمه "ارسال" کلیک کند، این مقدار برای کنترل کننده ما ارسال می شود. یعنی اگر این دکمه رادیویی فعال باشد، این مقدار برای کنترل کننده ارسال می شود ارزش="بله". در نتیجه به خطی مانند این رسیدیم. با قرار دادن این خط در ویرایشگر و رفرش کردن مرورگر، یک دکمه رادیویی ساده دریافت می کنیم.
HTML
البته الان دکمه رادیو کاملا نامشخص به نظر می رسد، گزینه سوال و جوابی وجود ندارد، یعنی مشخص نیست چه کار می کند. بنابراین، اجازه دهید ابتدا یک گزینه پاسخ با استفاده از تگ ایجاد کنیم
HTML
اکنون دکمه ما قبلاً یک گزینه پاسخ (مقدار آن) دارد. حالا بیایید یک دکمه رادیویی دیگر با پاسخ مخالف "نه" ایجاد کنیم. این کار بسیار ساده انجام می شود، دکمه ایجاد شده را کپی کنید و کلمه "بله" را به "نه" در آن و در ویژگی تغییر دهید. ارزش مقدار را تنظیم کنید نه . مهم است که از این واقعیت آگاه باشید که نام دکمه‌های رادیویی باید ثابت بماند، زیرا به مرورگر نشان می‌دهد که این دو دکمه متعلق به یک گروه هستند و متقابلاً منحصر به یکدیگر هستند.
HTML
در اینجا یک دکمه رادیویی دوم داریم و اگر روی یکی از دکمه ها کلیک کنیم، دکمه ای که انتخاب می کنیم برجسته می شود. یعنی متقابل هستند و این به این دلیل اتفاق می افتد که نام های یکسانی دارند. اگر از دو نفر بپرسید نام های مختلف، سپس امکان انتخاب دو دکمه به طور همزمان وجود خواهد داشت که از نظر منطقی کاملاً صحیح نیست.
خب، حالا بیایید خود سوال را برای دکمه‌هایمان بپرسیم، قبل از دکمه‌هایمان، پاراگراف دیگری با سوال خود ایجاد می‌کنیم.
HTML
خوب، اکنون یک نکته جالب دیگر وجود دارد که می تواند هنگام استفاده از دکمه های رادیویی مفید باشد: فعال سازی خودکار دکمه. اگر اکنون صفحه را بازخوانی کنید، بیش از یک دکمه فعال نیست. در ابتدا می توانیم مشخص کنیم که کدام یک از ویژگی های خاص برای این کار استفاده می شود و به طور پیش فرض فعال می شود. و این صفت نامیده می شود بررسی شد که در زبان انگلیسی به معنی علامت گذاری شده است. این ویژگی کاملاً غیرمعمول است و نیازی به مقدار ندارد.
این همه برای دکمه های رادیویی است. در مجموع دو درس، کد زیر را دریافت کردیم:
HTML
برای طراحی چک باکس ها و دکمه های رادیویی مطابق با نیاز طراحی، امروزه نیازی به استفاده از راه حل های جاوا اسکریپت (مانند افزونه من) نیست، زیرا برای این شما می توانید فقط از CSS استفاده کنید، و با سازگار با عقببرای مرورگرهای قدیمی (یعنی بدون به خطر انداختن قابلیت استفاده) که از قوانین مدرن CSS پشتیبانی نمی کنند.
به عبارت دیگر - در مرورگرهای مدرنچک باکس ها و دکمه های رادیویی مطابق با طرح مورد نظر و در موارد قدیمی زیبا به نظر می رسند (این برای اینترنت اکسپلوررنسخه 8 و پایین تر) آنها با طراحی "پیش فرض"، مشخصه هر سیستم عامل خاص باقی می مانند.
علاوه بر این، اعتبارسنجی HTML5 همچنان ممکن استعناصر استایل داده شده (که ممکن است در هنگام استفاده از افزونه های جاوا اسکریپت اینطور نباشد). در مرورگرهای مدرن، پشتیبانی از آن برای مدت طولانی عادی بوده است.
ویژگی های مهم
برای اینکه همه چیز درست شود، مهم است که موارد زیر را در نظر بگیرید:
- به جز خود تگ عنصر که می خواهیم آن را به زیبایی تزئین کنیم ( یا ) به یک برچسب نیاز دارید
- برچسب بزنید باید قبل از برچسب باشد
ترفند این است که از انتخابگرهای :checked و :not شبه استفاده کنید. در این حالت، خود چک باکس یا دکمه رادیویی نامرئی می‌شود و شبیه‌سازی آنها با استفاده از شبه عناصر:before و:after برای برچسب انجام می‌شود.
یک ظاهر طراحی برای مرورگرهای مدرن
بیایید هر دو گزینه را برای مکان عنصر فرم مورد نظر در نظر بگیریم. اینکه کدام یک راحت‌تر است به شما بستگی دارد که تصمیم بگیرید. ماهیت از این تغییر نمی کند.
برچسب‌های چک باکس و دکمه‌های رادیویی قبل از برچسب قرار دارند
در کد HTMLبه نظر می رسد این است:
یک بار دیگر می خواهم توجه شما را به تگ جلب کنم لزوماباید قرار گیرد قبل ازبرچسب زدن
کد CSS برای چک باکسبه این صورت خواهد بود:
چک باکس ( موقعیت: مطلق؛ z-index: -1؛ کدورت: 0؛ حاشیه: 10 پیکسل 0 0 20 پیکسل؛ ) .چک باکس + برچسب (موقعیت: نسبی؛ بالشتک: 0 0 0 60 پیکسل؛ مکان نما: اشاره گر؛ ) .چک باکس + برچسب :before ( محتوا: ""؛ موقعیت: مطلق؛ بالا: -4 پیکسل؛ سمت چپ: 0؛ عرض: 50 پیکسل؛ ارتفاع: 26 پیکسل؛ شعاع حاشیه: 13 پیکسل؛ پس‌زمینه: #CDD1DA؛ جعبه-سایه: درج 0 2px 3px rgba( 0,0,0,.2); -radius: 10px: #FFF; box-shadow: 0.0.0.3. چک باکس: علامت زده + برچسب: بعد ( سمت چپ: 26 پیکسل؛ ) .چک باکس: فوکوس + برچسب: قبل ( کادر سایه: درج 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255 , 0.7)؛
کد CSS برای دکمه رادیوییبه این صورت خواهد بود:
رادیو ( موقعیت: مطلق؛ z-index: -1؛ کدورت: 0؛ حاشیه: 10px 0 0 7px؛ ) .radio + برچسب ( موقعیت: نسبی؛ بالشتک: 0 0 0 35px؛ مکان نما: اشاره گر؛ ) .radio + برچسب :before ( محتوا: ""؛ موقعیت: مطلق؛ بالا: -3 پیکسل؛ سمت چپ: 0؛ عرض: 22 پیکسل؛ ارتفاع: 22 پیکسل؛ حاشیه: 1 پیکسل ثابت #CDD1DA؛ شعاع حاشیه: 50%؛ پس‌زمینه: #FFF؛ ) . رادیو + برچسب: بعد ( محتوا: ""؛ موقعیت: مطلق؛ بالا: 1 پیکسل؛ سمت چپ: 4 پیکسل؛ عرض: 16 پیکسل؛ ارتفاع: 16 پیکسل؛ شعاع حاشیه: 50%؛ پس‌زمینه: #9FD468؛ کادر سایه: درون‌آمده 0 1 پیکسل 1px rgba(0,0,0,.5); 0 0 0 3px rgba(255,255,0,.7);
با استفاده از ویژگی های position، z-index و opacity برای کلاس های .checkbox و .radio، عناصر اصلی را به صورت بصری مخفی می کنیم، در حالی که آنها در همان مکانی می مانند که عناصر استایل داده شده قرار خواهند گرفت. و با استفاده از حاشیه، آنها را کمی تغییر می دهیم تا پیام اعتبارسنجی HTML5 هماهنگ به نظر برسد. بسته به طراحی چک باکس و دکمه رادیویی، این تورفتگی قابل تنظیم است.
برچسب‌های چک باکس و دکمه‌های رادیویی داخل تگ هستند
کد HTMLدر این صورت به صورت زیر خواهد بود:
بر اساس قیاس با گزینه قبلی - برچسب لزوماباید قرار گیرد قبل ازبرچسب‌ها با class.checkbox__text و .radio__text.
کد CSS برای چک باکسبه این صورت خواهد بود:
ورودی چک باکس ( موقعیت: مطلق؛ شاخص z: -1؛ کدورت: 0؛ حاشیه: 10 پیکسل 0 0 20 پیکسل؛ ) محتوا: "" ارتفاع مطلق: 26px: 0.2px 0.2; absolut: -2px عرض: 22px; : .2s; .checkbox input:checked + .checkbox__text:before ( پس زمینه: #9FD468; ) .checkbox input :checked + .checkbox__text:after ( چپ: 26px; ) .checkbox input:focus__text:checkbox shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255,255,0,.7);
کد CSS برای دکمه رادیوییبه این صورت خواهد بود:
ورودی رادیویی ( موقعیت: مطلق؛ z-index: -1؛ کدورت: 0؛ حاشیه: 10px 0 0 7px؛ ) .radio__text ( موقعیت: نسبی؛ بالشتک: 0 0 0 35px؛ مکان نما: اشاره گر؛ ) .radio__text:pre ( محتوا: ""; سمت چپ: 0. ارتفاع: 22px; border-radius: #9FD468: inset 0 1px rgba(0,0,.5); :after ( Opacity: 1; ) .input radio:focus + .radio__text:before (box-shadow: 0 0 0 3px rgba(255,255,0,.7 )
استایل ها در اینجا مانند روش قبلی هستند، فقط برای انتخابگرهای دیگر اعمال می شوند.
سبک سازی برای مرورگرهای قدیمی
کد CSS برای چک باکس. در نظرات به کد توضیحاتی در مورد مرورگرها اضافه کردم:
/* ابتدا استایل ها را برای IE8 و نسخه های قدیمی تر تعیین می کنیم، یعنی. در اینجا چک باکس استاندارد را کمی بهبود می دهیم. */ .checkbox ( تراز عمودی: بالا؛ عرض: 17 پیکسل؛ ارتفاع: 17 پیکسل؛ حاشیه: 0 3 پیکسل 0 0؛ ) /* این برای همه مرورگرها است به جز مرورگرهای بسیار قدیمی که از انتخابگرهای پلاس پشتیبانی نمی کنند. نشان می دهیم که برچسب قابل کلیک است. */ .checkbox + label ( مکان نما: اشاره گر؛ ) /* بعد طراحی چک باکس در مرورگرهای مدرن و همچنین IE9 و بالاتر می آید. با توجه به این واقعیت که مرورگرهای قدیمی از انتخابگرهای :not و :checked پشتیبانی نمی کنند، همه سبک های زیر در آنها کار نمی کنند. در این حالت checked بدون دونقطه در جلو مشخص می شود، به دلایلی به این صورت عمل می کند. */ .checkbox:not(checked) ( موقعیت: مطلق؛ z-index: -1؛ opacity: 0; margin: 10px 0 0 20px; ) .checkbox:not(checked) + label ( موقعیت: نسبی؛ padding: 0 0 0 60px ) .checkbox:not(checked) + label:fore ( محتوا: ""؛ موقعیت: مطلق؛ بالا: -4px؛ سمت چپ: 0؛ عرض: 50px؛ ارتفاع: 26px؛ حاشیه: 13px؛ پس زمینه : #CDD1DA: box-shadow: inset 0 2px rgba(0,0,0,.2) .checkbox:not(checked) + label:after ( content: ""; position: absolute ; بالا: -2px عرض: 10px: 0.2px . سمت چپ: 26 پیکسل;
کد CSS برای دکمه رادیویی:
رادیو ( تراز عمودی: بالا؛ عرض: 17 پیکسل؛ ارتفاع: 17 پیکسل؛ حاشیه: 0 3 پیکسل 0 0؛ ) .رادیو + برچسب ( مکان نما: نشانگر؛ ) .radio:not(بررسی) (موقعیت: مطلق؛ z-index -1 کدورت: 0; حاشیه: 0 0 7 پیکسل) : ""; موقعیت: مطلق: 0. ارتفاع: 50% علامت گذاری شده است: ""; موقعیت: 1px; ارتفاع: 16px: 50% box-shadow: 1px rgba(0.5); + label:after ( opacity: 1; ) .radio:focus + label:fore ( box-shadow : 0 0 0 3px rgba(255,255,0,.7);
نمونه ها
این روش به این روش ساده انجام می شود. با تشکر از این روش، چک باکس ها و دکمه های رادیویی را با با استفاده از CSSشما می توانید آن را هر طور که دوست دارید انجام دهید
در درس آخر با مفهوم شکل آشنا شدیم. وظیفه اصلی آن ترکیب فرم های ورود داده از نوع خاصی است. به عنوان مثال، یک فرم می تواند داده های یک پرسشنامه، آزمون و غیره را ترکیب کند. در این آموزش یاد خواهیم گرفت که چگونه فیلدهای ورودی را خود بسازیم!
فرد خاصی مسئول پرکردن فرم می باشد. برچسب زدن ، دارای یک ویژگی نوع است که به شما امکان می دهد فیلدهای قابل پر کردن خاصی ایجاد کنید: فیلدهای متنی، دکمه های رادیویی، چک باکس ها، لیست ها، دکمه ها. تکرار می کنم، تمام عناصر ذکر شده در بالا فقط در یک برچسب در دسترس هستند - .
برچسب بزنید در HTML
یک تگ واحد است که با آن می توانید عناصر سند خاصی (فیلدهای متنی، دکمه های رادیویی، چک باکس ها، لیست ها، دکمه ها) را ایجاد کنید که قرار است مستقیماً در صفحه HTML پر شوند.در زیر مثالکار کردن در HTML
در برچسب چندین مقدار ویژگی بسیار مهم وجود دارد.
نام- یک ویژگی که همیشه باید برای یک عنصر تنظیم شود تا کنترل کننده (اسکریپت) بفهمد که چه نام ورودی را پردازش می کند.
به این ترتیب اسکریپت پردازش متوجه می شود که این دو زمینه متفاوت هستند.
نوع- این ویژگی وظیفه نشان دادن نوع فیلد را دارد. همانطور که قبلاً ذکر شد، با یک نوع خاص، ورودی می تواند به یک دکمه رادیویی، چک باکس، لیست، دکمه، فیلد متن تبدیل شود.
اندازه- مشخصه ای که اندازه فیلد متن را در زمانی که نوع به عنوان متن مشخص می شود نشان می دهد. داده های مشخص شده به عنوان عرض میدان درک می شوند.
برچسب بزنید
ویژگی را برای ورودی تایپ کنید
حالا بیایید نگاه دقیق تری بیندازیم نوع ویژگیو معانی آن:متن- مقدار مشخصه نشان می دهد که یک فیلد متنی معمولی نمایش داده می شود که در ابتدا برای اصلاح در دسترس است.
ویژگی ارزشلازم نیست، اصلاً می توان آن را حذف کرد. با این حال، اگر شما نیاز به تعیین یک مقدار پیش فرض دارید که در ابتدا در فیلد ظاهر می شود، باید آن را پر کنید.
رمز عبور- ورودی را به فیلد رمز عبور تبدیل می کند. تفاوت متن در این است که داده های وارد شده به صورت ستاره نمایش داده می شوند و پس از پر کردن کل فرم، مرورگر متوجه می شود که رمز عبور در این قسمت است و می پرسد که آیا باید ذخیره شود یا خیر.
ارسال کنید- یک مقدار مشابه از ویژگی type، ورودی را به عنوان یک دکمه تعریف می کند، هنگامی که فشار داده شود، یک اسکریپت خاص پردازش می شود (بعدا با مطالعه زبان های PHP و جاوا اسکریپت خواهید فهمید که یک اسکریپت چیست). این دکمه برای ارسال داده ها از فرم ها به یک handler که به عنوان مثال به زبان های بالا نوشته شده است استفاده می شود. موارد دیگری نیز وجود دارد، اما من محبوب ترین آنها را نشان دادم.
تنظیم مجدد- این نوع دیگری از دکمه است که تمام مقادیر موجود در فرم را بازنشانی می کند. پس از فشار دادن آن، باید دوباره پر شوند.
رادیو- این مقدار یک دکمه رادیویی، یعنی یک سوئیچ ایجاد می کند. معمولاً برای مقادیر با تعداد کمی گزینه استفاده می شود. برای مثال جنسیت، فاصله سنی و غیره را انتخاب کنید. به نظر می رسد این است:
ویژگی type روی رادیو تنظیم شده است - این یک دکمه رادیویی است. مقدار مقدار حاوی عبارت یا کلمه ای است که می خواهید دریافت کنید اگر شخصی دکمه رادیویی خاصی را انتخاب کرده و داده ها را ارسال کند.
موارد دیگری نیز وجود دارد که کاربر باید چندین گزینه پاسخ را انتخاب کند. در این حالت، دیگر یک دکمه رادیویی استفاده نمی شود (فقط یک گزینه را می پذیرد)، بلکه یک چک باکس یا چک باکس است.
چک باکسفیلدی است که مانند دکمه رادیویی کار می کند. تنها تفاوت این است که می توانید چندین چک باکس را به عنوان گزینه های پاسخ انتخاب کنید. درست مانند یک دکمه رادیویی، اگر چندین چک باکس متعلق به یک سوال باشد، ویژگی نام آنها باید به طور مساوی پر شود. مقدار بر این اساس مقدار فیلد انتخاب شده را نشان می دهد.
ویژگی های نحوه کار فیلدهای ورودی
در اینجا پیشنهاد می‌کنم به سؤالاتی که ممکن است در ابتدا هنگام کار با ورودی با آنها مواجه شوید، نگاهی بیندازیم.چگونه مطمئن شویم که کاربر بلافاصله یک پاسخ (چک باکس یا دکمه رادیویی) را انتخاب می کند؟
یک مشخصه تیک دار برای این وجود دارد. باید در انتهای تگ ورودی مشخص شود. از آنجایی که ویژگی تک است، هیچ مقداری ندارد. فقط باید آن را به عنصر ورودی اضافه کنید. به عنوان مثال، مانند ورودی زیر:
چگونه می توانم مطمئن شوم که متنی که این انتخاب را توضیح می دهد در کنار یک چک باکس یا دکمه رادیویی قابل مشاهده است؟
برای انجام این کار، قبل و بعد از دکمه رادیویی یا چک باکس، یک تگ می نویسیم
بر این اساس، در برچسب باز و بسته شدن، خود چک باکس و کلمات لازم را مشخص می‌کنید. و توجه! حتی اگر کاربر روی کلمه کلیک کند، چک باکس همچنان هایلایت خواهد شد.
آخرین به روز رسانی: 1395/04/08
چک باکس
چک باکس عنصری را نشان می‌دهد که می‌تواند در دو حالت باشد: علامت زده و بدون علامت. یک چک باکس با استفاده از یک عنصر ورودی با ویژگی type="checkbox" ایجاد می شود:
فناوری های مورد مطالعه
ویژگی checked به شما امکان می دهد یک چک باکس را در حالت علامت زده قرار دهید.
سوئیچ ها
دکمه‌های رادیویی یا دکمه‌های رادیویی مشابه باکس‌های انتخاب هستند و همچنین می‌توانند در حالت علامت‌دار یا بدون علامت باشند. فقط برای دکمه‌های رادیویی، می‌توانید یک گروه ایجاد کنید که در آن فقط یک دکمه رادیویی در آن واحد انتخاب شود. به عنوان مثال:
برای ایجاد یک دکمه رادیویی، باید ویژگی type="radio" را مشخص کنید. و اکنون یک ویژگی name دیگر نه به نام عنصر، بلکه به نام گروهی که عنصر دکمه رادیویی به آن تعلق دارد، اشاره می کند. در این مورد، ما دو گروه از دکمه های رادیویی داریم: جنسیت و فناوری. از هر گروه فقط یک دکمه رادیویی می توانیم انتخاب کنیم. دوباره، برای علامت گذاری یک دکمه رادیویی، ویژگی علامت زده شده آن را تنظیم کنید:
ویژگی مهم، ویژگی مقدار است، که هنگام ارسال فرم، به سرور اجازه می دهد تا تعیین کند کدام دکمه رادیویی بررسی شده است.
