تگ های موضوع ساخت فرم ورود با

ساخت فرم ورود با HTML

فرم‌های ورود، بخش مهمی از وب‌سایت‌ها هستند. آن‌ها به کاربران این امکان را می‌دهند که با استفاده از شناسه کاربری و رمز عبور خود وارد حساب کاربری شوند. در اینجا، به چگونگی ساخت یک فرم ورود ساده با استفاده از HTML و CSS می‌پردازیم.
ساختار فرم
برای شروع، ابتدا باید ساختار اصلی فرم را ایجاد کنیم. این کار با استفاده از تگ `<form>` انجام می‌شود. درون این تگ، می‌توانیم فیلدهای مختلفی مانند نام کاربری و رمز عبور را اضافه کنیم.
```html
<form action="/login" method="post">
<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username" required>
<label for="password">رمز عبور:</label>
<input type="password" id="password" name="password" required>
<button type="submit">ورود</button>
</form>
```
در این مثال، ما از تگ‌های `<label>` برای نمایش نام فیلدها و از تگ `<input>` برای گرفتن ورودی کاربر استفاده می‌کنیم. همچنین، دکمه ارسال با استفاده از تگ `<button>` ایجاد شده است.
CSS برای زیباسازی فرم
برای بهتر شدن ظاهر فرم، می‌توانیم از CSS استفاده کنیم.
```css
form {
width: 300px;
margin: auto;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
}
```
در CSS بالا، فرم را در وسط صفحه قرار داده و به فیلدها و دکمه‌ها استایل داده‌ایم.
نتیجه‌گیری
با استفاده از HTML و CSS، می‌توانیم به سادگی یک فرم ورود بسازیم. این فرم‌ها نه تنها به کاربران اجازه می‌دهند که وارد حساب کاربری خود شوند، بلکه با افزودن استایل‌های مناسب، تجربه کاربری بهتری را نیز فراهم می‌کنند. به یاد داشته باشید که امنیت نیز باید در نظر گرفته شود، مانند استفاده از HTTPS و اعتبارسنجی ورودی‌ها.