HTML Forms Templates dengan Validasi Form Menggunakan JS
Dalam pembuatan website, HTML Forms Templates memainkan peran penting dalam mengumpulkan data pengguna, seperti login, pendaftaran, atau input lainnya. Namun, tanpa validasi, form bisa menjadi celah keamanan dan menyebabkan pengalaman pengguna yang buruk.
Oleh karena itu, menggunakan JavaScript untuk validasi form adalah langkah yang sangat penting. Dengan validasi, kita bisa memastikan bahwa pengguna memasukkan data yang benar sebelum dikirim ke server.
Pada artikel ini, kita akan membuat HTML Forms Templates dengan validasi form menggunakan JavaScript untuk memastikan input aman dan lebih interaktif.
Persiapan Koding (Prasyarat)
Sebelum mulai, pastikan kamu memiliki:
Untuk memulai, pastikan kamu memiliki text editor seperti Visual Studio Code atau Sublime Text. Selain itu, gunakan browser modern seperti Chrome atau Firefox untuk melakukan testing. Pemahaman dasar tentang HTML, CSS, dan JavaScript juga akan sangat membantu dalam mengikuti tutorial ini.
🛠 “Sebelum mulai ngoding, lihat dulu demo form ini agar kamu punya gambaran jelas tentang hasil akhirnya!” 🔥
💡 Untuk pengalaman terbaik, disarankan melihat demo ini menggunakan laptop atau tablet agar tampilan lebih maksimal!
Membuat HTML Forms Templates
Langkah pertama adalah membuat struktur dasar HTML form. Kita akan membuat form sederhana dengan input untuk email dan password.
Kode HTML Form Dasar
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login and Registration From in HTML and CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="wrapper">
<span class="bg-animate"></span>
<span class="bg-animate2"></span>
<div class="form-box login">
<h2 class="animation" style="--i:0; --j:21;">Login</h2>
<form action="#">
<div class="input-box animation" style="--i:1; --j:22;">
<input type="text" required>
<label>Username</label>
<i class='bx bxs-user'></i>
</div>
<div class="input-box animation" style="--i:2; --j:23;">
<input type="password" required>
<label>Password</label>
<i class='bx bxs-lock-alt' ></i>
</div>
<button type="sumbit" class="btn animation" style="--i:3; --j:24;">Login</button>
<div class="logreg-link animation" style="--i:4; --j:25;">
<p>Don't have an account? <a href="#" class="register-link">Sign Up</a></p>
</div>
</form>
</div>
<div class="info-text login">
<a href="#" class="animation" style="--i:17; --j:0;">
<img src="./images/Logo.png" style="height: 50px;" alt="Landio logo">
</a>
<p class="animation" style="--i:1; --j:21;">Tingkatkan wawasan Anda dengan menikmati berbagai artikel dan panduan lengkap yang telah disajikan secara gratis.</p>
</div>
<div class="form-box register">
<h2 class="animation" style="--i:17; --j:0;">Sign Up</h2>
<form action="#">
<div class="input-box animation" style="--i:18; --j:1;">
<input type="text" required>
<label>Username</label>
<i class='bx bxs-user'></i>
</div>
<div class="input-box animation" style="--i:19; --j:2;">
<input type="text" required>
<label>Email</label>
<i class='bx bxs-envelope' ></i>
</div>
<div class="input-box animation" style="--i:20; --j:3;">
<input type="password" required>
<label>Password</label>
<i class='bx bxs-lock-alt' ></i>
</div>
<button type="sumbit" class="btn animation" style="--i:21; --j:4;">Sign Up</button>
<div class="logreg-link animation" style="--i:22; --j:5;">
<p>Already have an account? <a href="#" class="login-link">Login</a></p>
</div>
</form>
</div>
<div class="info-text register">
<a href="#" class="animation" style="--i:17; --j:0;">
<img src="./images/Logo.png" style="height: 50px;" alt="Landio logo">
</a>
<p class="animation" style="--i:18; --j:1;">Tingkatkan wawasan Anda dengan menikmati berbagai artikel dan panduan lengkap yang telah disajikan secara gratis.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
💡 Penjelasan:
- Form ini memiliki input email dan password dengan label yang jelas.
- Setiap input memiliki placeholder untuk memudahkan pengguna.
- Span error disiapkan untuk menampilkan pesan kesalahan.
Menambahkan Validasi Form dengan JavaScript
Sekarang kita akan menambahkan validasi JavaScript untuk memastikan data yang dimasukkan sesuai format yang benar.
Kode JavaScript untuk Validasi Form
const wrapper = document.querySelector('.wrapper');
const registerLink = document.querySelector('.register-link');
const loginLink = document.querySelector('.login-link');
registerLink.onclick = () => {
wrapper.classList.add('active');
}
loginLink.onclick = () => {
wrapper.classList.remove('active');
}💡 Penjelasan:
- Event Listener untuk menangkap aksi submit dan mencegah pengiriman jika validasi gagal.
- Validasi email menggunakan regex agar format email sesuai standar.
- Validasi password memastikan minimal 6 karakter agar lebih aman.
- Pesan kesalahan ditampilkan jika ada input yang salah.
Meningkatkan UX dengan CSS
Agar tampilan lebih menarik, kita bisa menambahkan CSS sederhana untuk memberi feedback visual saat input salah.
Kode CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2bbab3;
}
.wrapper {
position: relative;
width: 750px;
height: 450px;
background: transparent;
border: 2px solid #ffffff;
box-shadow: 0 0 25px #ffffff;
overflow: hidden;
}
.wrapper .form-box {
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.wrapper .form-box.login {
left: 0;
padding: 0 60px 0 40px;
}
.wrapper .form-box.login .animation {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition: .7s ease;
transition-delay: calc(.1s * var(--j));
}
.wrapper.active .form-box.login .animation {
transform: translateX(-120%);
opacity: 1;
filter: blur(10px);
transition-delay: calc(.1s * var(--i));
}
.wrapper .form-box.register {
right: 0;
padding: 0 40px 0 60px;
}
.wrapper .form-box.register .animation {
transform: translateX(120%);
opacity: 0;
filter: blur(10px);
transition: .7s ease;
transition-delay: calc(.1s * var(--j));
}
.wrapper.active .form-box.register .animation {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition-delay: calc(.1s * var(--i));
}
.form-box h2 {
font-size: 32px;
color: #fff;
text-align: center;
}
.form-box .input-box {
position: relative;
width: 100%;
height: 50px;
margin: 25px 0;
}
.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border-bottom: 2px solid #fff;
padding-right: 23px;
font-size: 16px;
color: #fff;
font-weight: 500;
transition: .5s;
}
.input-box input:focus,
.input-box input:valid {
border-bottom-color: #000;
}
.input-box label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.input-box input:focus~label,
.input-box input:valid~label {
top: -5px;
color: #000;
}
.input-box i {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 18px;
color: #fff;
transition: .5s;
}
.input-box input:focus~i,
.input-box input:valid~i {
color: #000;
}
.btn {
position: relative;
width: 100%;
height: 45px;
background: transparent;
border: 2px solid #ffffff;
outline: none;
border-radius: 40px;
cursor: pointer;
font-size: 16px;
color: #fff;
font-weight: 600;
z-index: 1;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 300%;
background: linear-gradient(#081b29, #2bbab3, #081b29, #2bbab3);
z-index: -1;
transition: .5s;
}
.btn:hover::before {
top: 0;
}
.form-box .logreg-link {
font-size: 14.5px;
color: #fff;
text-align: center;
margin: 20px 0 10px;
}
.logreg-link p a {
color: #000;
text-decoration: none;
font-weight: 600;
}
.logreg-link p a:hover {
text-decoration: underline;
}
.wrapper .info-text {
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.wrapper .info-text.login {
right: 0;
text-align: right;
padding: 0 40px 60px 150px;
}
.wrapper .info-text.login .animation {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition: .7s ease;
transition-delay: calc(.1s * var(--j));
}
.wrapper.active .info-text.login .animation {
transform: translateX(120%);
opacity: 1;
filter: blur(10px);
transition-delay: calc(.1s * var(--i));
}
.wrapper .info-text.register {
left: 0;
text-align: left;
padding: 0 150px 60px 40px;
pointer-events: none;
}
.wrapper .info-text.register .animation {
transform: translateX(-120%);
opacity: 0;
filter: blur(10px);
transition: .7s ease;
transition-delay: calc(.1s * var(--j));
}
.wrapper.active .info-text.register .animation {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition-delay: calc(.1s * var(--i));
}
.info-text h2 {
font-size: 36px;
color: #fff;
line-height: 1.3;
text-transform: uppercase;
}
.info-text p {
font-size: 16px;
color: #fff;
}
.wrapper .bg-animate {
position: absolute;
top: -4px;
right: 0;
width: 850px;
height: 600px;
background: #353744;
border-bottom: 3px solid #ffffff;
transform: rotate(10deg) skewY(40deg);
transform-origin: bottom right;
transition: 1.5s ease;
transition-delay: 1.6s;
}
.wrapper.active .bg-animate {
transform: rotate(0) skewY(0);
transition-delay:.5s;
}
.wrapper .bg-animate2 {
position: absolute;
top: 100%;
left: 250px;
width: 850px;
height: 700px;
background: #2bbab3;
border-top: 3px solid #ffffff;
transform: rotate(0) skewY(0);
transform-origin: bottom left;
transition: 1.5s ease;
transition-delay: .5s;
}
.wrapper.active .bg-animate2 {
transform: rotate(-11deg) skewY(-41deg);
transition-delay: 1.2s;
}Kesimpulan
Menggunakan HTML Forms Templates dapat membantu dalam pengumpulan data pengguna secara efisien. Dengan menambahkan validasi JavaScript, keamanan dan pengalaman pengguna menjadi lebih optimal. Agar tampilan lebih menarik dan profesional, CSS juga dapat digunakan untuk memberikan efek visual yang lebih baik.
💡 Sekarang giliran kamu! Coba buat form sendiri dan eksplorasi lebih lanjut. Jika ada pertanyaan, tulis di komentar! 🚀
Tagged with:
form html dengan validasiform validation javascripthtml form validationhtml forms templatesjavascript form validationvalidasi form js
Berbagi wawasan dan tips praktis seputar dunia digital.
You might also like
Bisnis
Coding
Investasi
Pendidikan
Review
Tips
