Scribd Logo
Unggah

Selamat datang di Scribd!

  • Part 5 HTML Form Login

    Diunggah oleh

    sopi
    11 tayangan5 halaman
    Login

    Judul Asli

    Part-5-HTML-Form-Login

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Login

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    11 tayangan5 halaman

    Part 5 HTML Form Login

    Diunggah oleh

    sopi
    Login

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    SMK BINA KERJA PURWAKARTA

    MENCERDASKAN ANAK BANGSA


    JOBSHEET WEB XI 5
    Tema :
    Konsep Pembuatan Form
    Alat :
     Hardware :
     Komputer
     Software :
     Visual Studio Code
     Web Browser : Mozilla Firefox / Chrome / Microsoft Edge
    Materi
    Membuat Form Login
    Silahkan buat form login berikut sebagai latihan. Simpan dengan nama form-login.html.
    Pada Form Login, terdapat beberapa field dan elemen ;
    1. Field untuk input username atau email;
    2. Field untuk input password;
    3. Checkbok untuk remember me;
    4. Tombol untuk login.
    Berikut ini kodenya :
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML Form</title>
    </head>
    <body>
        <form action="login.php" method="post">
            <label for="nama-depan">Nama Depan</label><br>
            <input type="text" name="nama-depan" id="nama-depan" placeholder="Nama 
    Depan"><br>
            <label for="nama-belakang">Nama Belakang</label><br>
            <input type="text" name="nama-belakang" id="nama-belakang" placeholde
    r="Nama Belakang"><br><br> 
            <input type="submit" value="Simpan">
        </form>
        
    </body>
    </html>

    Hasilnya ;

    Membuat Form Contact


    Simpan dengan nama : form-contact.html
    <!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 email..." />
            </p>
            <p>
                <input type="submit" name="submit" value="Send" />
            </p>
            </fieldset>
        </form>
    </body>
    </html>

    Hasilnya

    Membuat Form Register.


    Silahkan simpan dengan nama : form-register.html
    Form ini berisi field untuk:

     Input nama lengkap;


     Input username;
     Input email;
     Input password;
     Input jenis kelamin;
     Input Agama;
     Input Biografi.
     dsb.
    Kodenya :
    <!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="Your email..." />
            </p>
            <p>
                <label>Password:</label>
                <input type="password" name="password" placeholder="Passowrd..." /
    >
            </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>

    Hasilnya :

    Anda mungkin juga menyukai