بخش Vip سئو نود

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

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

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

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

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

0 46
آموزش سلکتور 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 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

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

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

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

خدمات طراحی سایت و برنامه نویسی وب در تبریز و همچنین سایر شهر های کشور ، بدون محدودیت در دیزاین و امکانات ، با بهترین قیمت و همچنین تحویل بموقع ، توسط تیم برنامه نویسی مجرب و متخصص

6 888

بهترین فونت های فارسی که می‌توانید در اکثر سایت های فارسی از آنها استفاده کنید . معرفی 3 فونت بسیار جذاب فارسی با وزن های مناسب جهت استفاده در انواع پروژه های طراحی سایت یا اپلیکیشن برای تمامی طراحان !

0 57
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود