آموزش برنامه نویسی وب و مهارتهای مرتبط
پنجشنبه ۰۴ اردیبهشت ۱۴۰۴
Thursday, April 24, 2025 GMT +3:30
Thursday, April 24, 2025 GMT +3:30
دسته بندی
دسترسی سریع
زیبا سازی فرم های وب با CSS
Pseudo کلاس های پرکاربرد CSS برای عناصر فرم
استفاده از Pseudo کلاس hover برای تگ های فرم
استفاده از Pseudo کلاس focus برای تگ های فرم
استفاده از Pseudo کلاس focus-within برای تگ های فرم
استفاده از Pseudo کلاس active برای تگ های فرم
گرد کردن گوشه ها و افزودن سایه با border-radius و box-shadow
کد و پیش نمایش آنلاین
Pseudo کلاس های پرکاربرد CSS برای عناصر فرم
استفاده از Pseudo کلاس hover برای تگ های فرم
استفاده از Pseudo کلاس focus برای تگ های فرم
استفاده از Pseudo کلاس focus-within برای تگ های فرم
استفاده از Pseudo کلاس active برای تگ های فرم
گرد کردن گوشه ها و افزودن سایه با border-radius و box-shadow
کد و پیش نمایش آنلاین
زیبا سازی فرم های وب با CSS
امروزه استفاده از خاصیت های متنوع CSS و تکنیک ها و قابلیت های مبتنی بر این زبان در طراحی صفحات و قالب های وب امری اجتناب ناپذیر و فراگیر است، طراحان و برنامه نویسان وب با استفاده از قدرت CSS و کمی تجربه بسیاری از جلوه های بصری را بدون به کارگیری تصاویر و المان های گرافیکی و صرفا با استایل نویسی ایجاد می کنند که این امر نهایتا منتج به خلق صفحاتی زیبا و چابک و کاهش حجم کلی قالب های وب می شود که در زمینه بهینه سازی (SEO) نیز فاکتور مهمی است، با این مقدمه در ادامه یادداشت پیش رو می خواهیم در خصوص استفاده از CSS جهت زیباسازی و اختصاص استایل CSS سفارشی به عناصر مختلف زیرمجموعه تگ فرم (form) شامل تگ های input، textarea، checkbox، select و button بپردازیم، به طور معمول این تگ ها با استایل پیش فرض مرورگرها نمایش داده می شوند که شاید برای کاربردهای حرفه ای مطلوب نباشد.
Pseudo کلاس های پرکاربرد CSS برای عناصر فرم
عناصر مختلف فرم های وب معمولا شامل چند حالت مختلف تعاملی هستند که برای هر حالت ممکن است نیازمند تعریف استایل خاصی باشیم، به طور مثال برای تگ input چند حالت قبل از شروع به تایپ (Normal)، بردن نشانه گر ماوس روی فیلد (Hover) و کلیک در فیلد (Focus) را می توانیم تصور کنیم، برای اینکه بتوانیم به هر کدام از این حالت ها استایل سفارشی اختصاص دهیم از قابلیتی تحت عنوان Pseudo-classes (تلفظ soo·dow) یا شبه کلاس در CSS استفاده می شود، Pseudo کلاس ها راهکاری برای توسعه سلکتورهای متداول CSS هستند تا حالت های تعاملی مختلف عناصر وب را پوشش دهند، به فرض اگر تگ input با سلکتور ID انتخاب شده باشد:
<style>
#my-input {
color: #999;
}
</style>
<form action="#" method="post">
<label for="my-input">Name:</label>
<input id="my-input" type="text">
</form><style>
#my-input {
color: #999;
}
#my-input:hover {
color: #00C;
}
</style>- hover: برای زمانی که نشانه گر ماوس را روی عنصر می بریم.
- focus: زمانی که یک عنصر در حالت متمرکز قرار دارد (به فرض وقتی داخل فیلد متنی کلیک می کنیم).
Pseudo کلاس focus دو هم خانواده با نام های focus-within و focus-visible دارد، focus-within (زمانی که یک عنصر یا عناصر زیرمجموعه آن در حالت متمرکز قرار دارند) را در ادامه بررسی و از توضیح focus-visible (نمایش محدوده متمرکز شده با استایل پیش فرض واسط کاربری در مواقعی که به فرض با صفحه کلید و tabindex سر و کار داریم) به جهت کاربرد کمتر و نیاز به آموزش های جداگانه صرف نظر می کنیم.
- active: برای زمانی که عنصر در حالت فعال قرار می گیرد (به فرض هنگامی که کاربر بر روی دکمه کلیک می کند).
استفاده از Pseudo کلاس hover برای تگ های فرم
اولین رفتار تعاملی کاربران در خصوص عناصر مختلف فرم های وب بردن نشانه گر ماوس بر روی آنها جهت کلیک با هدف شروع به نوشتن، انتخاب آیتم، اجرای ابزار یا ارسال اطلاعات است و شبه کلاسی که برای تعیین استایل سفارشی این رفتار تعاملی می توانیم استفاده کنیم hover است، با در نظر گرفتن Pesudo کلاس hover زمانی که کاربر ماوس را بر روی یکی از تگ های زیرمجموعه فرم می برد استایل مربوطه اعمال خواهد شد، به طور مثال:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از hover برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
font-size: 12px;
}
label {
display: inline-block;
width: 100px;
height: 50px;
}
.input {
background: #F9F9F9;
padding: 4px;
border: #CCC 1px solid;
outline: 0;
}
.input:hover {
background: #F5F5F5;
border: #92C9FF 1px solid;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
</form>
</body>
</html>توضیح:
- کلاس CSS تعریف شده در نمونه کد بالا از دو قسمت تشکیل شده است، قسمت اول ویژگی های کلی فیلد هدف (در اینجا فیلد input) را در حالت عادی تعریف می کند و در قسمت دوم با استفاده از Pesudo کلاس hover برای حالتی که کاربر ماوس را بر روی فیلد مورد نظر می برد استایل متمایزی در نظر گرفته ایم که می تواند به فرض تغییر رنگ خط حاشیه فیلد یا هر شکل ظاهری دلخواه دیگری باشد.
- برای استفاده از شبه کلاس hover در سایر عناصر فرم های وب مانند textarea، select، button، submit و... نیز می توانیم به همین ترتیب عمل کنیم، یعنی ابتدا یک کلاس در CSS با دو وضعیت تعاملی Normal و Hover تعریف کرده و کلاس را به عنصر مورد نظر نسبت دهیم.
استفاده از Pseudo کلاس focus برای تگ های فرم
معمولا وضعیت hover به تنهایی نمی تواند جلوه کاملی برای طراحان وب ایجاد کند، به فرض کاربر انتظار دارد هنگامی که در فیلد متنی کلیک کرده حاشیه فیلد متمرکز (Focus) شده را به رنگی متمایز از سایر عناصر فرم مشاهده کند، البته این نوع تنظیمات بیشتر سلیقه ای هستند اما حداقل استفاده هایی از این نوع سفارشی سازی می تواند برای هر صفحه وبی کاربردی باشد، برای در نظر گرفتن استایل سفارشی برای حالت تمرکز بر روی یک عنصر از Pesudo کلاس focus استفاده و کدهای مثال بالا را به صورت نمونه زیر تکمیل می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از focus برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
font-size: 12px;
}
label {
display: inline-block;
width: 100px;
height: 50px;
}
.input {
background: #F9F9F9;
padding: 4px;
border: #CCC 1px solid;
outline: 0;
}
.input:hover {
background: #F5F5F5;
border: #92C9FF 1px solid;
}
.input:focus {
background: #F0F0F0;
border: #3399FF 1px solid;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
</form>
</body>
</html>توضیح:
- با افزودن شبه کلاس focus به استایل CSS هنگامی که کاربر در یکی از فیلدها کلیک می کند می توانیم استایل سفارشی برای وضعیت تمرکز در فیلد داشته باشیم.
- اگرچه حالت focus در بیشتر مرورگرهای استاندارد امروزی پشتیبانی می شود اما در مرورگر اینترنت اکسپلورر نسخه 6 و 7 پشتبانی نشده و در اینترنت اکسپلورر نسخه 8 هم باید DOCTYPE در ابتدای صفحه درج شود تا این خاصیت عمل کند (این مرورگرها در حال حاضر منسوخ شده اند و توضیحات صرفا جهت اطلاعات بیشتر عنوان شد).
استفاده از Pseudo کلاس focus-within برای تگ های فرم
در کدنویسی صفحات وب تگ های مختلف می توانند به صورت والد فرزندی باشند و ممکن است بخواهیم زمانی که تگ فرزند در حالت focus قرار گرفت به تگ والد استایل سفارشی اختصاص دهیم، در اینگونه موارد Pseudo کلاس focus-within کاربرد دارد که نحوه تعریف و استفاده از آن را با نمونه کد زیر بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از focus-within برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
font-size: 12px;
}
form {
padding: 8px;
background: #F9F9F9;
border: #CCC 1px solid;
}
form:focus-within {
background: #F0F0F0;
border: #3399FF 1px solid;
}
label {
display: inline-block;
width: 100px;
height: 50px;
}
.input {
background: #F9F9F9;
padding: 4px;
border: #CCC 1px solid;
outline: 0;
}
.input:hover {
background: #F5F5F5;
border: #92C9FF 1px solid;
}
.input:focus {
background: #F0F0F0;
border: #3399FF 1px solid;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
</form>
</body>
</html>توضیح:
- در نمونه کد بالا تگ form به عنوان تگ والد و تگ های label و input به عنوان تگ های فرزند هستند.
- با تمرکز کاربر در یکی از فیلدهای input یا label سلکتور مربوط به شبه کلاس focus-within اجرا شده و استایل سفارشی در نظر گرفته شده بر روی تگ form اعمال می شود.
استفاده از Pseudo کلاس active برای تگ های فرم
یکی دیگر از رفتارهای تعاملی کاربران در هنگام کار با عناصر زیرمجموعه فرم وضعیت های فعال مانند کلیک بر روی دکمه ها است که ممکن است نیاز به استایل دهی سفارشی داشته باشد، در نمونه کد زیر نحوه استفاده از Pseudo کلاس active برای تگ های فرم را بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از active برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
font-size: 12px;
}
form {
padding: 8px;
background: #F9F9F9;
border: #CCC 1px solid;
}
form:focus-within {
background: #F0F0F0;
border: #3399FF 1px solid;
}
label {
display: inline-block;
width: 100px;
height: 50px;
}
.input {
background: #F9F9F9;
padding: 4px;
border: #CCC 1px solid;
outline: 0;
}
.input:hover {
background: #F5F5F5;
border: #92C9FF 1px solid;
}
.input:focus {
background: #F0F0F0;
border: #3399FF 1px solid;
}
button {
background: #063FE0;
color: #FFFFFF;
padding: 4px;
}
button:active {
background: #001759;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
<button onclick="seyHello();">کلیک کنید</button>
</form>
<script>
function seyHello(){
alert('رنگ پس زمینه دکمه در حالت فعال تغییر می کند');
}
</script>
</body>
</html>توضیح:
- در این نمونه کد با شبه کلاس active برای تگ button استایل سفارشی در نظر گرفته ایم که در هنگام کلیک (با فشردن دکمه ماوس) اجرا می شود.
- دقت داشته باشیم یک عنصر می تواند در عین واحد در چند وضعیت تعاملی قرار داشته باشد که در اینجا با فشردن دکمه ماوس بر روی دکمه دو حالت focus و active اتفاق می افتد و به همین دلیل استایل مربوط به سلکتور form:focus-within نیز برای تگ form اعمال می شود.
گرد کردن گوشه ها و افزودن سایه با border-radius و box-shadow
یکی دیگر از قابلیت های CSS که از نسخه 3 به آن افزوده شده امکان گرد کردن گوشه ها و افزودن سایه به عناصر HTML و از جمله تگ های مربوط به فرم های وب است، در این شیوه با استفاده از خاصیت border-radius می توان لبه های زاویه 90 درجه ای تگ های فرم را به صورت گرد شده و نرم با میزان انحنای دلخواه درآورد، همچنین با خاصیت box-shadow می توانیم رنگ دلخواهی را به عنوان سایه برای حاشیه عناصر فرم درنظر بگیریم که ممکن است با توجه به سلیقه و نیاز مورد استفاده طراحان و برنامه نویسان وب قرار گیرد، با این توضیح نمونه کد را به شکل زیر ویرایش می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از border-radius و box-shadow برای استایل عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
font-size: 12px;
}
form {
padding: 8px;
background: #F9F9F9;
border: #CCC 1px solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow:2px 2px 3px #666;
-moz-box-shadow:2px 2px 3px #666;
-webkit-box-shadow:2px 2px 3px #666;
}
form:focus-within {
background: #F0F0F0;
border: #3399FF 1px solid;
}
label {
display: inline-block;
width: 100px;
height: 50px;
}
.input {
background: #F9F9F9;
padding: 4px;
border: #CCC 1px solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow:2px 2px 3px #666;
-moz-box-shadow:2px 2px 3px #666;
-webkit-box-shadow:2px 2px 3px #666;
outline: 0;
}
.input:hover {
background: #F5F5F5;
border: #92C9FF 1px solid;
}
.input:focus {
background: #F0F0F0;
border: #3399FF 1px solid;
}
button {
background: #063FE0;
color: #FFFFFF;
padding: 4px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow:2px 2px 3px #666;
-moz-box-shadow:2px 2px 3px #666;
-webkit-box-shadow:2px 2px 3px #666;
}
button:active {
background: #001759;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
<button onclick="seyHello();">کلیک کنید</button>
</form>
<script>
function seyHello(){
alert('رنگ پس زمینه دکمه در حالت فعال تغییر می کند');
}
</script>
</body>
</html>توضیح:
- در کدهای بالا برای تعریف خاصیت border-radius و box-shadow از سلکتورهای moz و webkit نیز استفاده کرده ایم، این کار به این جهت است که مرورگرهای مختلف در نسخه های قدیمی در شناسایی و پردازش این خاصیت ها شیوه مخصوص خود را دارند و برای سازگاری بیشتر از پیشوند moz (مرورگرهای خانواده Mozila مانند Firefox) و پیشوند webkit (مرورگرهای خانواده موتور Webkit مانند Chrome) استفاده کرده ایم، با یکسان سازی استانداردها در نسخه های جدیدتر مرورگرها ممکن است استفاده از این پیشوندها دیگر ضرورتی نداشته باشد.
- خاصیت outline که خط بیرونی حاشیه فیلد را مشخص می کند از این جهت با مقادیر صفر در نظر گرفته ایم که در برخی مرورگرهای مبتنی بر موتور Webkit (مانند سافاری، گوگل کروم و...) در هنگام کلیک در فیلد در اطراف سایه ای ایجاد می شود، برای از بین بردن این سایه پیش فرض از outline با مقادیر صفر استفاده کرده ایم.
- اگرچه برخی از مرورگرها (مانند اینترنت اکسپلورر نسخه 8 و ماقبل) از ویژگی های border-radius و box-shadow پشتیبانی نمی کنند اما چندان جای نگرانی نیست، چرا که فرم بدون هیچ مشکل مهمی همچنان کاربرد خواهد داشت با این تفاوت که کاربران این گونه مرورگرها نمی توانند از جلوه های بصری و تعاملی جدید CSS استفاده کنند.
کد و پیش نمایش آنلاین
در انتهای این آموزش مثال هایی که در این مطلب مرور کردیم را به صورت کد تکمیل شده به همراه پیش نمایش آنلاین جهت تست و بررسی بیشتر درج می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظیم استایل CSS سفارشی در طراحی عناصر فرم</title>
<!-- Webgoo.ir -->
<style>
body{
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
font-size: 12px;
}
form {
padding: 8px;
background: #F9F9F9;
border: #CCC 1px solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow:2px 2px 3px #666;
-moz-box-shadow:2px 2px 3px #666;
-webkit-box-shadow:2px 2px 3px #666;
}
form:focus-within {
background: #F0F0F0;
border: #3399FF 1px solid;
}
label {
display: inline-block;
width: 100px;
height: 50px;
}
.input {
background: #F9F9F9;
padding: 4px;
border: #CCC 1px solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow:2px 2px 3px #666;
-moz-box-shadow:2px 2px 3px #666;
-webkit-box-shadow:2px 2px 3px #666;
outline: 0;
}
.input:hover {
background: #F5F5F5;
border: #92C9FF 1px solid;
}
.input:focus {
background: #F0F0F0;
border: #3399FF 1px solid;
}
button {
background: #063FE0;
color: #FFFFFF;
padding: 4px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow:2px 2px 3px #666;
-moz-box-shadow:2px 2px 3px #666;
-webkit-box-shadow:2px 2px 3px #666;
}
button:active {
background: #001759;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">نام:</label>
<input id="name" class="input" type="text">
<br>
<label for="family">نام خانوادگی:</label>
<input id="family" class="input" type="text">
<br>
<button onclick="seyHello();">کلیک کنید</button>
<br><br>
<select class="input">
<option value="">-- انتخاب --</option>
<option value="آموزش طراحی وب">آموزش طراحی وب</option>
<option value="آموزش برنامه نویسی وب">آموزش برنامه نویسی وب</option>
</select>
<br><br>
<textarea cols="50" rows="10" class="input"></textarea>
<br><br>
<input class="input" type="submit" value="ارسال">
</form>
<script>
function seyHello(){
alert('رنگ پس زمینه دکمه در حالت فعال تغییر می کند');
}
</script>
<hr>
برای اینکه جلوه های CSS نسخه 3 مانند border-radius و box-shadow به طور کامل قابل استفاده باشند خاصیت ها باید توسط مرورگر پشتیبانی شوند، به جزء اینترنت اکسپلورر نسخه 8 و ماقبل (که در حال حاضر منسوخ شده اند) سایر مرورگرهای استاندارد وب در نسخه های جدید خود به خوبی از این قابلیت ها پشتیبانی می کنند.
</body>
</html>دسته بندی: مهارتهای وب » طراحی وب
مطالب بیشتر:نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS
طراحی قالب سه بعدی وب با فتوشاپ و CSS
قابلیت های کاربردی CSS3 در طراحی وب
آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
دیدگاه
۲۰ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.۲۲:۰۱ ۱۳۹۲/۰۲/۳۱
دستت طلا
farhad
۱۶:۲۱ ۱۳۹۱/۰۷/۲۳
سلام داداش
انقدر دعات کردم یعنی دمت گرم
با این سایتت محشره
انقدر دعات کردم یعنی دمت گرم
با این سایتت محشره
فریبا
۲۱:۱۸ ۱۳۹۱/۰۵/۲۰
سلام
سوال: می خوام فرمی بسازم که عنوان تکست فیلدها از یک طرف تراز شوند و خود تکست فیلدها هم از طرف دیگر و همچنین کل فرم یعنی المنتهای فرم در وسط divای که برای فرم در نظر گرفتم قرار بگیرند یعنی در هر مرورگری وسط باشند؛ چه کدهایی ( CSS و HTML ) باید بنویسم؟
ممنون.
سوال: می خوام فرمی بسازم که عنوان تکست فیلدها از یک طرف تراز شوند و خود تکست فیلدها هم از طرف دیگر و همچنین کل فرم یعنی المنتهای فرم در وسط divای که برای فرم در نظر گرفتم قرار بگیرند یعنی در هر مرورگری وسط باشند؛ چه کدهایی ( CSS و HTML ) باید بنویسم؟
ممنون.
پاسخ دقیق به سوال شما نیازمند طرح یک مطلب آموزشی جداگانه است، اما به اختصار باید از label در فرم های خود استفاده کنید، مثال:
برای تنظیم یک بلاک در وسط صفحه از ویژگی margin-left و margin-right با مقادیر auto برای کلاس CSS آن استفاده کنید:
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
در مرورگر IE6 نیز از دستورات شرطی و تگ <center> استفاده کنید:
<label for="name" dir="rtl">نام:</label>
<input type="text" name="name" id="name">برای تنظیم یک بلاک در وسط صفحه از ویژگی margin-left و margin-right با مقادیر auto برای کلاس CSS آن استفاده کنید:
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
در مرورگر IE6 نیز از دستورات شرطی و تگ <center> استفاده کنید:
<!--[if IE 6]>
<center>
<![endif]-->
بلاک div
<!--[if IE 6]>
</center>
<![endif]-->فریبا
۱۵:۰۰ ۱۳۹۱/۰۵/۱۹
سلام
مثل همیشه عالی هستید.
سوال: میشه توضیحی هم در مورد دکمه های جستجو ( مثل جستجوی سایت خودتون ) داشته باشید؟
ممنون.
مثل همیشه عالی هستید.
سوال: میشه توضیحی هم در مورد دکمه های جستجو ( مثل جستجوی سایت خودتون ) داشته باشید؟
ممنون.
ممنون، نظر لطف شماست.
دکمه های جستجو ماهیتی متفاوت ندارند و مانند سایر عناصر فرم های وب هستند، دکمه ارسال از نوع input و submit و فیلد جستجو از نوع input و text است، منتها با کلاس های CSS و المان های تصویری، به طور دقیق تنظیم شده اند، با دقت در سورس کد سایت ملاحظه خواهید کرد که برای دکمه ارسال یک عکس ذره بین کوچک به عنوان پس زمینه تنظیم شده و برای فیلد جستجو، تصویری دیگر با همپوشانی کامل با دکمه ارسال؛ به این ترتیب از دید کاربران این یک فیلد جستجو است، ولی از دید برنامه نویسان این یک فرم وب با یک فیلد متنی و یک دکمه ارسال است.
دکمه های جستجو ماهیتی متفاوت ندارند و مانند سایر عناصر فرم های وب هستند، دکمه ارسال از نوع input و submit و فیلد جستجو از نوع input و text است، منتها با کلاس های CSS و المان های تصویری، به طور دقیق تنظیم شده اند، با دقت در سورس کد سایت ملاحظه خواهید کرد که برای دکمه ارسال یک عکس ذره بین کوچک به عنوان پس زمینه تنظیم شده و برای فیلد جستجو، تصویری دیگر با همپوشانی کامل با دکمه ارسال؛ به این ترتیب از دید کاربران این یک فیلد جستجو است، ولی از دید برنامه نویسان این یک فرم وب با یک فیلد متنی و یک دکمه ارسال است.
hosin
۱۰:۴۱ ۱۳۹۱/۰۵/۱۹
سلام من سایت شما رو خیلی دوست دارم عالیه
صفحه 2 از 2 محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.