بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید " شاهکار تولید محتوا " برای علاقمندان به سئو ، جزئیات دوره

آموزش سلکتور required: در css

مقالات طراحی سایت

کاربرد انتخاب کننده required در زبان css را شناخته و در طراحی های خود از آن بخوبی استفاده کنید !

0 10
آموزش سلکتور required: در css

اگر با طراحی سایت و خصوصا زبان html آشنایی دارید حتما با بخش فرم‌ها کار کرده‌اید . فرم ها بخش جدایی ناپذیر وب سایت‌ها هستند که در سایت های داینامیک نقش بسیار مهمی دارند . در سایت هایی که داینامیک هستند و دائما ارسال یا ویرایش اطلاعات دربخش‌های مختلف سایت انجام می‌شود تمامی پروسه ها باید توسط فرم ها انجام شود و جدا کردن فرم‌ها از این پروسه عملا غیرممکن است و به هیچ وجه نمی‌توان بجز فرم‌ها و ورودی های آن ، دیتاهایی را رد و بدل کرد .

اگر بخوبی با صفاتی که می‌توان به هریک از المان های فرم اختصاص دارد آشنایی داشته باشی باید بدانید زمانی که یک فرم در حالت اولیه و خام طراحی شود ، پرکردن یا به عبارتی تکمیل کردن تمامی المان های داخل فرم اختیاری است و برای اینکه کاربر را ملزم کنیم تا حتما ورودی خاصی را پرکرده و آن را خالی نگذارید باید صفت required را به آن اضافه کنیم همانند مثال زیر :

<input type="text" name="username" required>

زمانی که شما صفت required یا همان ( مورد نیاز است ) را به ورودی‌های فرم خودتان اضافه کنید ، کاربر بدون تکمیل کردن این فیلد مدنظر ، امکان ارسال دیتاهای فرم را ندارد .

چگونه از ویژگی required در css استفاده کنیم ؟

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

اکنون تصور کنید تا داخل فرم قصد داریم ورودی هایی که ضروری هستند را کمی متفاوت‌تر نشان دهیم تا کاربر متوجه شود که تکمیل این ورودی‌ها حتما ضروری است . در این حالت می‌توان به کمک زبان css وارد عمل شده و ظاهر فرم را برای داشتن تجربه کاربری بهتر ، تغییر داد . به کد زیر توجه کنید :

form input:required{
  background-color: #eee;
  border:1px solid #919191;
}

در این کد شما در داخل فرم خودتان ، input هایی را انتحاب کردید که دارای ویژگی required هستند . به عبارتی تمامی input هایی را هدف قرار می‌دهیم که تکمیل کردن آنها ضروری است و کاربر باید حتما آنها را تکمیل کند لذا با کمی ایجاد تغییر در ظاهر ورودی های فرم ، می‌توان به کاربر نمایش داد که این ورودی‌ها ضروری هستند و یا اگر فرم شما دارای راهنما است ، در داخل راهنمای فرم اشاره کنید که بخش هایی از فرم که با فلان رنگ مشخص شده است ، آیتم های ضروری هستند .

دقیقا در نقطه برعکس حالت required ، حالت optional قرار دارد که در مقاله بعدی نیز در رابطه با این ویژگی و استفاده از آن داخل کدهای css صحبت خواهیم کرد . برای مطالعه مقالات بیشتر می‌توانید قسمت ” مقالات طراحی سایت ” داخل بلاگ را مطالعه کرده و بیشتر یاد بگیرید . موفق باشید دوستان .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

بوت استرپ چیست ؟ بوت استرپ چیست و چرا ما باید از بوت استرپ استفاده کنیم ؟ بوت استرپ از بخش رسپانسیو کردن سایت برای ما مهم می شود . با اینکه بوت استرپ یک فریم ورک است و قبل از بودن بوت استرپ هم امکان واکنشگرا کردن سایت ها به سختی وجود داشت اما […]

0 1,367

بهترین ادیتور های طراحی سایت بهترین ادیتور های طراحی سایت ؛ یکی از مهمترین ابزار طراحان و برنامه نویسان دنیای وب محیط هایی برای نوشتن کد هستند و بدون این ابزار ها توسعه برنامه ها بسیار سخت و طاقت فرسا میباشد شاید هم غیرممکن .! امروزه در دنیای کد نویسی دو نوع نرم افزار عمده […]

2 1,182
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود