آموزش برنامه نویسی و مهارتهای وب
یکشنبه ۰۳ مرداد ۱۴۰۰
Sunday, July 25, 2021 GMT +4:30
Sunday, July 25, 2021 GMT +4: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
» طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
» طراحی قالب سه بعدی وب با فتوشاپ و CSS
نظرات (۲۰ یادداشت برای این مطلب ارسال شده است)
یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.نویسنده: hosin
۱۰:۴۱ ۱۳۹۱/۰۵/۱۹
سلام من سایت شما رو خیلی دوست دارم عالیه
نویسنده: فریبا
۱۵:۰۰ ۱۳۹۱/۰۵/۱۹
سلام
مثل همیشه عالی هستید.
سوال: میشه توضیحی هم در مورد دکمه های جستجو ( مثل جستجوی سایت خودتون ) داشته باشید؟
ممنون.
مثل همیشه عالی هستید.
سوال: میشه توضیحی هم در مورد دکمه های جستجو ( مثل جستجوی سایت خودتون ) داشته باشید؟
ممنون.
ممنون، نظر لطف شماست.
دکمه های جستجو ماهیتی متفاوت ندارند و مانند سایر عناصر فرم های وب هستند، دکمه ارسال از نوع input و submit و فیلد جستجو از نوع input و text است، منتها با کلاس های CSS و المان های تصویری، به طور دقیق تنظیم شده اند، با دقت در سورس کد سایت ملاحظه خواهید کرد که برای دکمه ارسال یک عکس ذره بین کوچک به عنوان پس زمینه تنظیم شده و برای فیلد جستجو، تصویری دیگر با همپوشانی کامل با دکمه ارسال؛ به این ترتیب از دید کاربران این یک فیلد جستجو است، ولی از دید برنامه نویسان این یک فرم وب با یک فیلد متنی و یک دکمه ارسال است.
دکمه های جستجو ماهیتی متفاوت ندارند و مانند سایر عناصر فرم های وب هستند، دکمه ارسال از نوع input و submit و فیلد جستجو از نوع input و text است، منتها با کلاس های CSS و المان های تصویری، به طور دقیق تنظیم شده اند، با دقت در سورس کد سایت ملاحظه خواهید کرد که برای دکمه ارسال یک عکس ذره بین کوچک به عنوان پس زمینه تنظیم شده و برای فیلد جستجو، تصویری دیگر با همپوشانی کامل با دکمه ارسال؛ به این ترتیب از دید کاربران این یک فیلد جستجو است، ولی از دید برنامه نویسان این یک فرم وب با یک فیلد متنی و یک دکمه ارسال است.
نویسنده: فریبا
۲۱:۱۸ ۱۳۹۱/۰۵/۲۰
سلام
سوال: می خوام فرمی بسازم که عنوان تکست فیلدها از یک طرف تراز شوند و خود تکست فیلدها هم از طرف دیگر و همچنین کل فرم یعنی المنتهای فرم در وسط 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]-->نویسنده: farhad
۱۶:۲۱ ۱۳۹۱/۰۷/۲۳
سلام داداش
انقدر دعات کردم یعنی دمت گرم
با این سایتت محشره
انقدر دعات کردم یعنی دمت گرم
با این سایتت محشره
نویسنده: امیر محمد
۲۲:۰۱ ۱۳۹۲/۰۲/۳۱
دستت طلا
نویسنده: حمیدرضا
۰۰:۰۹ ۱۳۹۲/۰۳/۱۴
سلام
عادت به نوشتن نظر ندارم
اما برای این مطلب خوب و کارآمدتون لازم بود تشکر کنم
با تشکر فراوان
عادت به نوشتن نظر ندارم
اما برای این مطلب خوب و کارآمدتون لازم بود تشکر کنم
با تشکر فراوان
نویسنده: حسن دهقانی
۱۲:۲۷ ۱۳۹۲/۰۴/۰۶
سلام
من امروز از سایت شما دیدن کردم
واقعا جای تشکر داره من دست شما استار گرامی را که بدون هیچ توقعی آموزش رایگان در اختیار همه قرار می دهید می بوسم
من که خیلی حال کردم و چیزائی که تا حالا دیده بودم اینجا لمسش کردم
من فعلا سوالی ندارم حتما مزاحمتون می شم
با تشکر
من امروز از سایت شما دیدن کردم
واقعا جای تشکر داره من دست شما استار گرامی را که بدون هیچ توقعی آموزش رایگان در اختیار همه قرار می دهید می بوسم
من که خیلی حال کردم و چیزائی که تا حالا دیده بودم اینجا لمسش کردم
من فعلا سوالی ندارم حتما مزاحمتون می شم
با تشکر
نظر لطف شما است.
نویسنده: علی شفیع زاده
۱۸:۵۱ ۱۳۹۲/۰۴/۱۴
با سلام
عالی بود
خیلی استفاده کردم.
تشکر از سایت خوب و پر محتواتون
با آرزوی بهترین ها
عالی بود
خیلی استفاده کردم.
تشکر از سایت خوب و پر محتواتون
با آرزوی بهترین ها
نویسنده: گرافيك پلاس
۰۹:۳۶ ۱۳۹۲/۰۵/۲۷
خيلي عالي بود. فقط يه سوال دارم. در خصوص اعمال hover به يك فيلد چطور ميشه يك افكت slow motion به اون داد. مثلا وقتي كه موس را روي يك فيلد مي بريم رنگ آن يك دفعه تغيير نكنه و به آرامي رنگ آن تغيير كنه. نمونش رو تو سايت دي بي اس تم در قسمت خريد قالب مي شه ديد.
ممنون
ممنون
اعمال افکت به صورت انیمیشن در وب از طریق جاوا اسکریپت و یا کتابخانه جی کئوری صورت می گیرد، به طور مثال با متد setTimeout می توان یک عملیات را در چند فریم و با وقفه های کوتاه انجام داد:
<script>
function changeColor(id, frame){
var color = '#CCC';
switch(frame){
case 1:
color = "#FFECEC";
break;
case 2:
color = "#FDD";
break;
case 3:
color = "#FFC6C6";
break;
case 4:
color = "#FFB3B3";
break;
case 5:
color = "#FF9F9F";
break;
case 6:
color = "#FF9393";
break;
case 7:
color = "#FF8282";
break;
case 8:
color = "#FF6F6F";
break;
case 9:
color = "#F55";
break;
case 10:
color = "#FF2F2F";
break;
}
if(frame <= 10){
frame++;
document.getElementById(id).style.backgroundColor = color;
setTimeout("changeColor('" + id + "', " + frame + ");", 100);
}
else if(frame == 12){
document.getElementById(id).style.backgroundColor = color;
}
}
</script>
<input id="your-id" type="text" onmouseover="changeColor(this.id, 0);" onmouseout="changeColor(this.id, 12);">نویسنده: محمود
۲۳:۰۰ ۱۳۹۲/۰۶/۲۲
سلام خسته نباشید
من میخواهم به وسیله ی css کلمه ی ورود را از فرم زیر حذف کنم. به صورتی که بکگراندی که برایش در نظر گرفته ام حذف نشود. با تشکر
من میخواهم به وسیله ی css کلمه ی ورود را از فرم زیر حذف کنم. به صورتی که بکگراندی که برایش در نظر گرفته ام حذف نشود. با تشکر
<button class="car" type="submit">
ورود
</button>می توانید از نمونه کد زیر استفاده کنید:
<style>
.hidden{
height:25px;
width:100px;
text-indent:-9999px;
* html button{
font-size:0;
display:block;
line-height:0
}/* ie6 */
*+html button{
font-size:0;
display:block;
line-height:0
}/* ie7 */
}
</style>
<button class="hidden" type="submit">ورود</button>نویسنده: محمود
۰۰:۵۷ ۱۳۹۲/۰۶/۲۳
یی سوال هم داشتم. البته به این بحث مربوط نیست در سایت هم جستجو کردم به نتیجه نرسیدم.
می خواستم ببینم itemprop چی هست به چه دردی می خورد و چطوری میشه تگی که کلاس ندارد و itemprop را دارد با css بهش استایل داد. مثل کد زیر:
می خواستم ببینم itemprop چی هست به چه دردی می خورد و چطوری میشه تگی که کلاس ندارد و itemprop را دارد با css بهش استایل داد. مثل کد زیر:
<div itemprop="description"></div>itemprop یا Item Property به معنی توصیفی برای تعیین هدف از به کاربردن تگ ها در HTML است (در نسخه 5 افزوده شده)، این ویژگی خواص محتوای هر تگ را مشخص تر می کند.
به نظر نمی رسد از طریق این ویژگی بتوانید با CSS استایلی به تگ اختصاص دهید، چون Selector بدین منظور در CSS پیش بینی نشده است (باید از کلاس یا آی دی استفاده کنید).
به نظر نمی رسد از طریق این ویژگی بتوانید با CSS استایلی به تگ اختصاص دهید، چون Selector بدین منظور در CSS پیش بینی نشده است (باید از کلاس یا آی دی استفاده کنید).
نویسنده: امیر نجارپور
۱۱:۳۸ ۱۳۹۲/۰۸/۲۷
عالی بود استاد!!
دنبال چنین مطلبی بودم.
بازم ممنون از آموزشی که دادین.
دنبال چنین مطلبی بودم.
بازم ممنون از آموزشی که دادین.
نویسنده: امین
۱۶:۲۲ ۱۳۹۳/۰۴/۲۴
واقعا زدی وسط خال
همون چیزی که دنبالش بودم
خیلی عالی بود
واقعا ممنونتم
همون چیزی که دنبالش بودم
خیلی عالی بود
واقعا ممنونتم
نویسنده: محمد
۱۳:۱۰ ۱۳۹۳/۰۹/۲۲
فقط یه چیز میگم که عالیییی بود.... من اصلا نمیدونستم با سی اس اس هم میشه کاری کرد دکمه ها رنگ هاشون عوض شه...... خیلی عالییی.. فقط با سی اس اس میشه کاری کرد که مثلا موس روی دکمه ای میره و اون دکمه مثل به انیمیشن خیلی کوتاه جاش عوض شه؟
چنین امکانی با CSS3 میسر است (باید در وب جستجو کنید)، منتها برای راحتی و سازگاری بیشتر می توانید از jQuery استفاده کنید.
نویسنده: محمد
۱۴:۱۱ ۱۳۹۳/۱۰/۳۰
سلام.... شما راهی واسه افزایش سلیقه در طراحی قالب دارین؟؟؟ گفتم شاید تو وب زیاد کار میکنین یه راهی باشه.
منظورتان از افزایش سلیقه مشخص نیست! در مجموع شناخت هارمونی رنگ ها و داشتن اطلاعات و تجربه در زمینه گرافیک + دیدن و بررسی قالب های مختلف با رنگ بندی و اهداف متفاوت می تواند کمک کند.
صفحه 1 از 2 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
آی تیدر:
ممنون آینده کاری پی اچ پی خوبه یا جاواسکریپت؟۱۴۰۰/۰۴/۳۰
رضادر:
با عرض سلام و خسته نباشید ایا امکان این قضیه در outlook وجود دارد که ما ادرس فرستنده را از طریق آن بتوانیم پیدا...۱۴۰۰/۰۴/۳۰
محموددر:
سلام مهندس چگونه می شود میزان حرکت اسکرول را تعیین کرد. یعنی با یه حرکت غلطک موس صفحه بعدی در کادر قرار بگیرد....۱۴۰۰/۰۴/۳۰
محموددر:
سلام چگونه حاشیه های ناتمام ایجاد کنیم. یعنی تمام دور کادر کامل نباشد و بردر دور کادر ناقص باشد. مثلن بردر سمت راست تا...۱۴۰۰/۰۴/۲۷
محمددر:
سلام ببخشید من با curl میخواستم فایلی رو با api بفرستم ولی جواب نداد اگر امکانش هست تصحیحش کنید: ۱۴۰۰/۰۴/۲۷
برنامه نویسدر:
سلام و عرض ادب خدمت استاد. یه سوال خدمت شما داشتم. چطور می تونیم از ادیتور مثل ckeditor یا tinymsc به جای textarea...۱۴۰۰/۰۴/۲۷
جواددر:
با سلام من دانشی از برنامه نویسی ندارم ، میشه برنامه ای نوشت که آدرس یک صفحه بعد از لاگین شدن بهش داد و هر...۱۴۰۰/۰۴/۲۱
علیدر:
سلام خوبین؟ من میخوام برای وبلاگم سبد خرید بزنم ولی php و ........ بلد نیستم اگه برام درست کنین ممنونتون میشم۱۴۰۰/۰۴/۱۹
سینا الفدر:
باسلام! من از این آموزش سایت‌تون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت وبگو بابت مطالب مفید و کاربری اش، سوالی درباره...۱۴۰۰/۰۴/۱۸
محموددر:
سلام و تشکر از کمک های قبلی تان. در بخش بالا قسمت «تغییر رنگ پس زمینه با کلیک کاربرم» را خوندم . ولی کد...۱۴۰۰/۰۴/۱۸
محموددر:
با سلام دوباره نمونه کدی که برای افکت پس زمینه چراغ پلیس و صدا قرار دادین خیلی خوب کار میکند و بسیار سپاس ....۱۴۰۰/۰۴/۱۴
احمددر:
سلام خسته نباشید من یه کد نوشتم که قیمت کالا ها و نام کالا ها رو از یه صفحه برام استخراج کنه و بصورت جدول...۱۴۰۰/۰۴/۱۴
محموددر:
سلام و عرض ادب چگونه می شود با کلیک روی یک متن ، کل پس زمینه در یک آن چشمک بزند یعنی رنگ...۱۴۰۰/۰۴/۱۱
مجیددر:
سلام. من برنامه ای دارم که بر اساس php و mysql کار میکنه. بهش 100 جمله میدم و جملات رو تصادفی نمایش میده. حالا میخام...۱۴۰۰/۰۴/۱۰
Amirدر:
سلام ببخشید یک کانال تلگرامی است که سیگنال میده و شرطی اینکه در آلپاری و لایت فارسی حساب داشته باشی و تحت ای پی آنها...۱۴۰۰/۰۴/۱۰
مجیددر:
خیر ببینی جوون - این اسکرول افقی کلی اعصاب رو بهم ریخته بود .۱۴۰۰/۰۴/۰۷
جین میندر:
با سلام و وقت بخیر من تمام مراحل رو به نظر خودم درست انجام دادم و فایل هم دانلود میشه اما مشکل اصلی اونجاست...۱۴۰۰/۰۴/۰۶
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.
محتوا در «وبگو» به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.