ساخت فرم لاگین با HTML
فرم لاگین، یکی از اجزای کلیدی در هر وبسایت است. این فرم به کاربران اجازه می‌دهد تا با وارد کردن اطلاعات خود، به حساب کاربریشان وارد شوند. در اینجا به توضیح گام به گام ساخت یک فرم لاگین با HTML می‌پردازیم.
۱. ساختار پایه HTML
ابتدا، باید ساختار پایه HTML را ایجاد کنیم. این شامل تگ‌های اصلی مانند `<html>`, `<head>`, و `<body>` است.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
</head>
<body>
</body>
</html>
```
۲. ایجاد فرم لاگین
درون تگ `<body>`, یک تگ `<form>` اضافه می‌کنیم. این فرم شامل فیلدهای نام کاربری و رمز عبور خواهد بود. برای هر فیلد، از تگ `<input>` استفاده می‌کنیم.
```html
<body>
<h2>ورود به حساب کاربری</h2>
<form action="/login" method="POST">
<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">رمز عبور:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="ورود">
</form>
</body>
```
۳. توضیحات فیلدها
- نام کاربری: فیلدی برای وارد کردن نام کاربری است. باید الزامی باشد، به همین دلیل از ویژگی `required` استفاده کردیم.
- رمز عبور: فیلدی برای وارد کردن رمز عبور. نوع آن `password` است تا کاراکترها به صورت ستاره نمایش داده شوند.
۴. استایل‌دهی به فرم
برای زیباتر کردن فرم، می‌توانیم از CSS استفاده کنیم. به تگ `<head>` یک تگ `<style>` اضافه می‌کنیم.
```html
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 50px;
}
form {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,
- 1);
label {
display: block;
margin: 10px 0 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin: 5px 0 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="submit"] {
background: #5cb85c;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
```
۵. نتیجه نهایی
با ترکیب HTML و CSS، فرم لاگین ما آماده است. این فرم به کاربران اجازه می‌دهد به سادگی وارد حساب کاربری خود شوند.
اینک شما یک فرم لاگین ساده و کارآمد دارید. می‌توانید آن را با استفاده از زبان‌های دیگر مانند جاوااسکریپت یا PHP توسعه دهید تا ویژگی‌های بیشتری به آن اضافه کنید.
