Cara membuat form login

On Kamis, 02 Mei 2019 0 komentar

Web tidak hanya digunakan untuk menampilkan informasi saja…

…Web juga digunakan untuk mengambil informasi atau data dari pengunjung.

Salah satu cara untuk mengambil informasi dari pengunjung ialah menggunakan form.

Form dalam web bisa disamakan dengan formuliar di dunia nyata.

Form dapat diisi, kemudian diproses dengan program tertentu.

Pada tutorial ini, kita akan belajar cara membuat form di HTML.

Hanya membuat saja ya…

Tidak sampai memproses datanya.

Karena itu masuk ke dalam topik pembahasan yang lain.

Baiklah…

Mari kita mulai.

Cara Membuat Form di HTML

Form di HTML dapat kita buat dengan tag <form>.

Tag ini memiliki beberapa atribut yang harus diberikan, seperti:

action untuk menentukan akasi yang akan dilakukan saat data dikirim;
method metode pengiriman data.

Contoh:

<form action="prosess.php" method="GET">
<!-- form field di sini -->
</form>

Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang akan memproses form.

Secara sederhana,—pada contoh di atas— kita akan menyuruh file prosess.php untuk memproses data form.

Ini nanti akan kita pelajari pada PHP.

Kode HTML di atas, tidak akan menghasilkan apa-apa.

Karena kita belum membuat field-nya.

Apa itu Field?

Field adalah ruas yang dapat diisi dengan data.

Contoh field:

<input type="text" name="info" />

Field memiliki beberapa atribut yang harus diberikan:

type merupakan type dari field.
name merupakan nama dari field yang akan menjadi kunci dan variabel di dalam program.

Sebagai latihan, mari kita buat form login.

Pada form login, terdapat beberapa field dan elemen:

Field untuk input username atau email;
Field untuk input password;
Checkbok untuk remember me;
Tombol untuk login.

Berikut ini kodenya:

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasilnya bisa kalian lihat setelah di save dengan nama : login.html / login.php

0 komentar:

Posting Komentar

Saran dan masukan anda membantu kami untuk terus mengembangkan, Harap jangan membuat spam sara dan sejenisnya, terima kasih telah berkunjung

Sija [ Official ]