Cara Membuat Form Register dengan Bootstrap

Cara membuat form register dengan bootstrap menggunakan kolom input registrasi pada umumnya yang terdiri dari username, nama user, email, dan password sehingga nantinya dapat digunakan untuk akun login. Form register bootstrap sebuah website dibuat dengan tujuan agar dapat digunakan oleh pengguna atau user untuk mendaftar akun ke dalam sistem web sehingga memiliki otoritas yang lebih dalam. Membuat form registrasi dengan bootstrap akan lebih cepat dan mudah karena di dalam framework bootstrap terdapat banyak pilihan template desain form berbasis HTML, CSS, dan JavaScript. Keunggulan dari membuat form register bootstrap ini dipastikan akan menghasilkan tampilan yang menarik, mobile friendly, dan responsive. Dengan form register responsive maka pengalaman pengguna akan semakin mudah untuk menjelajah dan melakukan registrasi pada setiap kolom inputan formulir.

Tutorial cara membuat form register dengan bootstrap sehingga menjadi sebuah formulir registrasi yang simpel namun menarik dan responsive untuk halaman front end sebuah web. Framework bootstrap sangat berperan penting untuk hal tersebut, karena jika tidak dikembangkan dengan bootstrap maka tentu saja perlu manipulasi yang maksimal terhadap kode html, css, dan javascript secara mandiri. Membuat form register menggunakan framework bootstrap akan kita lakukan pada versi 5.3.0 alpha1 yang dapat didownload secara gratis atau boleh juga memakai versi yang lebih baru.

Cara Membuat Form Register dengan Bootstrap

form register bootstrap

Pembahasan cara membuat form register dengan bootstrap akan kita pelajari menjadi beberapa langkah, mulai dari direktori folder asset, style form register css, membuat kolom input dengan html, hingga action registrasi nya.

• Download framework bootstrap di website getbootstrap
• Membuat direktori folder di htdocs
• Membuat custom style form register css
• Membuat kode program dengan script HTML untuk desain kolom input.

1. Download Framework Bootstrap

Download assets bootstrap terbaru dapat di unduh langsung pada sumbernya yaitu getbootstrap.com, yang di dapat adalah kompilasi kode CSS dan JavaScript, dan atau source code examples. Silahkan ekstrak file rar yang di dalamnya terdapat assets dengan nama folder "CSS" dan javascript "JS", kemudian simpan sementara pada folder apapun, sebaiknya langsung di htdocs.

2. Membuat Folder Direktori Tutorial Register Bootstrap

Untuk tutorial membuat form register dengan bootstrap silahkan buat nama folder suka-suka dan sebaiknya terletak di direktori xampp htdocs agar mudah dijalankan menggunakan url pada web browser. Sebagai contoh nama folder nya adalah "register-bootstrap", sehingga url folder di xampp menjadi C:\xampp\htdocs\register-bootstrap\.

Kemudian di dalam folder "register-bootstrap" tersebut buat lagi folder dengan nama "assets" yang berfungsi untuk menyimpan framework bootstrap yaitu folder "CSS" dan "JS" yang telah di download. Pada direktori ini boleh ditambahkan folder opsional untuk menyimpan aset lain seperti file image logo atau file lain yang diperlukan.

Jadi saat ini di dalam folder \register-bootstrap\assets\ terdapat susunan 2 nama folder yaitu css dan js seperti gambar di bawah ini.

3. Membuat Custom Styles Form Register di CSS

Dalam membuat form register dengan bootstrap agar terlihat lebih menarik maka boleh saja menambahkan custom style dengan CSS, sehingga tampilan halaman form register terlihat lebih menarik.

Di bawah ini adalah kode custom style css tersebut.

body {
	background: #dfe7e9;
	font-family: 'Roboto', sans-serif;
}
.form-control {
	font-size: 14px;
	transition: all 0.4s;
	box-shadow: none;
}
.form-control:focus {
	border-color: #5cb85c;
}
.form-control, .btn {
	border-radius: 50px;
	outline: none !important;
}
.signup-form {
	width: 480px;
	margin: 0 auto;
	padding: 10px 0;
}
.signup-form form {
	border-radius: 5px;
	margin-bottom: 20px;
	background: #fff;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	padding: 30px;
}
.signup-form a {
	color: #5cb85c;
}    
.signup-form h2 {
	text-align: center;
	font-size: 26px;
	margin: 10px 0 15px;
}
.signup-form .hint-text {
	color: #999;
	text-align: center;
	margin-bottom: 20px;
}
.signup-form .form-group {
	margin-bottom: 20px;
}
.signup-form .btn {        
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	text-align: center;
}
.signup-btn {
	text-align: center;
	border-color: #5cb85c;
	transition: all 0.4s;
}
.signup-btn:hover {
	background: #5cb85c;
	opacity: 0.8;
}
.or-seperator {
	margin: 40px 0 10px;
	text-align: center;
	border-top: 1px solid #e0e0e0;
}
.or-seperator b {
	padding: 0 4px;
	width: 30px;
	height: 30px;
	font-size: 14px;
	text-align: center;
	line-height: 30px;
	background: #fff;
	display: inline-block;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	position: relative;
	top: -16px;
	z-index: 1;
}
.social-btn .btn {
	color: #fff;
	margin: 10px 0 0 15px;
	font-size: 15px;
	border-radius: 50px;
	font-weight: normal;
	border: none;
	transition: all 0.4s;
}	
.social-btn .btn:first-child {
	margin-left: 0;
}
.social-btn .btn:hover {
	opacity: 0.8;
}
.social-btn .btn-primary {
	background: #507cc0;
}
.social-btn .btn-info {
	background: #64ccf1;
}
.social-btn .btn-danger {
	background: #df4930;
}
.social-btn .btn i {
	float: left;
	margin: 3px 10px;
	font-size: 20px;
}

Save file css di atas sebagai style.css dan simpan di dalam folder "\register-bootstrap\assets\" sehingga sejajar dengan folder CSS dan JS sebagaimana pada langkah nomor 2.

4. Membuat File Index dengan HTML untuk Kolom Input Registrasi

File index ini digunakan sebagai homepage form register yang memiliki beberapa kolom inputan dan sekaligus untuk melakukan coding script cara membuat form register dengan bootstrap. Pastikan simpan file index ini ke folder direktori utama yaitu \register-bootstrap\, sehingga sejajar dengan folder "assets" bootstrap.

Save as index.html

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Tutorial Membuat Form Register dengan Bootstrap</title>
	<!-- Bootstrap core css -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<!-- Custom styles for this template -->
    <link href="assets/style.css" rel="stylesheet">
</head>
<body>
<div class="signup-form">
    <form action="signup.php" method="POST">
		<h2>Registrasi Akun</h2>
		<p class="hint-text">Registrasi dengan akun media sosial atau alamat email Anda</p>
		<div class="social-btn text-center">
			<a href="#" class="btn btn-primary">Facebook</a>
			<a href="#" class="btn btn-info">Twitter</a>
			<a href="#" class="btn btn-danger">Google</a>
		</div>
		<div class="or-seperator"><b>or</b></div>
        <div class="form-group">
        	<input type="text" class="form-control input-lg" name="username" placeholder="Username" required="required" />
        </div>
		<div class="form-group">
        	<input type="email" class="form-control input-lg" name="email" placeholder="Email address" required="required" />
        </div>
		<div class="form-group">
            <input type="password" class="form-control input-lg" name="password" placeholder="Password" required="required" />
        </div>
		<div class="form-group">
            <input type="password" class="form-control input-lg" name="confirm_password" placeholder="Confirm password" required="required" />
        </div>  
        <div class="form-group text-center">
            <button type="submit" class="btn btn-success btn-block signup-btn">Daftar</button>
        </div>
    </form>
    <div class="text-center">Sudah memiliki akun? <a href="#">Login disini</a></div>
</div>
</body>
</html>

Perhatikan coding baris ke-7 yaitu <link href="assets/css/bootstrap.min.css" rel="stylesheet"> ini adalah atribut link untuk memanggil seluruh asset css pada bootstrap, yang salah satu perannya adalah untuk membuat form register menjadi responsive. Selanjutnya yang tidak kalah penting adalah kode program baris ke-9 yaitu <link href="assets/style.css" rel="stylesheet"> adalah custom style yang akan membuat desain form register lebih menarik. Selebihnya adalah pengetahuan umum dimana untuk membuat sebuah form harus di lakukan di dalam tag html <form> dan </form> serta tag input beserta atribut nya diperlukan untuk membuat kolom inputan atau text fill.

Akhirnya sampai juga pada tahap uji coba tutorial cara membuat form register dengan bootstrap sehingga terlihat halaman registrasi dengan desain yang keren dan menarik serta responsive mobile friendly. Silahkan jalankan coding form register bootstrap tersebut pada web browser dengan url localhost/register-bootstrap/, dan pastikan tampil seperti gambar di bawah ini.

Tutorial Cara Membuat Form Register dengan Bootstrap

Download Script Register Bootstrap

Sekian penjelasan tutorial tentang form bootstrap yaitu cara membuat form register dengan bootstrap menggunakan custom css sehingga form registrasi terlihat lebih menarik dan responsive mobile friendly. Jika terjadi gagal atau error atau tidak berhasil berjalan sebagaimana mestinya, silahkan hubungi kami melalui live chat atau form komentar. Semoga dapat membantu.

Baca juga :

• Cara Aktivasi Windows 10 Pro Permanen Gratis
• Script PHP Mengurangi Stok Barang
• Cara Menambah Kapasitas Upload XAMPP
• Membatasi Ukuran File Upload di PHP
• Cara Mempercepat Loading Web dengan htaccess
• Membuat Laporan Excel dengan PHP dan MySQLi

Cara Membuat Form Register dengan Bootstrap

Tags: cara membuat form register bootstrap, membuat form registrasi bootstrap, form register bootstrap, register bootstrap, membuat form register dengan bootstrap