Membuat form login HTML&CSS

 Membuat form login HTML&CSS

-Membuat Folder untuk simpan File Login

1. Usahakan penamaan tidak menggunakan spasi, jika lebih dari satu kata bisa menggunakan huruf kapital pada tiap kata atau tanda penghubung underscore (_), hypen (-). Misalnya: FormLogin, form_login, form-login  

2. Jika menggunakan web server seperti aplikasi xampp, letakkan folder tersebut ke DocumentRoot, biasanya di C:\xampp\htdocs

3. Untuk akses menggunakan server seperti xampp, buka browser dan ketikkan http://localhost/form_login

- Membuat File HTML

1. Menggunakan VS Code 

2. Klik File -> Open Folder, lalu pilih folder form_login yang dibuat sebelumnya (C:\xampp\htdocs\form_login) 

3. Buat file index.html dengan klik kanan -> new file dibawah folder form_login atau klik icon new file disamping folder "form_login" 

- Diatas title (baris 7) sisipkan kode utk akses CSS Eksternal.

 Isi dari index.html

- Membuat file style.css untuk mengatur layout. lalu isikan kode-kode berikut ini:

- Membuka localhost/form_login lalu akan terlihat tampilan dari codingan tersebut :

 

- Membuat file register.html untuk membuat tampilan layout register. (link untuk mengarahkan ke tampilan register sudah ada pada index.html tadi) dengan langkah yang sama dengan index.html tetapi isi dari register.html sebagai berikut :

-  Membuat file style2.css untuk membedakan dengan style.css yang pertama, untuk mengatur layout register. dengan isi sebagai berikut :

- Pada tampilan login tadi, klik register maka akan mengarah pada form register seperti dibawah ini :