HTML Lanjutan

Tabel

Tabel dapat digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. Tag <table> digunakan untuk membuat tabel pada HTML, tag <tr> atau table row digunakan untuk membuat baris dan tag <td> atau table data digunakan untuk membuat kolom, sedangkan tag <th> atau table heading digunakan untuk membuat judul kolom.

Tabel dengan atribut border dan width

Atribut border="1" pada syntax di bawah ini digunakan untuk memberikan garis di sekitar tabel sedangkan width="40%" digunakan untuk memberikan lebar tabel sebesar 40% dari lebar layar monitor yang digunakan.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel</title>
</head>
<body>
    <p>Tabel pegawai</p>
    <table border="1" width="40%">
        <tr>
            <th>Kode</th>
            <th>Nama Pegawai</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>Muhammad</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>Nur</td>
        </tr>
        <tr>
            <td>0003</td>
            <td>Annaafi</td>
        </tr>
    </table>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar di bawah ini.

Tabel dengan atribut rowspan dan colspan

Atribut rowspan digunakan untuk menggabungkan baris, sedangkan atribut colspan digunakan untuk menggabungkan kolom. Berikut contoh penggunaan atribut rowspan dan colspan pada tabel.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel</title>
</head>
<body>
    <p>Tabel pegawai dengan atribut rowspan</p>
    <table border="1" width="100%">
        <tr>
            <th>Kode</th>
            <th>Nama Pegawai</th>
            <th>Prodi</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>Muhammad</td>
            <td rowspan="2">Manajemen Informatika</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>Nur</td>
        </tr>
    </table>

    <p>Tabel pegawai dengan atribut colspan</p>
    <table border="1" width="100%">
        <tr>
            <th>Kode</th>
            <th>Nama Pegawai</th>
            <th colspan="2">Telepon</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>Muhammad</td>
            <td>0812 345 661</td>
            <td>0812 345 662</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>Nur</td>
            <td>0812 345 671</td>
            <td>0812 345 672</td>
        </tr>
    </table>
</body>
</html>

Pada tabel pegawai dengan atribut rowspan, dimana atribut rowspan=”2”, digunakan untuk menggabungkan 2 baris. Sedangkan pada tabel pegawai dengan atribut colspan, dimana atribut colspan=”2”, digunakan untuk menggabungkan 2 kolom. Hasil syntax diatas dapat dilihat pada gambar di bawah ini.

Syntax di bawah ini menggunakan atribut rowspan dan colspan secara bersamaan. Pada kolom NPM dan Nama Mahasiswa, baris 1 dan 2 digabungkan menggunakan rowspan=”2”. Sedangkan IP Semester berada pada kolom 3, 4, 5 dan 6 yang digabungkan menggunakan colspan=”4”.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel</title>
</head>
<body>
    <p>Tabel pegawai dengan atribut rowspan dan colspan</p>
    <table border="1" width="100%">
        <tr>
            <th rowspan="2">NPM</th>
            <th rowspan="2">Nama Mahasiswa</th>
            <th colspan="4">IP Semester</th>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>Muhammad</td>
            <td>4.00</td>
            <td>4.00</td>
            <td>4.00</td>
            <td>4.00</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>Nur</td>
            <td>3.90</td>
            <td>3.90</td>
            <td>4.00</td>
            <td>4.00</td>
        </tr>
    </table>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar di bawah ini.

Tabel dengan atribut style

Selain menggunakan atribut border, width, untuk kustomisasi tampilan tabel dapat menggunakan atribut style. Atribut style dapat melakukan pengaturan seperti warna, border, dll.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel</title>
</head>
<body>
    <p>Tabel pegawai dengan atribut style</p>
    <table border="1" width="40%" style="border-collapse: collapse">
            <tr>
                <th>Kode</th>
                <th>Nama Pegawai</th>
            </tr>
            <tr>
                <td>0001</td>
                <td>Muhammad</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>Nur</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>Annaafi</td>
            </tr>
        </table>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar di bawah ini.

Hyperlink

Hyperlink atau link digunakan untuk menghubungkan satu halaman dengan halaman web lainnya. Link dapat berupa teks, atau gambar. Link ditulis menggunakan tag <a></a> dan diikuti atribut href=”alamat_tujuan”. Selain atribut href, ada juga atribut target="_blank" yang dapat digunakan untuk membuat link dengan membuka tab browser baru.

Tidak hanya halaman web yang dijadikan tujuan dari hyperlink/link, bisa juga tujuan link berupa nomor telepon. Berikut contoh penulisan syntax link.

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink</title>
</head>
<body>
    <a href="https://simponi2.mdp.ac.id">Simponi</a> 
    <a href="http://perpustakaan.mdp.ac.id" target="_blank"> Perpustakaan</a> 
    <a href="tel:+62711376400">Telp. 0711 376400</a>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar di bawah ini.

Penjelasan syntax diatas: Link Web MDP, jika diklik, akan tampil halaman web MDP di tab yang sama. Link Web Perpustakaan MDP, jika diklik, akan tampil halaman web Perpustakaan di tab baru. Link Telp. 0711 376400, jika diklik, akan diarahkan untuk menelepon nomor 0711 376400.

List

List digunakan untuk membuat daftar yang berurutan ke bawah. Ada dua jenis tampilan list, yaitu ordered list dan unordered list.

Ordered List

Ordered list digunakan untuk menampilkan daftar berurutan dalam bentuk penomoran huruf atau angka. Tag yang digunakan ordered list diawali dengan . Berikut atribut tipe untuk penomoran ordered list: type=”A”, maka penomoran menggunakan huruf besar, dimulai dari A, B, C, dst type=”a”, maka penomoran menggunakan huruf kecil, dimulai dari a, b, c, dst type=”I”, maka penomoran menggunakan angka romawai besar, dimulai dari I, II, III, dst type=”i”, maka penomoran menggunakan angka romawai kecil, dimulai dari i, ii, iii, dst type=”1”, maka penomoran menggunakan angka, dimulai dari 1, 2, 3, dst.

Penomoran ordered list secara default menggunakan type=”1”.

Contoh penulisan syntax ordered list.

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List</title>
</head>
<body>
    Perguruan Tinggi
    <ol>
        <li>AMIK MDP</li>
        <li>STMIK MDP</li>
        <li>STIE MDP</li>
    </ol>

    Program Studi AMIK MDP
    <ol type="a">
        <li>Manajemen Informatika</li>
        <li>Teknik Komputer</li>
    </ol>

    Program Studi STMIK MDP
    <ol type="i">
        <li>Sistem Informasi</li>
        <li>Teknik Informatika</li>
        <li>Komputerisasi Akuntansi</li>
    </ol>
</body>
</html>

Hasil dari syntax ordered list dapat dilihat pada gambar di bawah ini

Unordered List

Unordered list digunakan untuk menampilkan daftar berurutan dalam bentuk simbol lingkaran, atau kotak. Tag yang digunakan unordered list diawali <ul> dan diakhiri dengan </ul>

Berikut atribut tipe untuk style unordered list. type=”disc”, maka style yang digunakan butir hitam (default). type=”circle”, maka style yang digunakan butir lingkaran. type=”square”, maka style yang digunakan kotak hitam. type=”none”, maka tidak ada style yang digunakan.

Contoh penulisan syntax unordered list.

<!DOCTYPE html>
<html>
<head>
    <title>Unordered List</title>
</head>
<body>
    Perguruan Tinggi
    <ul>
        <li>AMIK MDP</li>
        <li>STMIK MDP</li>
        <li>STIE MDP</li>
    </ul>

    Program Studi AMIK MDP
    <ul type="circle">
        <li>Manajemen Informatika</li>
        <li>Teknik Komputer</li>
    </ul>

    Program Studi STMIK MDP
    <ul type="square">
        <li>Sistem Informasi</li>
        <li>Teknik Informatika</li>
        <li>Komputerisasi Akuntansi</li>
    </ul>
</body>
</html>

Hasil dari syntax unordered list dapat dilihat pada gambar di bawah ini

Gambar

Dengan adanya gambar pada halaman web membuat web menjadi lebih menarik. Tag yang digunakan untuk menampilkan gambar adalah tag <img>. Penggunaan tag <img> disertai dengan penggunaan atribut src, width, height, dan alt.

Atribut

Value

Deskripsi

src

URL gambar

Lokasi dari gambar

width

pixel

Menentukan lebar gambar

height

pixel

Menentukan tinggi gambar

alt

Teks alternatif

Teks yang ditampilkan di browser, jika gambar tidak tampil karena koneksi internet lambat, atau kesalahan atribut src.

Contoh penggunaan tag <img>:

<img src="logo-amik.png" alt="AMIK MDP">

Contoh penggunaan tag <img> dengan atribut width dan height:

<img src="logo-amik.png" alt="AMIK MDP" width="140px" height="80px">

Contoh penggunaan tag <img> dengan atribut width saja, dimana gambar akan menyesuaikan sendiri atribut height-nya:

<img src="logo-amik.png" alt="AMIK MDP" width="140px">

Contoh penggunaan tag <img> dengan atribut height saja, dimana gambar akan menyesuaikan sendiri atribut width-nya:

<img src="logo-amik.png" alt="AMIK MDP" height="80px">

Contoh penggunaan tag <img> dengan lokasi gambar di folder lain:

<img src="images/logo-stmik.png" alt="STMIK MDP" width="200px">

Contoh penggunaan tag dengan lokasi gambar di server lain:

<img src="https://saphira.id/new/assets/img/saphira-logo.jpg" alt="Logo">

Contoh penggunaan tag <img> sebagai link:

<a href="https://saphira.id" target="_blank">
    <img src="https://saphira.id/new/assets/img/saphira-logo.jpg" alt="Logo">
</a>

Contoh penggunaan tag dengan atribut style:

<img src="logo-amik.png" alt="AMIK MDP" style="width: 140px; height: 80px">

Berikut hasil dari penggunaan tag <img> yang dapat dilihat pada gambar di bawah ini.

Form

Form digunakan sebagai tempat untuk input data ke server. Tag yang digunakan untuk membuat form yaitu tag <form>. Di dalam tag <form> terdapat tag-tag yang dapat digunakan antara lain tag <input>, tag <select>, tag <textarea>, dan lain-lain

Tag <form>

Pada tag <form> terdapat atribut antara lain method, action, dan enctype. Berikut beberapa atribut yang digunakan pada tag <form>.

Atribut

Value

Deskripsi

method

POST/GET

Metode pengiriman data ke server

action

Alamat sebuah halaman

Alamat untuk memproses data input

enctype

multipart/form-data

Digunakan untuk upload file ke server

Contoh penggunaan tag <form> dan atribut:

<form action="proses.php" method="POST" enctype="multipart/form-data">
...
</form>

Tag <input>

Tag <input> memiliki banyak bentuk yang bisa digunakan untuk membuat sebuah formulir. Berikut beberapa bentuk tag <input> berdasarkan atribut.

Tag <select>

Tag <select> berupa drop-down list yang dapat digunakan pengguna untuk memilih data yang sudah disediakan. Penggunaan tag <select> diikuti tag <option> sebagai pilihannya. Tag <select> dapat digunakan untuk menampilkan list provinsi, kota/kabupaten, perguruan tinggi. Contoh penggunaan tag <select> :

<select name="provinsi">
    <option value="1">Provinsi Aceh</option>
    <option value="2">Provinsi Sumatera Utara</option>
    <option value="3">Provinsi Sumatera Selatan</option>
</select>

Tag <textarea>

Tag <textarea> memiliki fungsi yang sama seperti tag <input>. Yang membedakannya, textarea dapat diisi lebih banyak teks. Tag <textarea> dapat digunakan untuk pengisian alamat lengkap, saran. Contoh penggunaan tag <textarea> :

<textarea name="alamat" cols="30" rows="10"></textarea>

Berikut syntax formulir menggunakan tag <form>, <input>, <select>, dan <textarea>.

<!DOCTYPE html>
<html>
<head>
    <title>Formulir</title>
</head>
<body>
    <form action="proses.php" method="post">
        Nomor Pokok Mahasiswa <br>
        <input type="text" name="npm"> <br><br>
        Nama <br>
        <input type="text" name="nama"> <br><br>
        Tanggal Lahir <br>
        <input type="date" name="tanggal_lahir"> <br><br>
        Kota Lahir <br>
        <select name="kota_lahir">
            <option value="1">Palembang</option>
            <option value="2">Banyuasin</option>
            <option value="3">Musi Banyuasin</option>
        </select> <br><br>
        Jenis Kelamin <br>
        <input type="radio" name="jk" value="L"> Laki-laki 
        <input type="radio" name="jk" value="P"> Perempuan <br><br>
        Alamat <br>
        <textarea name="alamat" cols="30" rows="3"></textarea> <br><br>
        Informasi kampus MDP didapat dari <br>
        <input type="checkbox" name="ref1" value="Keluarga"> Keluarga <br>
        <input type="checkbox" name="ref2" value="Teman"> Teman <br>
        <input type="checkbox" name="ref3" value="Tv"> TV <br>
        <input type="checkbox" name="ref4" value="SocialMedia"> Social Media <br><br>
        Password <br>
        <input type="password" name="password" > <br><br>
        Foto <br>
        <input type="file" name="foto"> <br><br>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

Hasil dari syntax formulir dapat dilihat pada gambar di bawah ini.

PreviousHTML Dasar NextHTML5

Last updated 4 years ago

Was this helpful?

HTML Lanjutan

Tabel

Tabel dengan atribut border dan width

<!DOCTYPE html>
<html>
<head>
    <title>Tabel</title>
</head>
<body>
    <p>Tabel pegawai</p>
    <table border="1" width="40%">
        <tr>
            <th>Kode</th>
            <th>Nama Pegawai</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>Muhammad</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>Nur</td>
        </tr>
        <tr>
            <td>0003</td>
            <td>Annaafi</td>
        </tr>
    </table>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar di bawah ini.

Tabel dengan atribut rowspan dan colspan

Atribut rowspan digunakan untuk menggabungkan baris, sedangkan atribut colspan digunakan untuk menggabungkan kolom. Berikut contoh penggunaan atribut rowspan dan colspan pada tabel.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel</title>
</head>
<body>
    <p>Tabel pegawai dengan atribut rowspan</p>
    <table border="1" width="100%">
        <tr>
            <th>Kode</th>
            <th>Nama Pegawai</th>
            <th>Prodi</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>Muhammad</td>
            <td rowspan="2">Manajemen Informatika</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>Nur</td>
        </tr>
    </table>

    <p>Tabel pegawai dengan atribut colspan</p>
    <table border="1" width="100%">
        <tr>
            <th>Kode</th>
            <th>Nama Pegawai</th>
            <th colspan="2">Telepon</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>Muhammad</td>
            <td>0812 345 661</td>
            <td>0812 345 662</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>Nur</td>
            <td>0812 345 671</td>
            <td>0812 345 672</td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Tabel</title>
</head>
<body>
    <p>Tabel pegawai dengan atribut rowspan dan colspan</p>
    <table border="1" width="100%">
        <tr>
            <th rowspan="2">NPM</th>
            <th rowspan="2">Nama Mahasiswa</th>
            <th colspan="4">IP Semester</th>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>Muhammad</td>
            <td>4.00</td>
            <td>4.00</td>
            <td>4.00</td>
            <td>4.00</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>Nur</td>
            <td>3.90</td>
            <td>3.90</td>
            <td>4.00</td>
            <td>4.00</td>
        </tr>
    </table>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar di bawah ini.

Tabel dengan atribut style

Selain menggunakan atribut border, width, untuk kustomisasi tampilan tabel dapat menggunakan atribut style. Atribut style dapat melakukan pengaturan seperti warna, border, dll.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel</title>
</head>
<body>
    <p>Tabel pegawai dengan atribut style</p>
    <table border="1" width="40%" style="border-collapse: collapse">
            <tr>
                <th>Kode</th>
                <th>Nama Pegawai</th>
            </tr>
            <tr>
                <td>0001</td>
                <td>Muhammad</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>Nur</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>Annaafi</td>
            </tr>
        </table>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar di bawah ini.

Hyperlink

Tidak hanya halaman web yang dijadikan tujuan dari hyperlink/link, bisa juga tujuan link berupa nomor telepon. Berikut contoh penulisan syntax link.

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink</title>
</head>
<body>
    <a href="https://simponi2.mdp.ac.id">Simponi</a> 
    <a href="http://perpustakaan.mdp.ac.id" target="_blank"> Perpustakaan</a> 
    <a href="tel:+62711376400">Telp. 0711 376400</a>
</body>
</html>

Hasil dari syntax di atas dapat dilihat pada gambar di bawah ini.

List

List digunakan untuk membuat daftar yang berurutan ke bawah. Ada dua jenis tampilan list, yaitu ordered list dan unordered list.

Ordered List

Penomoran ordered list secara default menggunakan type=”1”.

Contoh penulisan syntax ordered list.

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List</title>
</head>
<body>
    Perguruan Tinggi
    <ol>
        <li>AMIK MDP</li>
        <li>STMIK MDP</li>
        <li>STIE MDP</li>
    </ol>

    Program Studi AMIK MDP
    <ol type="a">
        <li>Manajemen Informatika</li>
        <li>Teknik Komputer</li>
    </ol>

    Program Studi STMIK MDP
    <ol type="i">
        <li>Sistem Informasi</li>
        <li>Teknik Informatika</li>
        <li>Komputerisasi Akuntansi</li>
    </ol>
</body>
</html>

Hasil dari syntax ordered list dapat dilihat pada gambar di bawah ini

Unordered List

Unordered list digunakan untuk menampilkan daftar berurutan dalam bentuk simbol lingkaran, atau kotak. Tag yang digunakan unordered list diawali <ul> dan diakhiri dengan </ul>

Contoh penulisan syntax unordered list.

<!DOCTYPE html>
<html>
<head>
    <title>Unordered List</title>
</head>
<body>
    Perguruan Tinggi
    <ul>
        <li>AMIK MDP</li>
        <li>STMIK MDP</li>
        <li>STIE MDP</li>
    </ul>

    Program Studi AMIK MDP
    <ul type="circle">
        <li>Manajemen Informatika</li>
        <li>Teknik Komputer</li>
    </ul>

    Program Studi STMIK MDP
    <ul type="square">
        <li>Sistem Informasi</li>
        <li>Teknik Informatika</li>
        <li>Komputerisasi Akuntansi</li>
    </ul>
</body>
</html>

Hasil dari syntax unordered list dapat dilihat pada gambar di bawah ini

Gambar

Atribut

Value

Deskripsi

src

URL gambar

Lokasi dari gambar

width

pixel

Menentukan lebar gambar

height

pixel

Menentukan tinggi gambar

alt

Teks alternatif

Teks yang ditampilkan di browser, jika gambar tidak tampil karena koneksi internet lambat, atau kesalahan atribut src.

Contoh penggunaan tag <img>:

<img src="logo-amik.png" alt="AMIK MDP">

Contoh penggunaan tag <img> dengan atribut width dan height:

<img src="logo-amik.png" alt="AMIK MDP" width="140px" height="80px">

Contoh penggunaan tag <img> dengan atribut width saja, dimana gambar akan menyesuaikan sendiri atribut height-nya:

<img src="logo-amik.png" alt="AMIK MDP" width="140px">

Contoh penggunaan tag <img> dengan atribut height saja, dimana gambar akan menyesuaikan sendiri atribut width-nya:

<img src="logo-amik.png" alt="AMIK MDP" height="80px">

Contoh penggunaan tag <img> dengan lokasi gambar di folder lain:

<img src="images/logo-stmik.png" alt="STMIK MDP" width="200px">

Contoh penggunaan tag dengan lokasi gambar di server lain:

<img src="https://saphira.id/new/assets/img/saphira-logo.jpg" alt="Logo">

Contoh penggunaan tag <img> sebagai link:

<a href="https://saphira.id" target="_blank">
    <img src="https://saphira.id/new/assets/img/saphira-logo.jpg" alt="Logo">
</a>

Contoh penggunaan tag dengan atribut style:

<img src="logo-amik.png" alt="AMIK MDP" style="width: 140px; height: 80px">

Berikut hasil dari penggunaan tag <img> yang dapat dilihat pada gambar di bawah ini.

Form

Tag <form>

Pada tag <form> terdapat atribut antara lain method, action, dan enctype. Berikut beberapa atribut yang digunakan pada tag <form>.

Atribut

Value

Deskripsi

method

POST/GET

Metode pengiriman data ke server

action

Alamat sebuah halaman

Alamat untuk memproses data input

enctype

multipart/form-data

Digunakan untuk upload file ke server

Contoh penggunaan tag <form> dan atribut:

<form action="proses.php" method="POST" enctype="multipart/form-data">
...
</form>

Tag <input>

Tag <input> memiliki banyak bentuk yang bisa digunakan untuk membuat sebuah formulir. Berikut beberapa bentuk tag <input> berdasarkan atribut.

Tag <select>

<select name="provinsi">
    <option value="1">Provinsi Aceh</option>
    <option value="2">Provinsi Sumatera Utara</option>
    <option value="3">Provinsi Sumatera Selatan</option>
</select>

Tag <textarea>

<textarea name="alamat" cols="30" rows="10"></textarea>

Berikut syntax formulir menggunakan tag <form>, <input>, <select>, dan <textarea>.

<!DOCTYPE html>
<html>
<head>
    <title>Formulir</title>
</head>
<body>
    <form action="proses.php" method="post">
        Nomor Pokok Mahasiswa <br>
        <input type="text" name="npm"> <br><br>
        Nama <br>
        <input type="text" name="nama"> <br><br>
        Tanggal Lahir <br>
        <input type="date" name="tanggal_lahir"> <br><br>
        Kota Lahir <br>
        <select name="kota_lahir">
            <option value="1">Palembang</option>
            <option value="2">Banyuasin</option>
            <option value="3">Musi Banyuasin</option>
        </select> <br><br>
        Jenis Kelamin <br>
        <input type="radio" name="jk" value="L"> Laki-laki 
        <input type="radio" name="jk" value="P"> Perempuan <br><br>
        Alamat <br>
        <textarea name="alamat" cols="30" rows="3"></textarea> <br><br>
        Informasi kampus MDP didapat dari <br>
        <input type="checkbox" name="ref1" value="Keluarga"> Keluarga <br>
        <input type="checkbox" name="ref2" value="Teman"> Teman <br>
        <input type="checkbox" name="ref3" value="Tv"> TV <br>
        <input type="checkbox" name="ref4" value="SocialMedia"> Social Media <br><br>
        Password <br>
        <input type="password" name="password" > <br><br>
        Foto <br>
        <input type="file" name="foto"> <br><br>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

Hasil dari syntax formulir dapat dilihat pada gambar di bawah ini.

PreviousHTML Dasar NextHTML5

Last updated 4 years ago

Was this helpful?