رفتن به مطلب
قوانین ایجاد موضوع جدید در انجمن

زیبا سازی فرم

espad

توسط espad،
در برنامه نویسی استاتیک

دنبال‌کننده 0

پست های پیشنهاد شده

espad

espad 21

ارسال شده در
ارسال شده در

سلام

دوستان من یه فرم ورود ساده دارم کسی میتونه کمکم کنه با استفاده از 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> 
 
 

لینک به ارسال
Morteza

Morteza 34190

ارسال شده در
ارسال شده در

سلام

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

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

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

  • امتیاز 2
لینک به ارسال
espad

espad 21

ارسال شده در
  • مالک
ارسال شده در

سلام مرتضی جان

ممنونم

اینم یه نمونه http://dl.persianscript.ir/script/CSS_LOGIN%28PersianScript.ir%29.rar

مرسی

  • امتیاز 1
لینک به ارسال
Morteza

Morteza 34190

ارسال شده در
ارسال شده در

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

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

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

CSS_LOGIN.rar

  • امتیاز 1
لینک به ارسال
  • 2 هفته بعد...
espad

espad 21

ارسال شده در
  • مالک
ارسال شده در

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

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

اینم کد 


<!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>

مرسی

لینک به ارسال
Mesmaili

Mesmaili 301

ارسال شده در
ارسال شده در (ویرایش شده)

برای مثال :

<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
  • امتیاز 3
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

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

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
دنبال‌کننده 0
برو به فهرست موضوع ها
×
×
  • اضافه کردن...