ساخت فرم لاگین با html

هدایت عباسی آموزش HTML

ساخت فرم لاگین با html و css . این کد تست شده است می توانید از آن در پروژه های خود استفاده کنید. در این مثال یک فرم لاگین را ایجاد کرده ایم و با css آن را زیبا کرده ایم. این آموزش متعبق به تاپ سایت 98 میباشد.

ساخت فرم لاگین با html, css

در این بخش از آموزش html به سراغ ساخت فرم لاگین با html, css می رویم.

کد کامل ساخت فرم لاگین را در قسمت پایین قرار داده ایم. اگر نیاز به توضیحات ندارید می توانید آن را در یک فایل html ذخیره کرده و اجرا کنید.

کد html ساخت فرم لاگین :

کد html ساخت فرم لاگین شامل یک تگ فرم (تگ form) میباشد.

در این فرم دو مقدار را از کاربر دریافت می کنیم یکی یوزرنیم و دیگر رمز عبور یا پسورد.

ورودی یوزرنیم یک input از نوع text میباشد. تگ input دارای ویژگی های مختلفی می باشد در type می توانیم انواع ورودی ها را مشخص کنیم.

ورودی یوزرنیم یک input از نوع password میباشد. در نوع password بجای اینکه متن یا عدد نمایش داده شود دایره توپر نمایش داده می شود.

دلیل آن برای امنیت رمز عبور میباشد.

کد css ساخت فرم لاگین :

هدف از کد css ساخت فرم لاگین (login) این است که فرم را زیباتر کنیم.

مثلا اندازه تمام ورودی ها و دکمه یکی است یعنی همه ، هم اندازه است و این کار فرم را زیباتر می کند.

برای زمانی که کاربر روی یک ورودی کلیک می کند و می خواهد چیزی را وارد کند نیز استایل نوشته ایم.

برای این کار از ویژگی focus استفاده کرده ایم.

وقتی کاربر وارد یک input می شود رنگ پس زمینه زردرنگ می شود و کادر دور آن نیز تغییر می کند.

شما می توانید این رنگ ها را تغییر دهید هدف ما بیشتر یادگیری می باشد و توجه زیادی به رنگ ها نکرده ایم.

کد کامل ساخت فرم لاگین با html:

کد کامل ساخت فرم لاگین html ,css را می توانید در قسمت زیر ببینید.

این کد را می توانید در یک فایل با پسوند html ذخیره کنید و سپس تست کنید.

<!DOCTYPE html>
<html>
<head>
<style>
*{box-sizing: border-box;}
.container {width: 800px;}
input{
width: 100%;
padding: 10px 15px;
margin: 0 0 15px 0;
}
button{
width: 100%;
background-color: blueviolet;
color: #fff;
font-weight: bold;
padding: 10px;
}
input:focus {
background-color: yellow;
border: 2px solid cornflowerblue;
}
</style>
</head>
<body>
<h1>TopSite98.com Login Form</h1>
<div class="container">
<form action="/action_page.php">
<label for="uname"><b>Username</b></label>
<input type="text" id="uname" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" id="psw" name="psw" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>

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

کد بالا تست شده است آن را می توانید در پروژه های خود نیز استفاده کنید.

این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید