HTML, CSS, மற்றும் JavaScript பயன்படுத்தி உள்நுழைவு (Login) படிவம் உருவாக்குவது எப்படி
ஒரு உள்நுழைவு படிவம் (Login Form) என்பது எந்தவொரு இணையதளத்தின் முக்கிய கூறாகும். பயனர்கள் தங்கள் கணக்குகளுக்கு பாதுகாப்பாக அணுக இந்த படிவத்தை பயன்படுத்துவர். இந்த பதிவில், HTML, CSS, மற்றும் JavaScript பயன்படுத்தி எளிய மற்றும் செயல்பாட்டு உள்நுழைவு படிவத்தை உருவாக்குவது எப்படி என்பதை காண்போம்.
கட்டமைப்பு (HTML)
முதலில், HTML மூலம் உள்நுழைவு படிவத்தின் அடிப்படை அமைப்பை உருவாக்குவோம்.
<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>உள்நுழைவு படிவம்</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>உள்நுழைய</h2>
<form id="loginForm">
<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>
<p id="errorMessage" style="color: red;"></p>
</div>
<script src="script.js"></script>
</body>
</html>வடிவமைப்பு (CSS)
CSS மூலம் உள்நுழைவு படிவத்தை அழகாக வடிவமைப்போம். இது பயன்படுத்த எளிமையாகவும் கண்ணுக்கு அழகாகவும் இருக்கும்.
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #218838;
}செயல்பாடு (JavaScript)
JavaScript மூலம் உள்நுழைவு படிவத்தின் செயல்பாட்டை சரிபார்ப்போம். இது பயனர் சரியான பயனர் பெயர் மற்றும் கடவுச்சொல்லை உள்ளீடு செய்தாரா என்பதை பார்க்கும்.
document.getElementById("loginForm").addEventListener("submit", function(event){
event.preventDefault();
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let errorMessage = document.getElementById("errorMessage");
if(username === "admin" && password === "1234") {
errorMessage.textContent = "உள்நுழைவு வெற்றிகரமாக முடிந்தது!";
errorMessage.style.color = "green";
} else {
errorMessage.textContent = "தவறான பயனர் பெயர் அல்லது கடவுச்சொல்!";
}
});முடிவு
இந்தக் கட்டுரையில், HTML, CSS, மற்றும் JavaScript பயன்படுத்தி எளிய உள்நுழைவு படிவத்தை உருவாக்குவதற்கான வழிமுறைகளை நாங்கள் பார்த்தோம். இந்த உள்நுழைவு படிவம் எளிமையானது, ஆனால் தேவையான பாதுகாப்பு அம்சங்களை உள்ளடக்கியது. இதை உங்கள் இணையதளத்தில் சேர்த்து, பயனர்களின் கணக்குகளை பாதுகாப்பாக வைத்திருக்கும் முறையை உருவாக்கலாம்.
