CARA MEMBUAT FORM LOGIN SEDERHANA MENGGUNAKAN HTML

Dalam membuat form login pastinya kita membutuhkan text editor untuk pengkodean script html.Baik yang sangat sederhana notepad atau bahkan software text editor yang khusus dibuat untuk keperluan coding blueFish, ultraEdit, Notepad2, Komodoedit, Notepad++, Sublime text dan lain sebagainya.

Selain mebutuhkan text editor,kita juga harus mempunyai persiapan yang sebelum dilakukannya pengkodean.

Persiapan Cara Membuat Halaman Login Sederhana Menggunakan HTML

Sebelum melakukan bagaimana cara membuat halaman login sederhana menggunakan html,ada beberapa persiapan awal yang harus dilakukan terlebih dahulu.Berikut beberapa persiapan nya :

1.Buat Folder Untuk Menyimpan File form Login

Untuk menyimpan file pada folder dapat diberi nama dengan form_login.kenapa menggunakan tanda strip?karena dalam folder tanda spasi dapat memungkikan terjadinya error. Jadi,untuk alih-alih spasi dapat menggunakan tanda penghubung sepeti hypen (-), underscore (_), dan lain-lain.

2.Buat File HTML menggunakan Text Editor

Tahap yang kedua yaitu membuat file html.Dalam membuat file html buka text editor, kemudian diberinama index.html.

Disini Kami Menggunakan text editor Sublime Text.

Cara Membuat Form Login Di HTML

Setelah persiapan lengkap dan sudah dikerjakan, Anda bisa langsung memulai cara membuat form login pada html.Berikut akan di ulas satu persatu caranya.

Yuk,kita mulai sekarang!

1.Deklarasikan Dokumen HTML Anda

Buka file html form login Anda. Supaya form Anda nantinya dapat ditampilkan dengan benar, kita harus mendeklarasikannya terlebih dahulu. Penulisannya sendiri ditandai dengan adanya DOCTYPE atau Document Type Declaration (DTD) pada baris pertama text editor.

<!DOCTYPE HTML>
<html>
</html>

Setelah mendeklarasikan dokumen HTML, Anda bisa memulai proses pembuatan form dengan tag <html>.

2.Buat Kepala Halaman Form Login

Di dalam tag <html>, silakan masukkan tag <head>. Tag ini berfungsi untuk membuat kepala dokumen.

<!DOCTYPE HTML>
<html>
    <head>
    </head>
</html>

Tag head mengandung berbagai metadata atau informasi teknis terkait dokumen HTML yang dibuat. Contohnya seperti judul halaman, deskripsi halaman, sumber file eksternal, dan lain-lain.

3.Membuat Judul Halaman Form Login

Seperti pembahasan pada poin sebelumnya, kita dapat mengisi metadata di dalam tag <head>. Salah satu komponennya yaitu judul. Untuk membuat judul halaman, kita menggunakan tag <title>.

<title>Masukkan Judul Halaman Form Login</title>

Syntax lengkapnya bisa Anda lihat di bawah ini.

<!DOCTYPE HTML>
<html>
    <head>
    <title>Halaman Login</title>
    </head>
</html>

4.Buat Badan Form Login

Seusai membuat kepala form login, tahap berikutnya yaitu membuat badan. Untuk itu, Anda membutuhkan tag <body>. Bisa dibilang, ini adalah wadah untuk meletakkan seluruh komponen inti form.

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
    </body>
</html>

Caranya, cukup letakkan tag <body> di bawah tag <head>. Jika sudah, berarti Anda siap untuk melangkah ke tahap berikutnya.

5.Buat Layout Form Login

Cara membuat layout ini dengan menggunakan elemen <div> dengan class = “container”. Tag ini akan mengelompokkan atau menampung komponen tertentu ke dalam satu grup.

<div class="container">

Karena Anda akan menggunakan elemen ini untuk membungkus isi form, masukkan syntax tadi di dalam tag <body>. Jangan lupa juga untuk tutup bungkusnya dengan tag </div>.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
        </div>     
    </body>
</html>

fungsi dari elemen ini akan lebih terasa nanti ketika kita sudah bermain dengan CSS. Tapi sebelum sampai ke sana, kita fokus dulu untuk menyusun struktur form login yang akan kita buat ini.

Nah, untuk seterusnya, kita akan membuat organ-organ form login keren di dalam tag <div> ini.

6.Beri Judul Form Login

Hal pertama yang paling penting dalam sebuah form login yaitu judul utama alias heading 1. Judul form ini berbeda dengan judul halaman yang sudah kita buat di awal tadi.

Nah, supaya judul form login Anda dapat dikenali oleh mesin pencari, gunakanlah tag <h1>. Tag ini juga akan membuat judul terlihat lebih penting dan menonjol.

<h1> Masukkan Judul <h1>

Di sini, kami akan menamakan form ini sebagai ‘LOGIN’. Berikut syntax lengkapnya.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
        </div>     
    </body>
</html>

Dengan syntax tersebut, Anda baru akan mendapat tampilan seperti ini.

7.Buat Kotak From Login

Setelah memiliki judul, sekarang saatnya membuat kotak form login. Kita akan menggunakan tag <form>.

Mirip seperti tag <div>, tag <form> juga berfungsi untuk mengelompokkan elemen. Bedanya, tag <form> secara khusus menampung seluruh elemen yang berkaitan dengan sebuah form. Seperti kolom username dan password.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
            </form>
        </div>     
    </body>
</html>

Untuk langkah-langkah selanjutnya, kita akan membuat organ form login di dalam tag <form>.

8.Membuat Kolom Username Dan Password

Setidaknya, ada tiga tag yang digunakan untuk membuat kolom username dan password. Anda akan membutuhkan tag: <label>, <input type>, dan <br>. Kita akan membahasnya satu per satu.

Tag <label> berfungsi untuk memberi keterangan teks pada halaman form.

<label>Masukkan teks</label>

Setelah menjadi label ,langkah berikutnya yaitu membuat kolom input menggunakan tag <input type>. Dengan input :

<input type="text">

Nah bicara tentang tag <input type>, ada dua tipe yang akan kita gunakan pada form login. Pertama, type=text. Tipe ini akan menampilkan tulisan yang Anda ketikkan di dalam kolom. Kedua, type=password. Menggunakan tipe ini, teks isian akan ditampilkan dalam bentuk karakter khusus, seperti dots.

Supaya syntax Anda lebih rapi, silakan bubuhkan tag <br> di akhiran setiap tag di atas. Tag <br> berfungsi sebagai break atau penanda baris baru.

Contoh script lengkap perpaduan seluruh tag ini dapat Anda lihat di bawah.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
                <label>Username</label><br>
                <input type="text"><br>
                <label>Password</label><br>
                <input type="password"><br>
            </form>
        </div>     
    </body>
</html>

Hasil jadinya dapat Anda lihat pada gambar berikut.

9.Buat Tombol Form Login

Cara membuat tombol pada dokumen HTML cukup mudah. Di dalam tag <form>, silakan berikan tag <button>.

<button>Masukkan Nama Tombol</button>

Keseluruhan syntax detailnya bisa Anda dapatkan di bawah ini.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
                <label>Username</label><br>
                <input type="text"><br>
                <label>Password</label><br>
                <input type="password"><br>
                <button>Log in</button>
            </form>
        </div>     
    </body>
</html>

Tampilannya seperti berikut.

Cara membuat form login yang menarik dengan HTML sudah selesai Anda lakukan.Semoga apa yang telah kita buat bisa bermanfaat.