espad

زیبا سازی فرم

6 پست در این موضوع قرار دارد

سلام

دوستان من یه فرم ورود ساده دارم کسی میتونه کمکم کنه با استفاده از css یکم قشنگش کنم ؟

یا اینکه این فرم های آماده ای که هست رو چطوری می تونم با فرم خودم جایگزین کنم ؟

اینم کد فرم


<form id="form1" action="http://panel.payamakbartar.ir/MyLogin.aspx? ReturnUrl=%2f" method="post"><input id="__EVENTTARGET" type="hidden" name="__EVENTTARGET" value="" />
<input id="__EVENTARGUMENT" type="hidden" name="__EVENTARGUMENT" value="" />
<input id="__VIEWSTATE" type="hidden" name="__VIEWSTATE" value="/wEPDwUJMzc3MDA5NzMzD2QWBAIBD2QWCAIBDxYCHgRocmVmBRlUaG VtZXMvRGVmYXVsdC9BbGVydHMuY3NzZAICDxYCHwAFGlRoZW1lcy9EZWZhdWx 0L0ZhY2Vib3guY3NzZAIDDxYCHwAFGlRoZW1lcy9EZWZhdWx0L0Jsb2NrVUku Y3NzZAIEDxYCHwAFGFRoZW1lcy9EZWZhdWx0L0xvZ2luLmNzc2QCAw9kFhICB Q8WAh4HVmlzaWJsZWhkAgcPFgIfAWhkAgkPFgIfAWhkAgsPFgIfAWhkAg0PFg IfAWhkAg8PDxYCHghJbWFnZVVybAUffi9Mb2dvL2xvZ2luX25ldHBheWFtYWs uY29tLnBuZ2RkAhkPDxYCHgRUZXh0BThDb3B5cmlnaHQgJmNvcHk7IDIwMTIg TmV0UGF5YW1hayBDby4gQWxsIHJpZ2h0cyByZXNlcnZlZGRkAhsPDxYCHwMF/ Rc8c3BhbiBpZD0ibGJsQWJvdXQiPtmG2Kog2b7bjNin2YXaqSDYqNinINmH2K /ZgSDYp9ix2KfYptmHINiu2K/Zhdin2Kog2qnYp9mF2b7ZitmI2KrYsduMINm +2LHYr9in2LLYtCDYr9in2K/ZhyDYjCAg2LfYsdin2K3bjCDZiCDYqtmI2LPY udmHINmI2Kgg2Iwg2KfYt9mE2KfYuSDYsdiz2KfZhtuMINmIINin2YbYqtmC2 KfZhCDZgdmG2KLZiNix24wg2YbZiNuM2YYg2KfYsdiq2KjYp9i32KfYqiDYr9 mK2KrYpyDYqNmHICDaqdi02YjYsdiMINmH2YXYsdin2Ycg2KjYpyDYotmF2Yj Ysti0INqp2KfYr9ixINis2YjYp9mGINiu2YjYryDYqNix2KfbjCDYp9ix2KrZ gtin2KEg2K/Yp9mG2LQg2YHZhtuMINii2YbYp9mGINiv2LEg2LLZhdmK2YbZh yAg2LnZhNmI2YUg2KzYr9mK2K8g2KfYsdiq2KjYp9i32KfYqiDZiCDYrtiv2Y XYqiDYqNmHINi52YXZiNmFINmF2LHYr9mF2Iwg2LTYsdqp2KrZh9inINmIINi z2KfYstmF2KfZhiZzaHk7INmH2Kcg2KrZgNij2LPZitizICDar9ix2K/Zitiv LjxiciAvPg0K2YXYpyDYp9iz2KrZgdin2K/ZhyDYp9iyINqp2KfZhdm +2YrZiNiq2LEg2Ygg2KfZitmG2KrYsdmG2Kog2Ygg2LHYp9it2Komc2h5O9iq 2LEg2LTYr9mGINqp2KfYsSZzaHk72YfYpyDYqtmI2LPYtyDYotmGINix2Kcg2 K3ZgiDYqtmF2KfZhSAg2YXYsdiv2YUg2YXbjCZzaHk72K/Yp9mG2YrZhSDZhd inINiu2YTYp9mC2YrYqiDZiCDZhtmI2KLZiNix24wg2LHYpyDYs9ixINmE2Yj YrdmHJnNoeTvbjCDYqtmE2KfYtCZzaHk72YfYpyDZiCDZgdi52KfZhNmK2Kom c2h5O9mH2KfbjCDYrtmI2K8gINmC2LHYp9ixINiv2KfYr9mHJnNoeTvYp9mK2 YUg2Ygg2KjYsdin2YrZhiDYqNin2YjYsdmK2YUg2qnZhyDYsdmI2LLbjCDZhd uMJnNoeTvYsdiz2K8g2qnZhyDYqNix2KfbjCDYtNmH2LHZiNmG2K8g2qnYp9i x2KLZhdivICDYp9iz2KrZgdin2K/ZhyDYp9iyINqp2KfZhdm +24zZiNiq2LEg2Ygg2KfbjNmG2KrYsdmG2Kog2YfZhdin2YYgJnNoeTvZgtiv 2LEg2LbYsdmI2LHYqiDZhduMINmK2KfYqNivINqp2Ycg2KrZiNin2YbYp9mK2 4wg2K7ZiNin2YbYr9mGINmIICDZhtmI2LTYqtmG2Iwg2YjYqNix2KLZhtmK2Y Ug2KrYpyDYqNinINiq2K3ZgtmK2YIg2Ygg2b7Zitin2K/ZhyZzaHk72LPYp9i y24wg2LHYp9mHINit2YQmc2h5O9mH2KfbjCDYudmF2YTbjCDYqNix2KfbjCDY p9iz2KrZgdin2K/ZhyDYp9iyICDaqdin2YXZvtmK2YjYqtixINmIINin2YrZh tiq2LHZhtiqINiv2LEg2qnYp9ixJnNoeTvZh9in24wg2YXYrtiq2YTZgSDYqN mH2KrYsdmK2YYg2qnZitmB2YrYqiDYsdinINio2Ycg2YXYtNiq2LHZitin2YY g2K7ZiNivICDYp9ix2KfYptmHINmG2YXYp9mK2YrZhSDZiCDYp9mK2YYg2YXZ h9mFINiq2YbZh9inINio2Kcg2KrZiNis2YfYjCDZh9mF2YrYp9ix24zYjCDZh ti42LHYp9iqINmIINm +2YrYtNmG2YfYp9iv2KfYqiDYtNmF2KcgINqp2KfYsdio2LHYp9mGINi52LLZ itiyINmF2YrYs9ix2K7ZiNin2YfYryDYtNivIC48YnIgLz4NCtmF2Kcg2KfYs iDZh9ix2q/ZiNmG2Ycg2YfYstmK2YbZhyDYstin2KbYryDYp9is2KrZhtin2K gg2YXbjCZzaHk72qnZhtmK2YXYjCDZh9mF2obZhtmK2YYg2YXYpyDYudmC2Yr Yr9mHINiv2KfYsdmK2YUg2YXYtNiq2LHbjCAg2YbYqNin2YrYryDYqNmH2Kfb jCDYtti52YEmc2h5O9mH2KfbjCDZhdiv2YrYsdmK2KrbjCDZiCDZitinINin2 LTaqdin2YTYp9iqINin2KzYsdin2YrbjCDaqdin2LEg2YXYpyDYsdinINio2b 7Ysdiv2KfYstivLiDZvtizINmF2KcgINm +2YrYtCDYp9iyINix2KfZhyZzaHk72KfZhtiv2KfYstuMINmH2LEg2LPYsdmI 2YrYsyDYrNiv2YrYr9iMINio2Ycg2K/ZgtiqINii2YYg2LHYpyDZhdmI2LHYr yDZhdi32KfZhNi52Ycg2YLYsdin2LEg2K/Yp9iv2Ycg2YggINmC2KfYqNmE2Y rYqiDYp9is2LHYp9mK24wg2KLZhiDYsdinINio2LHYsdiz24wg2YXbjCDaqdm G2YrZhS4g2YfZhdqG2YbZitmGINmF2Kcg2KjYsdin2YrZhiDYudmC2YrYr9mH INmH2LPYqtmK2YUg2qnZhyDYqNmHINiv2LPYqiAg2KLZiNix2K/ZhiDYs9mI2 K8g2qnZhdiq2LEg2KfYsiDZitqpINmF2LTYqtix24wg2K/YsSDYtdmI2LHYqt mK2qnZhyDYqNmHINmG2K3ZiNuMINin2YbYrNin2YUg2q/Ysdiv2K8g2qnZhyD Zhdi02KrYsduMINin2LIgINiu2K/Zhdin2Kog2KfYsdin2KbZhyDYtNiv2Ycg 2LHYttin2YrYqiDYr9in2LTYqtmHINio2KfYtNiv2Iwg2KLZhiDZhdi02KrYs duMINix2Kcg2KjZhyDZitqpINmC2YjZhyDYqtio2YTZiti624wg2K7ZiNiv2L PYp9iu2KrZhyAg2YXYqNiv2YQg2qnZhtiv2Iwg2Ygg2KfZitmGINin2YHYsti n2YrYtCDYs9mI2K8g2YXYpyDYsdinINio2Ycg2LnZhtmI2KfZhiDYp9ix2KfY ptmHINiv2YfZhtiv2Ycg2K7Yr9mF2KfYqiDYr9ixINio2LHYrtmI2KfZh9ivI CDYr9in2LTYqi4g2KfZitmGINin2LXZiNmEINiz2KfYr9mHINiMINiv2LEg2L nZhdmEINmC2KfYqNmEINio2qnYp9ix2q/Zitix24wg2YfYs9iq2YbYryDZiCD Zvtin2YrZhyDYqtmF2KfZhduMINmB2LnYp9mE2YrYqiZzaHk72YfYp9uMICDZ hdinINix2Kcg2KrYtNqp2YrZhCDZhduMJnNoeTvYr9mH2YbYry48YnIgLz4NC tmF2Kcg2KjYpyDYrdiz2YYg2YbZitiqINqp2KfZhdmEINin2LXZiNmEINiz2K fYr9mHINi02q/ZgdiqJnNoeTvYp9mG2q/ZitiyINqp2KfYsdmF2KfZhiDYsdi nINmF2YbYqti02LEg2YXbjCZzaHk72qnZhtmK2YUg2obZiNmGICDYudmC2YrY r9mHINiv2KfYsdmK2YUg2qnZhyDYr9ixINmK2qkg2YHYttin24wg2LHZgtin2 KjYqtuMINiz2KfZhNmF2Iwg2KzYp9uMINqp2KfZgduMINio2LHYp9uMINmF2K cg2Ygg2KrZhdin2YUg2YfZhdqp2KfYsdin2YYgINiv2Yrar9ix2YXYp9mGINm I2KzZiNivINiu2YjYp9mH2K8g2K/Yp9i02KrYjCDZiCDYp9mK2YYg2YHYttin INiv2LEg2YbZh9in2YrYqiDZh9mFINio2Ycg2YbZgdi5INmF2Kcg2IzZh9mFI Nio2Ycg2YbZgdi5INmF2LHYr9mFICDYqNmHINi52YbZiNin2YYg2YXYtNiq2L HZitin2YYg2KLZitmG2K/ZhyDZhdinINmIINmH2YXaqdin2LHYp9mGINmF2Kc g2K7ZiNin2YfYryDYqNmI2K8gLjwvc3Bhbj5kZAIdDw8WAh8DBY0B2KrZhNmB 2YY6IDY2OTY4Mzk4LTY2NDgzODY0IDxiciAvPg0K2KfbjNmF24zZhDogY29ud GFjdEBuZXRwYXlhbWFrLmNvbTxiciAvPg0K2K/Zgdiq2LEg2YXYsdqp2LLbjD og2KrZh9ix2KfZhi3YrtuM2KfYqNin2YYg2YHZhNiz2LfbjNmGPGJyIC8+ZGQ YAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCGJ0bkxvZ2lu uzdLsodXh5TJktqjcjPZ9RnP8tQ=" />
<script type="text/javascript">// <![CDATA[
var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } }
// ]]></script>
نام کاربری:<input id="txtUID" class="text" type="text" name="txtUID" /> رمز عبور: <input id="txtPwd" class="text" type="password" name="txtPwd" /> <a id="btnLogin" tabindex="3" href="javascript:__doPostBack('btnLogin','')">ورود به پنل </a></form> 
 
 

به اشتراک گذاری این پست


لینک به پست

سلام

به انجمن خوش اومدین دوست عزیز

یا اینکه این فرم های آماده ای که هست رو چطوری می تونم با فرم خودم جایگزین کنم ؟

یک نمونه آدرس بدید تا بهتون توضیح بدیم

به اشتراک گذاری این پست


لینک به پست

کل فایل شما 30 کیلوبایت بود که بیخود اون رو 2.5 مگ کردن!

پیوست رو بررسی کنید.

اگر دکمه ورود مشکل داشت باید دوباره بصورت لینک قرار بدید.

CSS_LOGIN.rar

به اشتراک گذاری این پست


لینک به پست

آقا مرتضی متشکرم از زحمتی که کشیدی ولی من نتونستم از فایل ها استفاده کنم.

چطوری می تونم لینک "ورود به پنل " رو در کد زیر تبدیل به دکمه بکنم ؟

اینم کد


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>فرم ورود</title>
</head>
<body>
<form id="form1" method="post" action="http://panel.payamakbartar.ir/MyLogin.aspx?ReturnUrl=%2f"
style="direction: rtl; font-family: Tahoma; font-size: 14px">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzc3MDA5NzMzD2QWBAIBD2QWCAIBDxYCHgRocmVmBRlUaGVtZXMvRGVmYXVsdC9BbGVydHMuY3NzZAICDxYCHwAFGlRoZW1lcy9EZWZhdWx0L0ZhY2Vib3guY3NzZAIDDxYCHwAFGlRoZW1lcy9EZWZhdWx0L0Jsb2NrVUkuY3NzZAIEDxYCHwAFGFRoZW1lcy9EZWZhdWx0L0xvZ2luLmNzc2QCAw9kFhQCAQ8WAh4HVmlzaWJsZWhkAgMPFgIfAWhkAgUPFgIfAWhkAgcPFgIfAWhkAgkPFgIfAWhkAgsPFgIfAWhkAg0PFgIfAWhkAg8PDxYCHghJbWFnZVVybAUHfi9Mb2dvL2RkAhcPFgIfAWhkAhkPDxYCHgRUZXh0BQY8YnIgLz5kZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAQUIYnRuTG9naW4jkujA5P2WMKHMYBGgIQSXr6Sr1A==" />
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<table dir="rtl">
<tr>
<td>
نام کاربری :
</td>
<td>
<input type="text" id="txtUID" name="txtUID" />
</td>
</tr>
<tr>
<td>
گذرواژه :
</td>
<td>
<input type="password" id="txtPwd" name="txtPwd" />
</td>
</tr>
</table>
<br />
<a id="btnLogin" tabindex="3" href="javascript:__doPostBack('btnLogin','')">ورود به
پنل </a>
</form>
</body>
</html>

مرسی

به اشتراک گذاری این پست


لینک به پست

برای مثال :

<a href="javascript:__doPostBack('btnLogin','')" class="buttdl1">ورود به پنل</a>

و این کدهارو هم به style.css اضافه کنید :

.buttdl1{
background-color:#FF3300;
background-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image:-ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image:-o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
display:inline-block;
vertical-align:middle;
color:#f6f6f6 !important;
font-size:11px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
font-weight: lighter;
padding: 8px 12px 8px 11px;
text-align:center;
text-decoration:none;
text-shadow:0px 1px 0px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
float: left;
}
.buttdl1:hover{
background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
background-image:-moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
background-image:-ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
background-image:-o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
background-image:linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
}

.buttdl1:active{
position:relative;
top:2px;
-webkit-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
}

ویرایش شده در توسط MooCHooL

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط devil1367
      با سلام
      من یک فروشگاه دارم چون قالب قبلیم نیازهامو نمیتونست برطرف کنه یه قالب جدید از یکی از سایتها خریداری کردم
      سوالم اینه با نصب بسته اسان نصب اطلاعاتی یا محصولات قبلی که داشتم حذف میشن ؟
      چطوری قالب رو شبیه دمو دربیارم و صفحات و برگه ها import کنم.
       
      با تشکر
    • توسط webdesign
      فرم های کوتاه
      سعی کنید اطلاعاتی را از کاربر بخواهید که واقعاً مورد نیاز است و از قرار دادن فیلدهای اضافی در فرم ها خودداری نمایید. معمولاً کاربران تمایلی به پر کردن فرم هایی که اطلاعات خیلی شخصی میخواهند، ندارند. چنانچه نیاز به اطلاعات بیشتری راجع به کاربر دارید بعد از ثبت فرم میتوانید از طریق ایمیل آن اطلاعات را درخواست کنید. پس از دریافت اطلاعات اضافه و غیر ضروری خودداری کنید و سعی کنید فیلدهای مشابه در فرم قرار ندهید برای مثال چند فیلد شماره تلفن
      در نهایت
       بعد از پر کردن فرم و ثبت آن توسط کاربر از کاربر تشکر کرده و فیدبک بدهید. ایجاد یک فرم استاندارد و کاربرپسند شانس شما را برای جمع آوری اطلاعات و تبدیل یک بازدید کننده به کاربر دائمی وب سایت را افزایش میدهد.
       
      استفاده از فرم های عمودی
      فرم های عمودی نسبت به فرم های افقی و چند ستونه، کاربرپسندتر هستند به خصوص در فرم های طولانی. بهترین حالت این است که تمامی فیلدها در یک صفحه از بالا تا پایین قرار بگیرند بدون اینکه کاربر نیاز به اسکرول کردن برای دیدن ادامه فرم داشته باشد.
       فرم های افقی تنها در صورتی که فرم خیلی کوتاه باشد مثلا فقط نیاز به وارد کردن ایمیل و رمز عبور باشد میتوانند به کار برده شوند. در غیر این صورت کلا بهتر است فرم را به صورت عمودی طراحی نمایید.
       همچنین فیلدهای فرم باید یک ترتیب منطقی داشته باشند مثلاً بعد از نام همیشه نام خانوادگی را قرار میدهیم و بعد فیلدهای دیگر. برای مثال ترتیب نام، ایمیل، نام خانوادگی یک ترتیب غیرمنطقی میباشد.
      سهولت در خواندن و اسکن کردن فرم
      همانطور که میدانید کاربران در وب سایت ها معمولاً مطالب را اسکن میکنند یعنی نگاه اجمالی به همه مطالب می اندازند تا مطلب مورد نظر خود را پیدا کنند یا تصمیم بگیرند که چه عملیاتی را در سایت انجام خواهند داد. همین مسئله برای فرم ها هم صدق میکند. کاربر با دیدن فرم باید به سرعت متوجه شود که آن فرم چه کاربردی دارد و چه اطلاعاتی میخواهد.
      ویژگی های مورد نیاز برای اینگونه فرم ها عبارتند از:
      • تضاد یا کنتراست: متن ها فرم باید کوتاه و به راحتی قابل خواندن باشند. هرگز از رنگ های مختلف در فرم استفاده نکنید و سعی کنید همان حالت استاندارد و رایج نوشته تیره بر روی زمینه روشن را به کار ببرید.
      • گروه بندی و فاصله گذاری: اطلاعات مشابه را در فرم های طولانی گروه بندی کنید. برای مثال در زمان جمع آوری اطلاعات پرداخت: اطلاعات مربوط به حمل و نقل، آدرس،  کد پستی و ... در یک گروه قرار دهید. فاصله بین برچسب ها و فیلدهای مربوط به آن ها را با دقت قرار دهید تا کاربر به راحتی متوجه شود که کدام برچسب و عنوان متعلق به کدام فیلد میباشد.
      • پایان مشخص: دکمه ثبت یا پایان را به طور مشخص و بزرگ قرار دهید. متن داخل دکمه باید دقیقاً به کاربر بگوید که با فشار دادن آن چه اتفاقی خواهد افتاد مانند کلمه  های ثبت، پرداخت یا مرحله بعد. در صورت انجام عملیات ثبت، حتماً کاربر را از تمام شدن عملیات و ثبت شدن کامل فرم مطلع نمایید.
      قرار دادن برچسب های شناور

        همیشه در مورد اینکه آیا باید از متن های راهنما و کمکی در فیلدهای یک فرم استفاده کرد یا نه بحث های زیادی بوده است. مشکل اصلی استفاده از این متن ها زمانی است که با کلیک کردن بر روی فیلد مورد نظر، متن راهنما همچنان درون فیلد باقی میماند و کاربر برای وارد کردن اطلاعات مجبور به پاک کردن آن میشود.
       اگر نیاز به استفاده از متن و برچسب های راهنما دارید سعی کنید آن ها را به صورت تعاملی و واکنش گرا قرار دهید یعنی با کلیک کردن کاربر برچسب جا بجا شده و به سمت بالا برود. به اینگونه برچسب ها برچسب شناور میگویند. همچنین این حالت حرکت برچسب باعث جلب توجه کاربر و جذابیت هم میشود.
      فرمت گذاری یا ماسک فیلد
      گذاشتن فرمت یا ماسک برای فیلد به این معنی است که در زمان تایپ و وارد کردن اطلاعات توسط کاربر در یک فیلد، آن فیلد به طور خودکار به اطلاعات ورودی کاربر یک فرمت خاص میدهد. برای مثال جدا کردن روز و ماه و سال یا جدا کردن کد منطقه در شماره تلفن و ... به طور خودکار. این کار از بروز خطاهای احتمالی در زمان تایپ جلوگیری کرده و ورود اطلاعات را برای کاربر آسان تر می نماید.
      به مثال زیر توجه نمایید، یک شماره تلفن در فرمت های مختلف:
      • (000) 000-0000
      • 000-000-0000
      •  0000000000
      کاربر میتواند شماره تلفن را به هر 3 مدل بالا وارد کند، چطور باید تشخیص دهد که فرمت درست و مدنظر شما کدام است؟ اینجاست که ماسک فیلد یا همان فرمت گذاری به کمکتان می آید. با استفاده از این ویژگی خود فیلد به طور خودکار کاربر را راهنمایی میکند و کاربر بدون فکر کردن تنها نیاز دارد که شماره را وارد کند. (این کار همچنین باعث راحتی کاربران موبایل میشود چون دیگر نیازی به سوئیچ کردن بین اعداد و نوشته در کیبورد ندارند).
      ایجاد فرم های سازگار با کیبورد
      از آنجایی که نمی دانید کاربر با استفاده از چه دستگاهی اقدام به پر کردن فرم می نماید باید طراحی فرم به گونه ای باشد که چه در موبایل و چه در کامپیوترهای خانگی به راحتی قابل پر کردن باشد. پس با در نظر گرفتن کیبوردهای موجود در دستگاه های مختلف، فیلد های فرم را متناسب با آن ها طراحی نمایید.
      در دسکتاپ، کاربر باید بتواند بدون نیاز به کلیک کردن بر روی هر فیلد، فیلد ها را به ترتیب پر کرده و به طور اتوماتیک با پر کردن فیلد یا فشار دادن دکمه های tabb یا enter ، جلو برود. سایت w3.org مجموعه کاملی از کیبوردها را ارائه کرده است.
      در موبایل، نوع کیبورد را با نوع داده ای که مورد نیاز است هماهنگ تنظیم نمایید. اگر داده ورودی از نوع حروف میباشد، از کیبورد آلفا و برای اعداد از کیبورد  numeric استفاده کنید.
      حالت تشخیص اتوماتیک
      سعی کنید فیلدها را طوری طراحی کنید که در صورت برخورد با کاراکترهای خاص و کلمات مشخص، به کاربر پیشنهاداتی را برای پر کردن فیلد ارائه کنند. درست مانند سیستم جستجوی گوگل که به محض تایپ کردن یک کلمه تعداد زیادی پیشنهاد به کاربر ارائه میکند. مثلاً در فیلد ایمیل به محض تایپ شدن عبارت web@g... ، گزینه web@gmail.com به کاربر ارائه شود.
      مزایای این کار:
      • پر کردن فرم برای کاربر راحتتر میشود به خصوص در موبایل
       • از اشتباهات تایپی کاربر جلوگیری میشود.
      منبع : 7 نکته کاربردی در طراحی فرم های استاندارد
    • توسط armakcell
      با سلام بنده در سایتم میخواستم یک ابزارک قرار بدم مانند ابزارک این سایت
      http://powerturk.ir

      اگر داخل این سایت برید در یک قسمت نوشته است آرشیو فول البوم
      بنده این ابزارک را چگونه به دست بیارم؟
      بنده یک تصویر ضمیمه میکنم در صورتی که در سایت وارد نشد

    • توسط amir_hossein
      سلام دوستان من قصد دارم چندتا اسلاید کناره هم به صورت خطی (مثلا 4 تا اسلاید) اواسط صفحه اصلی یا انتهای صفحه قرار بدم.افزونه ای میتونید بهم معرفی کنید برای اینکار؟
    • توسط amir_hossein
      سلام دوستان من قصد دارم چندتا اسلاید کناره هم به صورت خطی (مثلا 4 تا اسلاید) اواسط صفحه اصلی یا انتهای صفحه قرار بدم.افزونه ای میتونید بهم معرفی کنید برای اینکار؟