Cara Membuat Form Login, Register dan Contact Us dengan HTML

Cara Membuat Form Login, Register dan Contact Us dengan HTML

Takon Blog – Halo semua sobat yang lagi belajar menjadi programer, kali ini saya akan membagikan artike Cara Membuat Form Login, Register dan Contact Us dengan HTML yang dapat sobat coba untuk bahan belajar pemula, yaitu Cara Membuat Form Login dan Register dengan HTML sederhana.

Cara Membuat Form Login dan Register dengan HTML

Cara Membuat Form Login, Register dan Contact Us dengan HTML

Pada tutorial kali ini kita juga akan membahas mengenai Tag Fieldset dan Tag Legend, mungkin sobat ada yang sudah tau atau belum tahu mengenai kalimat tersebut. Jika belum mengetahui mari kita bahas bersama.

Tag Fieldset berfungsi untuk mengelompokkan beberapa objek form menjadi beberapa kelompok, lalu Tag Legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut. Tag Fieldset dan Tag Legend wajib digunakan berpasangan. Untuk lebih memahami penggunaan dari Tag Fieldset dan Tag Legend, langsung saja kita mulai dengan beberapa contoh Membuat Form Login dan Register.

 

Membuat Form Login

1. Pertama kita buka buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka text editor, seperti Notepad++, atau Dreamweaver dan copy pastekan script code berikut.

  <!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>

3. Simpan script code di atas, simpan di folder xampplite – htdocs – buat folder baru (disini saya buat folder baru dengan nama “takon”) – dan simpan dengan nama file “form-login.php”.

4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/takon/ form-login.php.

Membuat Form Register

1. Pertama kita buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka text editor, seperti Notepad++, atau Dreamweaver dan copy pastekan script code berikut.

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama Lengkap" />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username" />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="E-mail" />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Password" />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

3. Simpan script code di atas, simpan di folder xampplite – htdocs – buat folder baru (disini saya buat folder baru dengan nama “takon”) – saya simpan dengan nama file “form-register.php”.

4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/takon/form-register.php

Membuat Form Contact Us

1. Pertama kita buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka text editor, seperti Notepad++, atau Dreamweaver dan copy pastekan script code berikut.

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name" />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject" />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your emai" />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

 

3. Simpan script code di atas, simpan di folder xampplite – htdocs – buat folder baru (disini saya buat folder baru dengan nama “takon”) – saya simpan dengan nama file “form-contact.php”.

4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/takon/form-contact.php

Bagaimana menurut sobat cara diatas cukup mudah apa sangat ribet untuk diterapkan, jika ada yang ingin ditanyakan bisa tulis di komentar ya. Sekian artikel Cara Membuat Form Login dan Register dengan HTML yang dapat saya sampaikan semoga bermanfaat.

You May Also Like

Cara Menggunakan Trackview untuk Sadap di Android

Cara Menggunakan Trackview untuk Sadap di Android

Cara Mengganti Warna Gambar Bitmap / Mati di CorelDraw

Cara Mengatasi Hasil Combine Dua Objek Yang Tidak Bolong Di CorelDRAW

Cara Mengatasi Hasil Combine Dua Objek Yang Tidak Bolong Di CorelDRAW

Kode Kelurahan Untuk Sirekap Lengkap Unduh XLSX

Kode Kelurahan Untuk Sirekap Lengkap Unduh XLSX

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.