Manggarai Blogger: Cara Membuat Form Login + Register Dengan Menggunakan HTML dan CSS

Halo semuanya, pasti kalian sudah familiar dengan form login dan juga form register. Untuk form login ini biasanya meminta username dan password user sebelum masuk ke sebuah aplikasi.

Untuk form registrasi biasanya digunakan untuk mendaftarkan username dan password akan bisa masuk melalui form login.

Pada artikel ini, kalian akan mengetahui cara membuat sebuah form login dan registrasi dengan HTML dan CSS. HTML berfungsi untuk membuat halaman web dan struktur dari form login dan form register. Sedangkan CSS untuk mendesain tampilan dari kedua form tersebut. Form di HTML cukup mudah di buat.

Bagaimana ? Apakah kalian sudah tidak sabar untuk mengetahui cara membuat form login dan form register dengan HTML dan CSS ? Mari simak penjelasan berikut ini :

1. Apa yang perlu di persiapkan ?

Jika kalian masih baru belajar membuat sebuah program, maka yang kalian butuhkan untuk membuat form login dan form register ini adalah :

Text Editor Text Editor sendiri bisa disebut sebagai wadah untuk kalian membuat syntax code kalian. Disini saya menggunakan Text Editor bernama sublime text. Kalian bisa menggunakan Notepad++. Atom, ataupun visual code.
Browser. Browser sendiri berguna untuk kita menjalankan syntax code yang sudah kita buat di Text Editor.

Persiapan membuat form login dan form register dengan HTML dan CSS

1. Buat Folder

Langkah pertama, yaitu membuat folder khusus. Ini akan menjadi wadah untuk menyimpan file HTML dan CSS form login dan form register. Disini untuk folder saya memberikan nama Form-Login. disini saya taro foldernya di data D. terserah kalian mau taro foldernya di data D, E atau C silahkan, boleh-boleh saja bre.

2. Buat File HTML, Register dan CSS di Text Editor

Langkah kedua, yaitu buka Text Editor kalian, lalu pilih open folder yang sudah kalian buat, lalu buat file baru bernama index.html untuk form login, register.html untuk form register, dan style.css untuk CSS.

Langkah-langkah membuat form login dan form Register dengan HTML dan CSS

Setelah kalian sudah menyiapkan semua bahan yang telah ditentukan, Kalian bisa memulai cara membuat form login yang menarik di HTML. Saya akan menjelaskannya satu per satu dan secara detail, jadi Kalian tidak perlu takut akan merasa kebingungan.

Yuk, kita mulai sekarang...

1. Memasukkan Source Code HTML di menu index.html

Hal pertama yang dilakukan adalah memasukkan source code dibawah ini ke dalam menu index.html

index.html

<!DOCTYPE HTML>

<html>

<head>

<title>Login</title>

</head>

<body>

<h1>Login</h1>

<form>

<label>Username</label><br>

<label>Password</label><br>

<p> Belum punya akun?

<a href="register.html">Register disini</a>

</p>

</form>

</div>

</body>

</html>

Source Code yang berisi <link rel="stylesheet" href="style.css"> Style sheet dalam atribut link rel bermakna untuk memberitahu browser bahwa file eksternal yang disisipkan berjenis style sheet dengan ekstensi .css. Jadi nanti href=”style.css” untuk mengambil data CSS yang ada di syle.css yang akan kita buat nanti. Sebelum ke style.css kita akan membuat form register terlebih dahulu.

register.html

<!DOCTYPE HTML>

<html>

<head>

<title>Halaman Login</title>

</head>

<body>

<h1>Register</h1>

<form>

<label>Username</label>\

<br>

<br>

<label>Email</label>

<br>

<br>

<label>Password</label>

<br>

<br>

<button>Register</button>

<p> Sudah punya akun?

<a href="index.html">Login di sini</a>

</p>

</form>

</div>

</body>

</html>

Nah di form login dan form register terdapat <button> yang berfungsi untuk masuk ke halaman aplikasi atau udah registrasi akun. Sebagai bocoran, fungsi dari <div class=”container”> akan lebih terasa nanti ketika kita sudah bermain dengan CSS. Tapi sebelum sampai ke sana, kita fokus dulu untuk menyusun struktur form login keren Kalian.

Setelah sudah memasukkan Source Code HTML ke Form Login dan Form Register. Silahkan masukkan Source Code berikut kedalam file style.css.

style.css

margin: 0;

padding: 0;

outline: 0;

font-family: 'Open Sans', sans-serif;

}

body{

height: 100vh;

background-image: url(foto/teknologi.jpg);

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

p {

color: white;

font-family: 'Open Sans', sans-serif;

padding-top: 10px;

}

h1 {

text-align: center;

padding-left: 100px;

padding-bottom: 20px;

}

a {

color: white;

font-family: 'Open Sans', sans-serif;

}

.container{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

padding: 20px 25px;

width: 300px;

background-color: rgba(0,0,0,.7);

box-shadow: 0 0 10px rgba(255,255,255,.3);

}

.container h1{

text-align: left;

color: #fafafa;

margin-bottom: 30px;

text-transform: uppercase;

border-bottom: 4px solid #752BEA;

}

.container label{

text-align: left;

color: #90caf9;

}

.container form input{

width: calc(100% - 20px);

padding: 8px 10px;

margin-bottom: 15px;

border: none;

background-color: transparent;

border-bottom: 2px solid #752BEA;

color: #fff;

font-size: 20px;

}

.container form button{

width: 100%;

height: 40px;

padding: 5px 0;

border: none;

background-color:#752BEA;

font-size: 18px;

color: #fafafa;

border-radius: 20px;

}

Sesudah kalian masukkan semua silahkan kalian simpan semua file html diatas kedalam folder yang sudah dibuat sebelumnya. Setelah semua file disimpan, buka file index.html otomatis akan dibawa ke browser kalian. Dan hasilnya seperti ini :

Hasilnya :

Dan berikut merupakan untuk hasil form register.html

Untuk isi form dari register bisa kalian tambahkan sendiri sesuai dengan kebutuhan. Selamat mencobaa.

Terimakasih.
Semoga bermanfaat!

Manggarai Blogger

Cara Membuat Form Login + Register Dengan Menggunakan HTML dan CSS

Persiapan membuat form login dan form register dengan HTML dan CSS

1. Buat Folder

index.html

register.html

style.css

Membuat Game Snake Dengan HTML5 dan JQuery

Laporkan Penyalahgunaan