Cara Membuat Form Pengajuan keanggotaan di HTML Yang Mudah untuk pemula

bila


 Pada blog sebelumnya, saya sudah menjelaskan tentang definisi form, element form dan jenis-jenis form. Nah pada kali ini saya akan memberikan contoh membuat formulir. Formulir yang digunakan kali ini adalah formulir pendaftaran anggota perpustakaan. Simak baik-baik ya.

Pertama-tama saya akan membuat pembuka dan <bodynya>. Body yang saya buat menggunakan text warna putih dan background hitam. saya juga menggunakan metode post .
<html>
    <head>
        <title>membuat formulir </title>
    </head>
    <body text="White" bgcolor="Black">
        <h3 align="center">PENDAFTARAN ANGOTA PERPUSTAKAAN TAMAN KENCANA</h3>
<form method="post">

Dimana hasilnya akan menunjukkan judul dengan tampilan seperti ini

Setelah itu saya akan lanjut membuat table atau kolom untuk menjawab pertanyaan pada formulir, dengan menggunakan beberapa tag <input> seperti input text , date atau number 
<table border="0" widht="75%">
        <tr>
            <td widht="20%">NAMA LENGKAP</td>
            <td> <input type="text" name="NAMA LENGKAP" size="25"></td>
        </tr>
        <tr>
            <td widht="20%"> TEMPAT LAHIR </td>
            <td><input Type="text" name=" TEMPAT LAHIR" size="11"></td>
        </tr>
        <tr>
            <tr width="30%%"> TANGGAL LAHIR </tr>
            <tr><input type="date" name="TANGGAL LAHIR" size="10"></tr>
        </tr>
        <tr>
            <td widht="20">NOMOR HANDPHONE</td>
            <td><input type="number" name="NOMOR HANDPHONE" size="10"></td>
        </tr>

Dengan hasil yang seperti ini

Selanjutnya penggunaan tag <radio> pada formulir, tag <radio> ini berfungsi untuk membuat tombol pilihan, yang nantinya kita dapat memilih tombol radio yang tersedia.
<tr>
            <td width="20%">Jenis kelamin</td>
            <td><input Type="radio" name="Jenkel" checked value="laki2">laki-laki
                <input Type="radio" name="Jenkel" checked value="perempuan">perempuan
            </td>
        </tr>

Ini tampilan input radio

Setelah saya menggunakan tag input, kali ini saya akan menggunakan tag <select>, tag <select> ini adalah sebuah daftar secara drop-down dimana valuenya ada pada tag<option> yang mendefinisikan kedalam bentuk drop-down list.
<tr>
            <td width="20%">Pilih Kota</td>
            <td><select name="Pilih Provinsi">
                <option value="Jogja">Bekasi</option>
                <option value="JKT">Jakarta</option>
                <option value="ACH">Bogor</option>
                <option value="ACH">Tanggerang</option>
                <option value="ACH">Depok</option>
            </select>
            </td>
        </tr>

Tampilan dari hasil tag <select> akan seperti ini

Lalu ada juga tag input checkbox, hapir mirip dengan input radio bedanya pada input checkbox vertikal sedangkan radio harizontal
<tr>
            <td width="20%">Status Pendaftar</td>
            <td><input Type="checkbox">  Pelajar</td>
            </tr>
            <tr>
                <td></td>
            <td><input Type="checkbox">  Mahasiswa</td>
            </tr>
            <tr>
                <td></td>
            <td><input Type="checkbox">    Karyawan</td>
        </tr>

ini hasilnya

Dan yang terakhir adalah input submit, untuk menyimpan data dan input reset untuk embatalkan atau menghapus data.
        <td><input type="submit" value="simpan"> <input type="reset" value="batal"></td>


berikut tampilan lebih lengkapnya

<html>
    <head>
        <title>membuat formulir </title>
    </head>
    <body text="White" bgcolor="Black">
        <h3 align="center">PENDAFTARAN ANGOTA PERPUSTAKAAN TAMAN KENCANA</h3>
<form method="post">
    <table border="0" widht="75%">
        <tr>
            <td widht="20%">NAMA LENGKAP</td>
            <td> <input type="text" name="NAMA LENGKAP" size="25"></td>
        </tr>
        <tr>
            <td widht="20%"> TEMPAT LAHIR </td>
            <td><input Type="text" name=" TEMPAT LAHIR" size="11"></td>
        </tr>
        <tr>
            <tr width="30%%"> TANGGAL LAHIR </tr>
            <tr><input type="date" name="TANGGAL LAHIR" size="10"></tr>
        </tr>
        <tr>
            <td widht="20">NOMOR HANDPHONE</td>
            <td><input type="number" name="NOMOR HANDPHONE" size="10"></td>
        </tr>
        <tr>
            <td width="20%">Jenis kelamin</td>
            <td><input Type="radio" name="Jenkel" checked value="laki2">laki-laki
                <input Type="radio" name="Jenkel" checked value="perempuan">perempuan
            </td>
        </tr>
        <tr>
            <td width="20%">Pilih Kota</td>
            <td><select name="Pilih Provinsi">
                <option value="Jogja">Bekasi</option>
                <option value="JKT">Jakarta</option>
                <option value="ACH">Bogor</option>
                <option value="ACH">Tanggerang</option>
                <option value="ACH">Depok</option>
            </select>
            </td>
        </tr>
        <tr>
            <td width="20%">Status Pendaftar</td>
            <td><input Type="checkbox">  Pelajar</td>
            </tr>
            <tr>
                <td></td>
            <td><input Type="checkbox">  Mahasiswa</td>
            </tr>
            <tr>
                <td></td>
            <td><input Type="checkbox">    Karyawan</td>
        </tr>
        <td></td>
        <td><input type="submit" value="simpan"> <input type="reset" value="batal"></td>
    </table>

</form>
       
    </body>
</html>



0 Komentar