HTML Forms Templates dengan Validasi Form Menggunakan JS

Farhan Hidayat — Wed, 12 Feb 2025 10:15:53 +0000

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!

Live Preview

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




	
	
	Login and Registration From in HTML and CSS
	
	



	
		
		

		
			Login
			
				
					
					Username
					
				

				
					
					Password
					
		

		
		
			Don't have an account? Sign Up
		

	

          
			
				
			
			Tingkatkan wawasan Anda dengan menikmati berbagai artikel dan panduan lengkap yang telah disajikan secara gratis.
		


		
			Sign Up
			
				
					
					Username
					
				

				
					
					Email
					
				

				
					
					Password
					
		

		
		
			Already have an account? Login
		

	



			
				
			
			Tingkatkan wawasan Anda dengan menikmati berbagai artikel dan panduan lengkap yang telah disajikan secara gratis.

💡 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! 🚀

Artikel HTML Forms Templates dengan Validasi Form Menggunakan JS pertama kali tampil pada Farhanhidayat.com.

javascript form validation Arsip - Farhanhidayat.com