Mendalami Tag dan Elemen HTML Dasar – Bagian 2

Published by Fazry on

Artikel sebelumnya https://rumahcoding.co.id/mendalami-tag-dan-elemen-html-dasar-bagian-1/

Daftar Isi

5. Tautan dan Gambar

Tag <a> untuk Membuat Tautan

Hyperlink atau tautan adalah salah satu elemen paling penting dalam HTML yang memungkinkan pengguna untuk berpindah dari satu halaman web ke halaman web lainnya atau ke bagian tertentu dari halaman yang sama. Tag yang digunakan untuk membuat hyperlink adalah tag <a> (singkatan dari “anchor”). Berikut adalah beberapa atribut penting yang sering digunakan dengan tag <a>:

  1. Atribut href
  • Penjelasan: Atribut href (hypertext reference) adalah atribut yang menentukan URL tujuan dari tautan. Atribut ini wajib ada dalam tag <a>. URL yang dimasukkan ke dalam atribut href dapat berupa URL absolut (alamat lengkap termasuk protokol seperti http:// atau https://) atau URL relatif (alamat yang relatif terhadap lokasi halaman saat ini).
  • Contoh Penggunaan:
    html <a href="https://www.example.com">Kunjungi Example.com</a>
  • Output: Kunjungi Example.com
  1. Atribut target
  • Penjelasan: Atribut target menentukan di mana dokumen yang terhubung akan dibuka. Nilai yang paling umum digunakan adalah _blank, yang membuka tautan di tab atau jendela baru.
  • Contoh Penggunaan:
    html <a href="https://www.example.com" target="_blank">Buka di Tab Baru</a>
  • Output: Buka di Tab Baru
  • Nilai Lain yang Umum Digunakan:
    • _self: Membuka tautan di frame atau jendela yang sama (nilai default).
    • _parent: Membuka tautan di frame induk.
    • _top: Membuka tautan di seluruh jendela (menghapus semua frame).
  1. Atribut title
  • Penjelasan: Atribut title memberikan informasi tambahan tentang tautan. Informasi ini muncul sebagai tooltip ketika pengguna mengarahkan kursor ke tautan.
  • Contoh Penggunaan:
    html <a href="https://www.example.com" title="Kunjungi situs Example.com untuk informasi lebih lanjut">Example.com</a>
  • Output: Example.com (dengan tooltip: “Kunjungi situs Example.com untuk informasi lebih lanjut”)

Penggunaan Tag <a> untuk Berbagai Keperluan

  1. Tautan ke Halaman Eksternal
  • Penjelasan: Menghubungkan ke situs atau halaman lain di internet. Pastikan URL yang dimasukkan lengkap dengan protokol http:// atau https://.
  • Contoh Penggunaan:
    html <a href="https://www.google.com">Google</a>
  1. Tautan ke Halaman Internal
  • Penjelasan: Menghubungkan ke halaman lain di dalam situs web yang sama. URL relatif biasanya digunakan untuk ini.
  • Contoh Penggunaan:
    html <a href="/about.html">Tentang Kami</a>
  1. Tautan ke Bagian Tertentu dari Halaman yang Sama
  • Penjelasan: Menghubungkan ke bagian tertentu dalam halaman yang sama menggunakan ID elemen sebagai target.
  • Contoh Penggunaan:
    html <a href="#section1">Ke Bagian 1</a> ... ¨K5K
  1. Tautan Email
  • Penjelasan: Membuka klien email dengan alamat email tujuan yang telah diisi.
  • Contoh Penggunaan:
    html <a href="mailto:[email protected]">Kirim Email</a>

Contoh Implementasi

Berikut adalah contoh yang lebih komprehensif yang menunjukkan berbagai penggunaan tag <a>:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Tautan</title>
</head>
<body>
    <h1>Contoh Tautan dalam HTML</h1>
    <p>
        Kunjungi <a href="https://www.example.com" title="Kunjungi Example.com" target="_blank">Example.com</a> untuk informasi lebih lanjut.
    </p>
    <p>
        Untuk mengetahui lebih banyak tentang kami, klik <a href="/about.html">di sini</a>.
    </p>
    <p>
        <a href="#section1">Lompat ke Bagian 1</a> dalam halaman ini.
    </p>
    <p>
        <a href="mailto:[email protected]">Kirim Email</a> kepada kami.
    </p>
    <h2 id="section1">Bagian 1</h2>
    <p>Ini adalah bagian pertama dari halaman.</p>
</body>
</html>Code language: HTML, XML (xml)

Kesimpulan

Tag <a> adalah alat yang sangat serbaguna dalam HTML yang memungkinkan pembuatan tautan ke berbagai tujuan. Dengan memahami dan menggunakan atribut href, target, dan title, Anda dapat membuat tautan yang efektif dan user-friendly. Tautan adalah komponen fundamental yang membuat web terhubung secara dinamis, memungkinkan navigasi yang mudah dan akses ke informasi yang luas.

Gambar

Tag <img> untuk Menyisipkan Gambar

Gambar adalah elemen penting dalam desain web yang digunakan untuk mempercantik tampilan, memberikan informasi visual, dan meningkatkan keterlibatan pengguna. Dalam HTML, tag <img> digunakan untuk menyisipkan gambar ke dalam halaman web. Tag <img> adalah tag kosong (self-closing tag), yang berarti tidak memiliki penutup dan semua informasinya diberikan melalui atribut.

  1. Atribut src
  • Penjelasan: Atribut src (source) menentukan URL dari gambar yang ingin ditampilkan. URL ini bisa berupa URL absolut atau relatif.
  • Contoh Penggunaan:
    html <img src="https://www.example.com/image.jpg" alt="Deskripsi gambar">
  • Output: Menampilkan gambar dari URL yang diberikan.
  1. Atribut alt
  • Penjelasan: Atribut alt (alternative text) menyediakan teks alternatif yang ditampilkan jika gambar tidak bisa dimuat. Atribut ini juga penting untuk aksesibilitas, karena pembaca layar menggunakan teks alternatif untuk mendeskripsikan gambar kepada pengguna yang memiliki gangguan penglihatan.
  • Contoh Penggunaan:
    html <img src="https://www.example.com/image.jpg" alt="Gambar pemandangan alam">
  • Output: Menampilkan “Gambar pemandangan alam” jika gambar tidak bisa dimuat.
  1. Atribut width dan height
  • Penjelasan: Atribut width dan height digunakan untuk mengatur lebar dan tinggi gambar. Nilai atribut ini bisa berupa piksel atau persentase dari elemen induknya. Penting untuk mempertahankan rasio aspek gambar untuk menghindari distorsi.
  • Contoh Penggunaan:
    html <img src="https://www.example.com/image.jpg" alt="Gambar pemandangan alam" width="600" height="400">
  • Output: Menampilkan gambar dengan lebar 600 piksel dan tinggi 400 piksel.

Penggunaan Tag <img> untuk Berbagai Keperluan

  1. Menampilkan Gambar dari URL Eksternal
  • Penjelasan: Menyisipkan gambar dari sumber eksternal dengan URL absolut.
  • Contoh Penggunaan:
    html <img src="https://www.example.com/image.jpg" alt="Gambar pemandangan">
  1. Menampilkan Gambar dari Sumber Lokal
  • Penjelasan: Menyisipkan gambar yang berada di server lokal menggunakan URL relatif.
  • Contoh Penggunaan:
    html <img src="/images/local-image.jpg" alt="Gambar lokal">
  1. Menyesuaikan Ukuran Gambar
  • Penjelasan: Mengatur lebar dan tinggi gambar sesuai kebutuhan desain, dengan tetap mempertahankan rasio aspek.
  • Contoh Penggunaan:
    html <img src="https://www.example.com/image.jpg" alt="Gambar pemandangan" width="50%">

Contoh Implementasi

Berikut adalah contoh yang lebih komprehensif yang menunjukkan berbagai penggunaan tag <img>:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Gambar dalam HTML</title>
</head>
<body>
    <h1>Contoh Penggunaan Tag `<img>`</h1>
    <p>
        Gambar dari URL eksternal:
        <img src="https://www.example.com/image.jpg" alt="Gambar pemandangan" width="600" height="400">
    </p>
    <p>
        Gambar dari sumber lokal:
        <img src="/images/local-image.jpg" alt="Gambar lokal">
    </p>
    <p>
        Gambar dengan ukuran yang disesuaikan:
        <img src="https://www.example.com/image.jpg" alt="Gambar pemandangan" width="50%">
    </p>
</body>
</html>Code language: HTML, XML (xml)

Kesimpulan

Tag <img> adalah alat yang sangat penting dalam HTML untuk menyisipkan gambar ke dalam halaman web. Dengan menggunakan atribut src, alt, width, dan height, Anda dapat mengontrol sumber, deskripsi alternatif, dan ukuran gambar yang ditampilkan. Menggunakan gambar dengan cara yang benar tidak hanya memperindah tampilan web tetapi juga meningkatkan aksesibilitas dan pengalaman pengguna secara keseluruhan. Dengan memahami cara menggunakan tag <img>, Anda dapat menyajikan konten visual yang menarik dan informatif dalam proyek web Anda.

6. Elemen Multimedia

Audio

Penggunaan Tag <audio> untuk Menyisipkan Audio

HTML5 menyediakan berbagai elemen untuk menyematkan multimedia ke dalam halaman web, salah satunya adalah elemen <audio> yang digunakan untuk menyisipkan audio. Elemen ini memungkinkan Anda untuk memutar file audio di browser tanpa memerlukan plugin tambahan, membuatnya sangat berguna untuk memperkaya konten web dengan pengalaman audio.

  1. Tag <audio>
  • Penjelasan: Elemen <audio> digunakan untuk menyematkan konten audio. Elemen ini tidak menampilkan konten apapun kecuali diisi dengan atribut atau elemen anak yang sesuai.
  • Contoh Penggunaan:
    html ¨K4K
  1. Atribut controls
  • Penjelasan: Atribut controls menambahkan kontrol pemutaran audio (play, pause, volume) pada elemen <audio>. Ini adalah atribut boolean, yang berarti cukup dituliskan saja tanpa nilai.
  • Contoh Penggunaan:
    html ¨K5K
  • Output: Menampilkan kontrol pemutaran di browser.
  1. Atribut src
  • Penjelasan: Atribut src menentukan sumber file audio yang akan diputar. URL yang diberikan bisa berupa URL absolut atau relatif.
  • Contoh Penggunaan:
    html ¨K6K
  • Output: Memutar file audio yang terletak di URL yang diberikan.
  1. Atribut type
  • Penjelasan: Atribut type digunakan untuk menentukan jenis MIME dari file audio. Ini membantu browser untuk mengenali dan memproses file dengan benar.
  • Contoh Penggunaan:
    html ¨K7K
  • Output: Memutar file audio dengan tipe MIME “audio/mpeg”.

Penggunaan Tag <audio> dengan Multiple Source

Seringkali, untuk memastikan kompatibilitas dengan berbagai browser, Anda mungkin perlu menyediakan beberapa sumber audio dengan format yang berbeda. Ini dilakukan dengan menggunakan beberapa elemen <source> di dalam elemen <audio>.

  1. Multiple Source
  • Penjelasan: Memberikan beberapa elemen <source> memungkinkan browser untuk memilih dan memutar file audio yang didukung.
  • Contoh Penggunaan:
    html ¨K8K
  • Output: Memutar file audio dengan format yang didukung oleh browser, baik “audio/mpeg” atau “audio/ogg”.

Contoh Implementasi

Berikut adalah contoh yang menunjukkan penggunaan elemen <audio> dengan kontrol, sumber tunggal, dan multiple source:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Audio dalam HTML</title>
</head>
<body>
    <h1>Contoh Penggunaan Tag `<audio>`</h1>
    <p>Memutar file audio dengan kontrol:</p>
    <audio controls src="audio-file.mp3"></audio>

    <p>Memutar file audio dengan beberapa sumber:</p>
    <audio controls>
        <source src="audio-file.mp3" type="audio/mpeg">
        <source src="audio-file.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</body>
</html>Code language: HTML, XML (xml)

Kesimpulan

Tag <audio> dalam HTML5 adalah alat yang kuat untuk menyematkan audio ke dalam halaman web. Dengan atribut controls, src, dan type, Anda dapat menyediakan pengalaman audio yang kaya dan interaktif kepada pengguna tanpa memerlukan plugin tambahan. Menyediakan multiple source memastikan bahwa audio dapat diputar di berbagai browser, meningkatkan kompatibilitas dan aksesibilitas konten. Memahami dan menggunakan elemen <audio> dengan benar dapat memperkaya situs web Anda dengan elemen multimedia yang menarik dan bermanfaat.

Video

Penggunaan Tag <video> untuk Menyisipkan Video

HTML5 menyediakan elemen <video> untuk menyisipkan video ke dalam halaman web, memberikan kemampuan kepada pengembang untuk memutar video langsung di browser tanpa memerlukan plugin tambahan seperti Flash. Elemen ini mendukung berbagai atribut dan elemen anak yang memungkinkan kontrol penuh atas bagaimana video ditampilkan dan diputar.

  1. Tag <video>
  • Penjelasan: Elemen <video> digunakan untuk menyisipkan dan memutar video. Seperti elemen <audio>, elemen ini dapat menampilkan kontrol pemutaran jika atribut yang sesuai ditambahkan.
  • Contoh Penggunaan:
    html ¨K4K
  1. Atribut controls
  • Penjelasan: Atribut controls menambahkan kontrol pemutaran video (play, pause, volume, fullscreen) pada elemen <video>. Ini adalah atribut boolean yang cukup dituliskan tanpa nilai.
  • Contoh Penggunaan:
    html ¨K5K
  • Output: Menampilkan kontrol pemutaran di browser.
  1. Atribut src
  • Penjelasan: Atribut src menentukan sumber file video yang akan diputar. URL yang diberikan bisa berupa URL absolut atau relatif.
  • Contoh Penggunaan:
    html ¨K6K
  • Output: Memutar file video yang terletak di URL yang diberikan.
  1. Atribut type
  • Penjelasan: Atribut type digunakan untuk menentukan jenis MIME dari file video. Ini membantu browser mengenali dan memproses file dengan benar.
  • Contoh Penggunaan:
    html ¨K7K
  • Output: Memutar file video dengan tipe MIME “video/mp4”.
  1. Atribut poster
  • Penjelasan: Atribut poster digunakan untuk menentukan gambar yang akan ditampilkan sebelum video mulai diputar. Ini berguna untuk memberikan pratinjau atau gambar thumbnail video.
  • Contoh Penggunaan:
    html ¨K8K
  • Output: Menampilkan gambar dari poster-image.jpg sebelum video mulai diputar.

Penggunaan Tag <video> dengan Multiple Source

Seperti elemen <audio>, elemen <video> juga dapat menggunakan beberapa elemen <source> untuk menyediakan berbagai format video. Hal ini memastikan bahwa video dapat diputar di berbagai browser dengan format yang berbeda.

  1. Multiple Source
  • Penjelasan: Memberikan beberapa elemen <source> memungkinkan browser untuk memilih dan memutar file video yang didukung.
  • Contoh Penggunaan:
    html ¨K9K
  • Output: Memutar file video dengan format yang didukung oleh browser, baik “video/mp4” atau “video/ogg”.

Contoh Implementasi

Berikut adalah contoh yang menunjukkan penggunaan elemen <video> dengan kontrol, sumber tunggal, multiple source, dan atribut poster:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Video dalam HTML</title>
</head>
<body>
    <h1>Contoh Penggunaan Tag `<video>`</h1>

    <p>Memutar file video dengan kontrol:</p>
    <video controls src="video-file.mp4"></video>

    <p>Memutar file video dengan beberapa sumber dan gambar poster:</p>
    <video controls poster="poster-image.jpg">
        <source src="video-file.mp4" type="video/mp4">
        <source src="video-file.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
</body>
</html>Code language: HTML, XML (xml)

Kesimpulan

Tag <video> dalam HTML5 adalah alat yang sangat berguna untuk menyematkan video di halaman web. Dengan atribut controls, src, type, dan poster, pengembang dapat memberikan pengalaman menonton video yang kaya dan interaktif kepada pengguna tanpa memerlukan plugin tambahan. Menyediakan multiple source memastikan bahwa video dapat diputar di berbagai browser, meningkatkan kompatibilitas dan aksesibilitas konten. Memahami dan menggunakan elemen <video> dengan benar dapat memperkaya situs web Anda dengan elemen multimedia yang menarik dan bermanfaat.

7. Tabel

Membuat Tabel

Penggunaan Tag <table> untuk Membuat Tabel

Tabel dalam HTML digunakan untuk menyusun data dalam format baris dan kolom. Ini sangat berguna untuk menampilkan informasi yang terstruktur dengan rapi, seperti data statistik, jadwal, atau informasi kontak. Elemen-elemen dasar dalam pembuatan tabel termasuk <table>, <tr>, <td>, dan <th>.

  1. Tag <table>
  • Penjelasan: Tag <table> digunakan sebagai pembungkus utama yang menandakan awal dan akhir tabel. Semua elemen tabel lainnya seperti baris dan sel berada di dalam tag ini.
  • Contoh Penggunaan:
    html ¨K4K
  • Output: Menampilkan struktur dasar tabel tanpa konten.
  1. Tag <tr>
  • Penjelasan: Tag <tr> digunakan untuk mendefinisikan baris dalam tabel. Setiap baris tabel dibuat dengan menggunakan tag ini.
  • Contoh Penggunaan:
    html ¨K5K
  • Output: Menampilkan baris tabel kosong.
  1. Tag <td>
  • Penjelasan: Tag <td> digunakan untuk mendefinisikan sel dalam baris tabel. Singkatan dari “table data”, tag ini berfungsi sebagai wadah untuk data yang ingin ditampilkan dalam tabel.
  • Contoh Penggunaan:
    html ¨K6K
  • Output: Menampilkan baris dengan dua sel berisi “Data 1” dan “Data 2”.
  1. Tag <th>
  • Penjelasan: Tag <th> digunakan untuk mendefinisikan sel header dalam tabel. Biasanya, sel ini muncul di bagian atas tabel atau sebagai header kolom. Secara default, teks di dalam <th> dicetak tebal dan ditengah-tengah.
  • Contoh Penggunaan:
    html ¨K7K
  • Output: Menampilkan baris header dengan dua sel berisi “Header 1” dan “Header 2”, diikuti oleh baris data.
  1. Atribut border
  • Penjelasan: Atribut border digunakan untuk menambahkan garis batas pada tabel. Nilai numerik dari atribut ini menentukan ketebalan garis dalam piksel.
  • Contoh Penggunaan:
    html ¨K8K
  • Output: Menampilkan tabel dengan garis batas setebal 1 piksel.

Contoh Implementasi

Berikut adalah contoh lengkap yang menunjukkan cara membuat tabel menggunakan elemen-elemen dasar dan atribut border:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Tabel dalam HTML</title>
</head>
<body>
    <h1>Contoh Tabel dengan Border</h1>

    <table border="1">
        <tr>
            <th>Nama</th>
            <th>Usia</th>
            <th>Kota</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Bandung</td>
        </tr>
    </table>
</body>
</html>Code language: HTML, XML (xml)

Penjelasan Contoh

  1. Struktur Tabel: Tag <table> membungkus seluruh tabel, menandakan bahwa elemen-elemen di dalamnya adalah bagian dari tabel tersebut.
  2. Baris Header: Tag <tr> pertama berisi tag <th> yang mendefinisikan header kolom “Nama”, “Usia”, dan “Kota”.
  3. Baris Data: Dua tag <tr> berikutnya masing-masing berisi tiga tag <td>, yang menyimpan data individual dalam baris tersebut.
  4. Atribut Border: Atribut border="1" pada tag <table> menambahkan garis batas setebal 1 piksel di sekitar sel tabel.

Kesimpulan

Memahami cara membuat tabel dalam HTML adalah dasar penting dalam pengembangan web, terutama saat menampilkan data terstruktur. Dengan menggunakan tag <table>, <tr>, <td>, <th>, dan atribut border, pengembang dapat membuat tabel yang rapi dan mudah dibaca. Penggunaan tabel yang tepat dapat meningkatkan penyajian data dan pengalaman pengguna di situs web Anda.

Pengaturan Tampilan Tabel

Penggunaan Atribut colspan dan rowspan

Atribut colspan dan rowspan dalam elemen tabel HTML digunakan untuk mengatur tata letak tampilan tabel dengan cara menggabungkan beberapa kolom atau baris menjadi satu sel. Ini sangat berguna untuk membuat header tabel yang mencakup beberapa kolom atau sel yang mencakup beberapa baris, sehingga dapat meningkatkan keterbacaan dan struktur tabel.

  1. Atribut colspan
  • Penjelasan: Atribut colspan digunakan untuk menggabungkan beberapa kolom dalam satu sel. Nilai dari atribut ini menentukan jumlah kolom yang akan digabung.
  • Contoh Penggunaan:
    html ¨K3K
  • Output: Menampilkan tabel dengan baris header pertama yang mencakup dua kolom. “Header Gabungan” akan melintasi dua kolom.
  1. Atribut rowspan
  • Penjelasan: Atribut rowspan digunakan untuk menggabungkan beberapa baris dalam satu sel. Nilai dari atribut ini menentukan jumlah baris yang akan digabung.
  • Contoh Penggunaan:
    html ¨K4K
  • Output: Menampilkan tabel dengan sel “Header Vertikal” yang mencakup dua baris pertama di kolom pertama.

Contoh Implementasi

Berikut adalah contoh lengkap yang menggabungkan penggunaan colspan dan rowspan untuk menciptakan tampilan tabel yang lebih kompleks dan terstruktur:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Tabel dengan colspan dan rowspan</title>
</head>
<body>
    <h1>Contoh Penggunaan colspan dan rowspan dalam Tabel</h1>

    <table border="1">
        <tr>
            <th colspan="3">Header Gabungan 3 Kolom</th>
        </tr>
        <tr>
            <th rowspan="2">Header Vertikal</th>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
        <tr>
            <td colspan="2">Data Gabungan</td>
            <td>Data 5</td>
        </tr>
    </table>
</body>
</html>Code language: HTML, XML (xml)

Penjelasan Contoh

  1. Header Gabungan: Baris pertama menggunakan colspan="3" pada elemen <th>, menggabungkan tiga kolom menjadi satu sel yang mencakup keseluruhan lebar tabel.
  2. Header Vertikal: Baris kedua menggunakan rowspan="2" pada elemen <th>, menggabungkan dua baris vertikal sehingga sel header ini mencakup dua baris berturut-turut di kolom pertama.
  3. Data Gabungan: Baris terakhir menggunakan colspan="2" pada elemen <td>, menggabungkan dua kolom menjadi satu sel untuk data gabungan, dengan sel berikutnya berisi “Data 5”.

Kesimpulan

Penggunaan atribut colspan dan rowspan dalam tabel HTML memungkinkan pengembang web untuk mengatur tampilan tabel dengan lebih fleksibel dan rapi. Dengan menggabungkan beberapa kolom atau baris, tabel dapat disusun sedemikian rupa untuk meningkatkan keterbacaan dan presentasi data. Menguasai teknik ini sangat penting bagi pengembang web untuk menciptakan tampilan tabel yang profesional dan informatif.

8. Formulir (Forms)

Membuat Formulir

Tag <form>, Atribut action, method

Formulir atau forms dalam HTML adalah salah satu elemen penting yang digunakan untuk mengumpulkan data dari pengguna. Dengan menggunakan elemen <form>, pengembang web dapat membuat berbagai jenis input untuk mengumpulkan informasi yang diperlukan, seperti teks, pilihan, dan tombol. Elemen ini merupakan dasar dari interaksi pengguna dengan aplikasi web, terutama dalam konteks pengiriman data ke server.

  1. Tag <form>
  • Penjelasan: Tag <form> adalah elemen pembungkus yang digunakan untuk mendefinisikan formulir HTML. Semua elemen input, seperti <input>, <textarea>, <select>, dan tombol <button>, harus ditempatkan di dalam tag <form>.
  • Contoh Dasar:
    html ¨K4K
  1. Atribut action
  • Penjelasan: Atribut action digunakan untuk menentukan URL tempat data formulir akan dikirimkan setelah pengguna mengklik tombol submit. URL ini bisa berupa halaman lain di situs web yang sama atau URL ke server API yang akan memproses data formulir.
  • Contoh Penggunaan:
    html ¨K5K
  1. Atribut method
  • Penjelasan: Atribut method menentukan metode HTTP yang akan digunakan saat mengirimkan data formulir. Metode yang paling umum adalah GET dan POST.
    • GET: Mengirim data formulir sebagai bagian dari URL. Cocok untuk permintaan yang tidak mengubah data di server, seperti pencarian.
    • POST: Mengirim data formulir sebagai bagian dari body permintaan HTTP. Cocok untuk permintaan yang mengubah atau memperbarui data di server, seperti pendaftaran atau pengiriman komentar.
  • Contoh Penggunaan:
    html ¨K7K

Contoh Implementasi Formulir Sederhana

Berikut adalah contoh formulir sederhana yang menggunakan atribut action dan method untuk mengumpulkan data pengguna dan mengirimkannya ke server.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Formulir Sederhana</title>
</head>
<body>
    <h1>Formulir Kontak</h1>
    <form action="/submit_contact" method="post">
        <label for="name">Nama:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="message">Pesan:</label><br>
        <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>

        <button type="submit">Kirim</button>
    </form>
</body>
</html>Code language: HTML, XML (xml)

Penjelasan Contoh

  1. Tag <form>: Formulir ini dibungkus oleh tag <form> yang memiliki atribut action dan method.
  2. Atribut action: Atribut ini diatur ke /submit_contact, yang menunjukkan URL tempat data akan dikirim.
  3. Atribut method: Atribut ini diatur ke post, yang menunjukkan bahwa data akan dikirim menggunakan metode HTTP POST.
  4. Elemen Input:
  • Nama: Menggunakan tag <input> dengan type="text" untuk memasukkan nama pengguna.
  • Email: Menggunakan tag <input> dengan type="email" untuk memasukkan alamat email pengguna.
  • Pesan: Menggunakan tag <textarea> untuk memasukkan pesan yang lebih panjang dari pengguna.
  • Tombol Kirim: Menggunakan tag <button> dengan type="submit" untuk mengirimkan formulir.

Dengan memahami tag <form> beserta atribut action dan method, pengembang web dapat membuat formulir interaktif yang efektif untuk mengumpulkan dan mengirim data pengguna ke server. Formulir yang baik adalah kunci dalam berbagai aplikasi web, dari pendaftaran pengguna hingga pengumpulan umpan balik dan pemrosesan pesanan.

Input Fields

Tag <input>, Jenis-Jenis Input (text, password, email, dll.)

Formulir dalam HTML menggunakan berbagai jenis elemen input untuk mengumpulkan data dari pengguna. Tag <input> adalah salah satu elemen yang paling serbaguna dalam HTML, dengan berbagai tipe yang memungkinkan pengembang web untuk mengumpulkan berbagai jenis informasi. Berikut ini adalah beberapa jenis elemen input yang umum digunakan beserta penjelasan dan contohnya.

  1. Input Teks (text)
  • Penjelasan: Elemen input dengan type="text" digunakan untuk menerima teks biasa dari pengguna. Ini adalah jenis input yang paling umum digunakan untuk data seperti nama, alamat, atau informasi lain yang bersifat umum.
  • Contoh:
    html <label for="username">Username:</label> <input type="text" id="username" name="username">
  1. Input Kata Sandi (password)
  • Penjelasan: Elemen input dengan type="password" digunakan untuk menerima kata sandi. Teks yang dimasukkan oleh pengguna tidak akan ditampilkan di layar untuk menjaga kerahasiaan.
  • Contoh:
    html <label for="password">Password:</label> <input type="password" id="password" name="password">
  1. Input Email (email)
  • Penjelasan: Elemen input dengan type="email" digunakan untuk menerima alamat email. Browser modern akan melakukan validasi sederhana untuk memastikan format email yang dimasukkan benar.
  • Contoh:
    html <label for="email">Email:</label> <input type="email" id="email" name="email">
  1. Input Nomor (number)
  • Penjelasan: Elemen input dengan type="number" digunakan untuk menerima angka. Input ini biasanya memiliki panah atas dan bawah untuk meningkatkan atau menurunkan nilai secara langsung.
  • Contoh:
    html <label for="age">Age:</label> <input type="number" id="age" name="age" min="0" max="120">
  1. Input Tanggal (date)
  • Penjelasan: Elemen input dengan type="date" digunakan untuk menerima tanggal. Browser modern menyediakan kontrol tanggal yang memudahkan pengguna untuk memilih tanggal dari kalender.
  • Contoh:
    html <label for="birthdate">Birthdate:</label> <input type="date" id="birthdate" name="birthdate">
  1. Input Radio (radio)
  • Penjelasan: Elemen input dengan type="radio" digunakan untuk memilih satu opsi dari sekumpulan opsi. Biasanya digunakan dalam grup, dan hanya satu dari opsi yang dapat dipilih.
  • Contoh:
    html ¨K4K <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label>
  1. Input Kotak Centang (checkbox)
  • Penjelasan: Elemen input dengan type="checkbox" digunakan untuk memilih satu atau lebih opsi dari sekumpulan opsi. Tidak seperti radio, beberapa kotak centang dapat dipilih secara bersamaan.
  • Contoh:
    html ¨K5K <input type="checkbox" id="reading" name="hobbies" value="reading"> <label for="reading">Reading</label><br> <input type="checkbox" id="traveling" name="hobbies" value="traveling"> <label for="traveling">Traveling</label><br> <input type="checkbox" id="coding" name="hobbies" value="coding"> <label for="coding">Coding</label>
  1. Input Tombol (button, submit, reset)
  • Penjelasan: Elemen input dengan type="button" digunakan untuk membuat tombol yang dapat diprogram. type="submit" digunakan untuk mengirimkan formulir, dan type="reset" digunakan untuk mereset semua input di formulir.
  • Contoh:
    html <button type="submit">Submit</button> <button type="reset">Reset</button>

Contoh Implementasi Formulir dengan Berbagai Jenis Input

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Formulir Contoh</title>
</head>
<body>
    <h1>Formulir Pendaftaran</h1>
    <form action="/submit_registration" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="0" max="120"><br><br>

        <label for="birthdate">Birthdate:</label>
        <input type="date" id="birthdate" name="birthdate"><br><br>

        <p>Gender:</p>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br><br>

        <p>Hobbies:</p>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">Reading</label><br>
        <input type="checkbox" id="traveling" name="hobbies" value="traveling">
        <label for="traveling">Traveling</label><br>
        <input type="checkbox" id="coding" name="hobbies" value="coding">
        <label for="coding">Coding</label><br><br>

        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </form>
</body>
</html>Code language: HTML, XML (xml)

Penjelasan Contoh

  1. Teks (Username): Elemen input teks untuk nama pengguna.
  2. Kata Sandi (Password): Elemen input kata sandi untuk keamanan.
  3. Email (Email): Elemen input email untuk mengumpulkan alamat email pengguna.
  4. Nomor (Age): Elemen input angka untuk usia pengguna.
  5. Tanggal (Birthdate): Elemen input tanggal untuk tanggal lahir pengguna.
  6. Radio (Gender): Grup elemen radio untuk memilih jenis kelamin.
  7. Kotak Centang (Hobbies): Sekumpulan kotak centang untuk memilih hobi.
  8. Tombol (Submit dan Reset): Tombol untuk mengirim atau mereset formulir.

Dengan memahami berbagai jenis elemen input, pengembang web dapat membuat formulir yang sesuai dengan kebutuhan aplikasi, memastikan data yang dikumpulkan relevan dan berguna. Formulir yang dirancang dengan baik akan meningkatkan interaksi pengguna dan efisiensi pengumpulan data.

Categories: Dasar PemrogramanHTML
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Related Posts

Mendalami Tag dan Elemen HTML Dasar
Dasar Pemrograman

Mendalami Tag dan Elemen HTML Dasar – Bagian 1

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan merancang halaman web. Fungsi utama HTML adalah untuk menentukan struktur konten di internet, memungkinkan penempatan teks, gambar, video, tautan, dan elemen multimedia lainnya dalam tata letak yang terorganisir.

Pengantar HTML Memahami Struktur Dasar Dokumen Web
HTML

Pengantar HTML: Memahami Struktur Dasar Dokumen Web

HTML, atau HyperText Markup Language, adalah bahasa dasar yang digunakan untuk membuat dan menyusun halaman web. Diciptakan oleh Tim Berners-Lee pada akhir 1980-an dan awal 1990-an, HTML telah menjadi tulang punggung dari setiap situs web yang kita temui di internet.