آموزش سلکتور required: در css
مقالات طراحی سایتکاربرد انتخاب کننده 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 صحبت خواهیم کرد . برای مطالعه مقالات بیشتر میتوانید قسمت ” مقالات طراحی سایت ” داخل بلاگ را مطالعه کرده و بیشتر یاد بگیرید . موفق باشید دوستان .
