article

طراحی باکس جستجو با فتوشاپ و CSS

web-search-box

از جمله ابزارهایی که در گوشه و کنار بیشتر سایت ها و وبلاگ ها به چشم می خورد، امکان جستجو و باکس مربوط به آن است که عموما به صورت گرافیکی و به کمک برنامه هایی نظیر فتوشاپ در کنار کدنویسی HTML و CSS ساخته شده اند، البته روش های مختلفی ممکن است برای ایجاد این گونه جلوه ها مورد استفاده قرار گیرد، اما در آموزش پیش رو می خواهیم یکی از راحت ترین و در عین حال استانداردترین آنها را توضیح دهیم، لذا اگر می خواهید برای سایت یا وبلاگتان چنین قابلیتی ایجاد کنید یا اینکه طراح قالب هستید و علاقمند به فراگیری شیوه های متفاوت، با ادامه مطلب همراه ما باشید.

ساخت چارچوب باکس با HTML


همان طور که پیش تر گفتیم، باکس های جستجو در واقع فرمهای HTML هستند که با افزودن دکمه ارسال (submit) و پس زمینه گرافیکی تکمیل می شوند، پس آنچه ما در گام اول احتیاج داریم ساخت یک فرم html، یک فیلد از نوع input و یک دکمه ارسال یا submit است که در نمونه کد زیر این کار را انجام داده ایم.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | طراحی فیلد جستجو</title>
<!-- https://webgoo.ir -->
</head>
<body>
<div class="search-box">
<form action="#" method="get">
<input class="search-input" type="text" value="جستجو..." maxlength="125">
<input class="search-submit" type="submit" value="">
</form>
</div>
</body>
</html>
توضیح:
- همان طور که ملاحظه می کنید، فرم html بالا داخل یک بلاک div با کلاس فرضی search-box قرار دارد، در ادامه خواهیم دید که این بلاک در واقع نقش پس زمینه را برای باکس جستجو بازی می کند.
- فیلد input و دکمه submit نیز هر کدام یک کلاس css فرضی دارند که برای اعمال تغییرات ظاهری از آنها استفاده خواهیم کرد.

استایل css باکس جستجو


پس از نوشتن چارچوب html کار، باید فرم اولیه آن را با استایل css شکل دهیم.
<style type="text/css">
.search-box{
    width:200px;
    height:28px;
    background:#000 url(search-box.jpg);
    display:inline-block;
    direction:rtl;
    overflow:hidden;/*IE 6*/    
}
.search-input{
    width:166px;
    height:25px;
    background-color:transparent;
    display:inline-block;
    border:0px;
    padding:2px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;
    color:#666;
    line-height:16px;/*IE */
}
.search-input:focus{
    outline:none;
}
.search-submit{
    width:25px;
    height:25px;    
    border:0px;
    padding:0px;
    background-color:transparent;
    display:inline-block;
    cursor:pointer;
}
</style>
توضیح:
- به این دلیل که ما از یک تصویر گرافیکی برای پس زمینه استفاده خواهیم کرد، لذا پس زمینه عناصر موجود در فرم را به صورت نامرئی (transparent) و بدون خط حاشیه (border) تنظیم می کنیم.
- در بلاک search-box که در واقع بلاک اصلی باکس جستجو است، از یک تصویر با نام search-box.jpg به عنوان پس زمینه استفاده کرده ایم، این تصویر را باید به صورت نمونه زیر در فتوشاپ (با ابعاد 200 در 28 پیکسل) طراحی کنید.
search-box
برای طراحی می توانید از ابزار Rounded Rectangle Tool و قابلیت Blending Options در فتوشاپ استفاده کنید.
- برای تنظیم جلوه های ظاهری فیلد input و دکمه submit نیز از دو کلاس css با نام های دلخواه search-input و search-submit استفاده کرده ایم، به این طریق تقریبا بیشتر ویژگی های مربوط به سفارشی سازی توسط استایل css قابل تنظیم است.
نکته: اگر دقت کرده باشید، برای حالت focus کلاس search-input از مقادیر outline و none استفاده کرده ایم، این کار برای غیر فعال کردن نمایش خط حاشیه فرم (در حالتی که کاربر در فیلد کلیک می کند) در برخی مرورگرها مانند گوگل کروم و سافاری است، علاوه بر این برای سازگاری با نسخه های قدیمی مرورگر اینترنت اکسپلورر، خاصیت overflow و line-height نیز در استایل استفاده شده است.

افزودن قابلیت تعاملی به باکس جستجو


باکس جستجوی ما تقریبا آماده شده است، اما قبل از اینکه پیش نمایش کار را با هم ببینیم، بد نیست یک قابلیت تعاملی نیز به فیلد اضافه کنیم، این قابلیت تعاملی می تواند بسته به هدف و سلیقه شما، طرح های مختلف داشته باشد و در آن از css یا جاوا اسکریپت و یا ترکیب این دو استفاده شود، اما در اینجا قصد داریم با چند تابع جاوا اسکریپت ساده، قابلیت محو شدن و آشکار شدن خودکار نوشته پیش فرض داخل فیلد را به فرم اضافه کنیم، بدین منظور کد جاوا اسکریپت زیر را نیز به صفحه خود اضافه می کنیم (در بالای صفحه و بین تگ های head).
<script type="text/javascript">
//<![CDATA[
function searchClear(thisfield, defaulttext, color){
    if (thisfield.value == defaulttext){
        thisfield.value = "";
        if (!color){
            color = "666666";
        }
        thisfield.style.color = "#" + color;
    }
}
function searchShow(thisfield, defaulttext, color){
    if (thisfield.value == ""){
        thisfield.value = defaulttext;
        if (!color){
            color = "666666";
        }
        thisfield.style.color = "#" + color;
    }
}
//]]>
</script>
نکته: برای فراخوانی توابع بالا، از رویدادهای onclick (برای حالتی که کاربر در فیلد کلیک می کند) و onblur (برای حالتی که کاربر خارج از فیلد کلیک می کند) استفاده کرده و فیلد input را به صورت زیر ویرایش می کنیم.
<input class="search-input" type="text" value="جستجو..." maxlength="125" onclick="searchClear(this, 'جستجو...')" onblur="searchShow(this, 'جستجو...')">

کد نهایی و پیش نمایش آنلاین


در زیر یک نمونه کامل از باکس جستجو به همراه پیش نمایش آنلاین آن را می توانید ملاحظه و بررسی کنید.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | طراحی فیلد جستجو</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.search-box{
    width:200px;
    height:28px;
    background:#000 url(search-box.jpg);
    display:inline-block;
    direction:rtl;
    overflow:hidden;/*IE 6*/    
}
.search-input{
    width:166px;
    height:25px;
    background-color:transparent;
    display:inline-block;
    border:0px;
    padding:2px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;
    color:#666;
    line-height:16px;/*IE */
}
.search-input:focus{
    outline:none;
}
.search-submit{
    width:25px;
    height:25px;    
    border:0px;
    padding:0px;
    background-color:transparent;
    display:inline-block;
    cursor:pointer;
}
</style>
<script type="text/javascript">
//<![CDATA[
function searchClear(thisfield, defaulttext, color){
    if (thisfield.value == defaulttext){
        thisfield.value = "";
        if (!color){
            color = "666666";
        }
        thisfield.style.color = "#" + color;
    }
}
function searchShow(thisfield, defaulttext, color){
    if (thisfield.value == ""){
        thisfield.value = defaulttext;
        if (!color){
            color = "666666";
        }
        thisfield.style.color = "#" + color;
    }
}
//]]>
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!
</noscript>

<div class="search-box">
<form action="#" method="get">
<input class="search-input" type="text" value="جستجو..." maxlength="125" onclick="searchClear(this, 'جستجو...')" onblur="searchShow(this, 'جستجو...')">
<input class="search-submit" type="submit" value="">
</form>
</div>
<hr>
به طور خلاصه باکس بالا از یک بلاک با پس زمینه ثابت، یک فرم html و دو فیلد از نوع input و submit تشکیل شده است.
</body>
</html>
پیش نمایش
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» زیبا سازی فرم های وب با CSS
» چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
» طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS
commentنظرات (۱۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: alireza
۰۷:۱۴ ۱۳۹۱/۰۹/۱۹
ممنون از آموزش هاي كامل و خوبتون. هميشه پيروز باشيد.
نویسنده: mid
۲۲:۴۹ ۱۳۹۱/۰۹/۱۹
سلام
من یه باکس سرچ با ابعاد بزرگتر طراحی کردم و فقط سایز css هاتون رو با طراحیم مچ کردم اما نتونستم طراحی کنم؟!!
مشکل چیه ؟ دقیقا همین کدها فقط تغییر در سایز باکس ها و button
پاسخ: 
سلام
باید اندازه ها برای همه عناصر متناسب تغییر کنند و بهتر است بلاک اصلی یک مقدار عرض بیشتر داشته باشد (تا دکمه ارسال به پایین هدایت نشود)، برای تست و اطمینان از نحوه نمایش عناصر می توانید از تکنیک زیر استفاده کنید:
overflow:hidden را از کد css حذف کنید، برای background-color ها دو رنگ متمایز در نظر بگیرید تا دقیقا محل فیلد و دکمه در کنار هم مشخص شود، اگر دکمه ارسال مشخص نبود یا به پائین کشیده شده بود باید عرض بلاک search-box را بیشتر در نظر بگیرید.
نویسنده: es
۱۱:۰۰ ۱۳۹۱/۰۹/۲۰
سلام
من یک سری فونت نصب کردم بعد از اون سایت شما به این شکل در اومد:
http://upload.tehran98.com/images/pnhxd19v1bf83dbpj835.png
حالا کدوم فونت ها رو پاک کنم تا درست بشه؟
پاسخ: 
سلام
در حال حاضر سایت از فونت استاندارد Tahoma استفاده می کند، پس باید مشکلی در این فونت وجود داشته باشد، فونت Tahoma True Type به صورت پیش فرض در ویندوز وجود دارد و در سایت های فارسی زبان به طور گسترده استفاده می شود، باید نسخه اصلی را جایگزین نسخه فعلی کنید.
نویسنده: es
۱۱:۲۴ ۱۳۹۱/۰۹/۲۰
در فایرفاکس هم این شکله:
http://ibt.hostesr.com/img/dda6e957f1e5.png
پاسخ: 
وقتی فونت Tahoma در سیستم قابل دسترس نباشد یا اینکه مشکلی داشته باشد، مرورگر از فونت پیش فرض استفاده می کند که همان Arial است.
نویسنده: es
۱۲:۰۷ ۱۳۹۱/۰۹/۲۰
ممنون از پاسختون این طور که متوجه شدم کل سیستم دچار مشکل شده و فونت ها دچار مشکل شدن
thanx
نویسنده: محمد
۱۰:۲۳ ۱۳۹۱/۱۰/۱۰
با سلام و درود
استاد عزیز که پاسخ ها را می نویسی
شما باید در قالب سایتتان تمام مشکلات احتمالی را برطرف کنید و اگر دسترسی ندارید به برنامه نویس محترم بگویید که از font face استفاده کند که اگر هم بر فرض محال فونت تاهوما ایراد داشت سایت شما مشکل نداشته باشه
یک برنامه نویس موفق همیشه همه جوانب رو در نظر میگیره
با تشکر (در ضمن از لحن حرف زدنم ناراحت نشید اگر هم شدید معذرت میخوام من قصدم خیر خواهی بود)
پاسخ: 
سلام
از نقد سازنده شما ممنونیم، اما مشکل (بالا) از سیستم کاربر بوده و ارتباطی به سایت ندارد، فونت Tahoma (در کنار Geneva, sans-serif, Arial, Helvetica و...) جزء فونت های استاندارد و پیش فرض سیستم عامل ها است که در اصطلاح به آنها فونت های امن وب (web-safe) می گویند و تنها در صورتی دچار مشکل می شود که به فرض سیستم کاربر دچار مشکل باشد، خاصیت font face در css نسخه 3 معرفی شده و در مرورگرهای قدیمی یا در برخی دستگاه ها پشتیبانی نمی شود.
به هر صورت خیلی ممنون از اینکه یادآوری کردید.
نویسنده: مینا
۱۶:۵۲ ۱۳۹۲/۱۱/۲۵
سلام ببخشید خییلی ممنون بسیار زیبا تونستم ایجادش کنم اما میشه کمکم کنین چطور اون دکمه سرچ رو فعال کنم که عمل جستجو رو انجام بده؟؟؟
پاسخ: 
سلام
برای فعال کردن دکمه باید برنامه نویسی PHP یا سایر زبان های سمت سرور بلد باشید، البته از جستجوی گوگل برای سایت ها و وبلاگ ها نیز می توانید استفاده کنید (که آموزش آن در سایت وجود دارد، عبارت "جستجو" را در قسمت جستجوی سایت وارد کنید).
نویسنده: مهدی
۱۶:۱۸ ۱۳۹۳/۰۵/۲۳
عالی و مفید
نویسنده: آرزو
۲۰:۱۴ ۱۳۹۳/۰۷/۲۸
با سلام
من یه باکس سرچ طراحی کردم وقتی که باکسم هم اندازه ی اندازه های داده شده در این آموزش بود مشکلی نداشتم اما به محض تغییر در سایز باکس مورد نظر همه چیز خراب شد به این صورت که عکس button با یه فاصله ی 40px که مربوط به دکمه بود از border باکس اصلی فاصله گرفت و دقیقا زیر کلمه جستجو قرار گرفت (این در حالی بود که دکمه، دقیقا کنار input قرار داشت و پایین و یا بالا نرفته بود) یعنی در حالت کلی مشکل اصلیم مربوط به جابجا شدن عکسی بود که برای button در فتوشاپ گذاشته بودم. مشکل از کجاست؟ لطفا راهنماییم کنید. با تشکر
پاسخ: 
سلام
برای تغییر اندازه باکس باید تمام width های مرتبط را به میزانی مساوی افزایش دهید، به طور مثال width در کلاس search-box و search-input باید به یک مقدار افزایش داشته باشد (به فرض + 20 شود)، اگر این تناسب رعایت شود دلیلی برای بهم ریختن فرم وجود ندارد.
نویسنده: نوید
۱۱:۴۴ ۱۳۹۵/۰۵/۲۳
سلام ممنون از سایت خوبتون.
من تمام این کدارو وارد کردم ولی اون تصویر پس زمینه نشون نمیده ، تصویرم ذخیره کردم
پاسخ: 
لطفا آدرس صفحه را جهت بررسی درج کنید!
نویسنده: زهرا
۱۵:۳۹ ۱۳۹۶/۰۵/۱۹
سلام
من از کدها استفاده کردم و همه چیز درست بود فقط از کدهای جاوا اسکریپت نتونستم استفاده کنم. یعنی من این کدها رو در قسمت head گذاشتم و فراخوانی هم کردم اما وقتی میرم تو سایت اجرا می کنم و تو باکس کلیک که میکنم متنی که داخل باکس هست به صورت خودکار پاک نمیشه.
اگه ممکنه راهنمایی کنید چیکار کنم که این عمل رو درست انجام بده.
البته من سایز باکس و تصویر رو هم تغییر دادم و فکر نمیکنم کدهای جاوا اسکریپت برای پاک شدن متن هنگام کلیک و برگشتن دوباره آن ربطی به تغییرات ایجاد شده در css داشته باشد.
ممنون از مطالبتون
پاسخ: 
باید تمام قسمت ها مطابق با با الگوی آموزش باشد، در تگ input رویداد onclick و onblur را لحاظ کردید؟
نویسنده: زینب
۱۵:۲۳ ۱۳۹۶/۰۸/۰۶
سلام می خواستم بدونم اگه به جای تگ input از کنترل textbox در asp استفاده کنیم چجوری از کدهای script استفاده کنیم؟ آخه در کنترل های textbox در asp رویدادهای onclick و onblur و onfocus نیست و نمیشه از این ویژگی ها استفاده کرد. من هم حتما باید از textbox ها استفاده کنم چون فرم دارم طراحی می کنم و بعدا برای textbox ها باید کدنویسی کنم.
لطفا منو راهنمایی کنید. خیلی دنبال این موضوع هستم و راه حلی پیدا نمیکنم. خیلی کارم گیر کرده.
ممنون میشم
پاسخ: 
لطفا در این رابطه به سایت های مرتبط با ASP.NET مراجعه کنید، تا آنجا که اطلاع داریم می توانید رویداد را با کدهای جاوا اسکریپت به تگ input نسبت دهید، در این حالت تگ input باید ID خاص خود را داشته باشید و در هنگام بارگذاری صفحه رویداد به آن نسبت داده شود، مثال:
<script type="text/javascript">
window.onload = function(){
var input = document.getElementById('my-input');
var button = document.getElementById('my-button');

button.onclick = function(){
alert(input.value);
}
}
</script>
<input id="my-input" type="text" value="1">
<input id="my-button" type="button" value="Click">
همچنین می توانید از addEventListener نیز در جاوا اسکریپت استفاده کنید.
نویسنده: سید جلال
۱۷:۳۴ ۱۳۹۶/۰۸/۲۵
با سلام من قصد دارم یک باکس سرچ درست کنم که بتونه از یک لیست که نام و نام خانوادگی و تعداد نفرات در آن مشخص شده سرچ کنه
پاسخ: 
برای این منظور صرف طراحی بخش کاربری کفایت نمی کند، باید برنامه نویسی PHP و کار با پایگاه داده MySQL بلد باشید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





5 × 4
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.