Cara Membuat Formulir Login Sederhana

Cara Membuat Formulir Login Sederhana – Pada kesempatan kali ini, Galeri Tekno ingin sedikit berbagi bagaimana caranya membuat formulir login sederhana untuk masuk ke berbagai sistem. Biasanya formulir login dipergunakan bagi member untuk mengakses apa yang ada didalam sebuah situs contohnya form login facebook yang digunakan untuk akses ke akun facebook kita.

Membuat sebuah halaman formulir login  sebenarnya cukup mudah, kamu hanya cukup menyiapkan kode html beserta cssnya. berikut beberapa bahan yang harus kamu persiapkan sebelum belajar membuat formulir login sederhana.

Setelah bahan yang kamu butuhkan diatas sudah siap, langsung saja kita mulai bagaimana cara membuat formulir sederhana dengan html+css  dari bootstrap

Mengelompokkan File Dalam 1 Folder

  • Kelompokkan terlebih dahulu folder css ke dalam satu folder baru, dan beri nama contoh
  • Masukkan file gambar berupa logo (bebas) dan gambar background (bebas) kedalam folder contoh
  • Dan buatlah satu file baru melalui sublimetext dan berikan nama contoh.html dan simpan file tersebut di dalam folder contoh

Untuk hasil pengelompokkan filenya dapat kamu lihat melalui gambar dibawah ini

 

Membuat Kode Untuk File contoh.html

Membuat kode untuk file contoh.html juga akan terbagi menjadi beberapa bagian, sengaja Galeri Tekno bedah agar kalian dapat lebih memahaminya.

1. Menghubungkan folder css kedalam file contoh.html

Nah hal pertama yang harus dilakukan dalam membuat struktur html formulir login adalah menghubungkan css yang telah didownload di bootsrap tadi dengan memasukkan kode dibawah ini

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”/>

Sehingga hasilnya seperti gambar dibawah ini

2. Membuat Kepala Situs dan Memberikan Judul

Setelah berhasil menghubungkan file css ke dalam file contoh.html, sekarang saatnya kamu membuat kepala situs dan memberikan judulnya. Judul akan tampil pada tab bar browser kamu nanti, berikut kodenya

<head>

<title>GALERI TEKNO</title>

</head>

Kode tersebut kamu letakkan tepat dibawah kode penghubung css yang pertama tadi, hasilnya seperti gambar dibawah ini

 

3. Membuat Isi dan Menyesuaikan Tampilan Situs Login

Setelah berhasil membuat judul pada situs login, saatnya kamu membuat kode untuk formulir login dan penempatannya. Letakkan dulu kode dibawah ini pada file contoh.html

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”/>
<head>

<title>GALERI TEKNO</title>

</head>

<center>
<div class=”container-fluid”>
<body style=”background-image: url(background.jpg);
background-size: cover;”>

<img src=”logo.png” width=”300″>

</body>
<div class=”form-box”
<b><h4 style=”color: green”> Silahkan Masukkan User Anda </b></h4>
<table border=”0″>
<tr>
<td><b><font color=”#00008B”>Username </font></b></td>
<td> : </td>
<td><input type=”text” class=”form-control” name=”username”> </td>
</tr>
<tr>
<td><b><font color=”#00008B”> Password </font></b></td>
<td> : </td>
<td><input type=”password” class=”form-control” name=”password”> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=”submit” class=”btn btn-info” value=”Login”>
<input type=”reset” class=”btn btn-danger” value=”Batal”>
</td>
</tr>

</table>
</center>
</div>
<br>
<footer>
<center>
copyright 2017 Galeri Tekno
</center>
</footer>

Dari kode atas ada beberapa hal yang perlu kamu pahami diantaranya :

  • <center>, kode ini berguna untuk penempatan posisi formulir login ke tengah situs.
  • <div class, merupakan tag yang berguna untuk membuat satu seksi pada pengelompokan file html.
  • <body>, merupakan komponen kode html untuk penempatan isi pada situs.
  • style, atribut css yang berguna untuk menambahkan komponen baik itu warna tulisan, memasukkan gambar latar belakang dan lain-lain.
  • <img src, berguna untuk menyisipkan gambar pada sebuah struktur html.
  • <table>, kode html yang digunakan untuk membuat tabel, didalamnya ada kode <td> yang berarti tabel data, kegunaanya untuk membuat isi dari <tr>. Sedangkan kode <tr> sendiri dapat didefinisakan sebagai table row atau baris tabel.
  • <input type, berupa gaya khusus dalam pengimputan, misalkan type radio untuk membuat pilihan dengan butir, ataupun type password yang berguna untuk menghilangkan input tulisan menjadi tanda ***.
  • <footer>, merupakan kode untuk membuat catatan kaki atau yang biasa lebih digunakan untuk membuat tagline hak cipta.
  • <br>, merupakan perintah untuk membuat sebuah baris baru atau memberikan batas antar konten yang akan ditampilkan di situs.

Lihat gambar dibawah ini untuk penampakan kodenya

jika sudah, klik simpan

Memanggil File contoh.html

Setelah semua struktur kode telah dibuat, sekarang saatnya kamu memanggil file tersebut. cukup klik file tersebut dan pilih aplikasi browser untuk membukanya.

Selesai, file contoh.html yang telah kamu buat berhasil ditampilkan.

Begitulah kira-kira struktur kode html dan css yang diperlukan untuk membuat sebuah formulir login sederhana, file tersebut tidak dapat kamu gunakan karena tidak terhubung dengan database mysql dan sebuah kode php. Untuk selanjutnya kita akan menghubungkan file diatas dengan mysql.

Berita sebelumyaSelayang Pandang Smartfren Andromax L
Berita berikutnya5 Teks Editor Favorit Untuk Latihan Coding
Anaknya pak rakhmad dan bu maria, senang mengikuti perkembangan teknologi, rajin menulis, serta tidak sombong, sedang menuju gelar S1 di Fakultas Ekonomi dan Bisnis Untan.. Dan juga seorang blogger. Sekarang menjadi CEO di Galeri Tekno Network
BAGIKAN

2 KOMENTAR

  1. Numpang share info lomba gan. Yang mau mencoba kemampuan ngeblog, monggo dicoba lombanya, Yang dinilai KUALITAS CONTENT YANG DIBUAT jadi siapa aja yang emang jago nulis sama bikin postingan blog bagus punya kesempatan untuk menang.
    Link Lomba : https://www.elevenia.co.id/lomba-blog

    Hadiah-Hadiah
    Juara 1 : Uang Tunai Rp. 10.000.000
    Juara 2 : Uang Tunai Rp. 7.000.000
    Juara 3 : Uang Tunai Rp. 5.000.000
    Juara Kategori : Uang Tunai masing-masing Rp. 1.000.000 untuk 8 Pemenang.

    Note : Lomba TIDAK dipungut biaya.

LEAVE A REPLY

Please enter your comment!
Please enter your name here