Baiklah guys sebelum kita membuat form login alangkah baiknya sobat sudah memahami dasar html dan css, berikut link yang membahas tentang tutorial html dan css

Pelajari HTML 5 Lengkap

Tutorial Belajar CSS Dasar Untuk Pemula

Teman-teman diharapkan dapat memahami dasar-dasar HTML dan CSS secara sekilas, agar kedepannya jika melakukan pemrograman web tidak terlalu rumit atau membingungkan karena sudah mengetahui dasar-dasarnya.

Bootstrap

Oiya sebelumnya kita juga akan mengenal Bootstrap, Bootstrap atau dikenal dengan Framework CSS, HTML, Javascript yang populer dan mudah digunakan. Bootstrap biasanya lebih sering digunakan untuk desain website yaitu pada bagian Front-End Website

Oiya pada postingan sebelumnya kita juga sempat membahas website sekolah yang kita buat dengan menggunakan Bootstrap Framework, ini linknya

Buat Website Sekolah yang Responsif dengan Bootstrap

Pada postingan sebelumnya kita sudah membuat tampilan form login dengan HTML, CSS dan Bootstrap, bagi sobat yang ingin melihatnya bisa mengunjungi link dibawah ini.  

Formulir Login Sederhana dengan HTML, CSS dan Bootstrap

Membuat Formulir Pendaftaran

Dalam pembuatan form registrasi ini kita akan menggunakan Framework Help dari Bootstrap sob, dan juga akan menambahkan style nantinya. css agar form login kita lebih responsif

Formulir Pendaftaran digunakan oleh pengguna untuk mendaftarkan diri ke sistem yang ingin menjadi anggota atau mitra sistem

Teman baik, berikut ini adalah sintaks dalam formulir pendaftaran

Formulir pendaftaran

  
    
    
    
    
    
    
    
  
  
    

      

        

          

            

              

                
                
                
Registrasi

                
Silahkan Daftar dengan Email Anda!

              

              

                Email address
                
              

              

                Username
                
              

              

                Password
                
              

              Register
            

            

              
Sudah Punya Akun?

              Login
            

          

        

      

    

    
  

Ya diatas ada script php yang nantinya akan kita gunakan untuk syarat berhasil daftar atau tidak. Insya Allah kedepannya akan kami share cara membuat Web CRUD dengan PHP

Gaya File. css

body {
	background-color: #ffc107;
}

.col-sm {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 30%;
	padding: 20px;
}


@media screen and (max-width: 900px) {
		.col-sm {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 50%;
		padding: 20px;
	}
}

@media screen and (max-width: 600px) {
		.col-sm {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		padding: 20px;
	}
}

Jika melihat sintaks di atas, ada layar @media dengan max-widths yang berbeda, nah itu css yang digunakan agar formulir pendaftaran kita lebih responsif. Direkomendasikan untuk gaya panggilan. css ada dalam satu folder sob

Nah, berikut adalah hasil form registrasi + style css yang sudah kita buat diatas

Berikut adalah hasil form registrasi sederhana di Desktop

Berikut adalah hasil form login sederhana di iPad

Berikut adalah hasil form login sederhana di iPhone atau Smartphone

Berikut adalah hasil dari formulir Registrasi Responsif sederhana

Pada gambar terakhir yaitu saya mencoba dengan opsi responsive yang artinya form registrasi akan mengikuti layout atau ukuran perangkat yang digunakan untuk membuka halaman registrasi

Nah, cukup sekian tutorial membuat Formulir Pendaftaran Sederhana Menggunakan HTML, CSS dan Bootstrap. Semoga tutorial ini bermanfaat bagi kita semua

Apa itu HTML & CSS?

Langkah demi langkah untuk membuat formulir login HTML?

Apa itu form dalam HTML?