Malay

Tutorial HTML

Jadual HTML

Senarai HTML

Pautan HTML

Rujukan HTML

Nama dan Nilai Warna HTML

Borang HTML

Media HTML

Header HTML

Susun Atur HTML

Grafik HTML

API HTML

Pelbagai HTML

Demo HTML

Alat HTML

Sumber HTML

HTML - Borang: Catatan Pintu Gerbang Interaktif Halaman Web

Table of Contents

Seksyen Keterangan
Mengapa Gunakan Borang HTML? Memahami pentingnya borang dalam pembangunan web
Buat Borang HTML Belajar bagaimana membuat borang HTML asas
Contoh Borang HTML Eksplorasi pelbagai contoh borang HTML
Elemen Borang HTML Temui elemen borang yang berbeza dan penggunaannya
Atribut Borang HTML Belajar tentang atribut borang yang penting
Contoh Borang HTML Dengan Kod Panduan melalui contoh borang yang lengkap
Bagaimana Borang HTML Bertindak? Memahami mekanisme di belakang tabir borang

Mengapa Gunakan Borang HTML?

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia yang menarik borang HTML. Tetapi sebelum kita mula mengoding, mari berbicara tentang mengapa borang itu penting dalam pembangunan web.

HTML - Forms

Imaginasi anda di kedai kopi, dan anda ingin memesan latte kesukaan anda. Anda perlu memberitahu barista apa yang anda inginkan, kan? Baiklah, borang HTML adalah seperti versi digital percakapan itu. Mereka membolehkan pengguna memasukkan maklumat dan mengirimkannya ke pelayan web untuk diproses.

Borang adalah tulang punggung interaksi pengguna di web. Mereka digunakan untuk:

  1. Mengumpulkan data pengguna (seperti mendaftar untuk buletin)
  2. Log masuk ke laman web
  3. Mencari maklumat
  4. Membuat pembelian secara online
  5. Mengirimkan maklum balas atau komen

Tanpa borang, web akan menjadi jalan satu arah yang cukup membosankan. Borang membuat web interaktif dan dinamik!

Buat Borang HTML

Sekarang kita mengerti mengapa borang itu penting, mari buat borang HTML asas. Jangan khawatir jika anda baru-baru ini — kita akan mengambil langkah demi langkah!

<form action="/submit-form" method="post">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>

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

<input type="submit" value="Hantar">
</form>

mariuraikan ini:

  1. Tag <form> adalah wadah untuk semua elemen borang kita.
  2. action="/submit-form" memberitahu pelayar di mana mengirimkan data borang saat ia dikirim.
  3. method="post" menentukan bagaimana data dikirim (dalam hal ini, ia dikirim sebagai permintaan HTTP POST).
  4. Tag <label> menyediakan deskripsi untuk field input kita.
  5. Tag <input> membuat field input sebenarnya.
  6. Atribut type dalam <input> menentukan jenis inputnya (teks, email, dll.).
  7. Atribut required menjadikan field ini wajib diisi.
  8. Tag <input> terakhir dengan type="submit" membuat tombol submit.

Contoh Borang HTML

Sekarang kita telah mengetahui dasar-dasar, mari lihat beberapa contoh lain untuk memanjakan kreativitas anda!

Borang Pencarian Sederhana

<form action="/search" method="get">
<input type="text" name="query" placeholder="Cari...">
<input type="submit" value="Cari">
</form>

Borang ini membuat kotak pencarian sederhana dengan tombol submit. Saat pengguna memasukkan query dan mengklik "Cari", ia mengirimkan permintaan GET ke "/search" dengan query sebagai parameter.

Borang Hubungan

<form action="/contact" method="post">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>

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

<label for="message">Pesan:</label>
<textarea id="message" name="message" required></textarea>

<input type="submit" value="Kirim Pesan">
</form>

Borang ini termasuk area teks untuk pesan panjang, yang cocok untuk halaman hubungan!

Elemen Borang HTML

Borang tidak hanya tentang input teks. Ada banyak kotak alat yang Anda bisa gunakan untuk membuat borang interaktif yang kaya. Mari eksplorasi beberapa dari mereka:

Elemen Keterangan Contoh
<input> Membuat berbagai field input <input type="text">
<textarea> Membuat input teks multi-baris <textarea></textarea>
<select> Membuat daftar dropdown <select><option>Pilihan 1</option></select>
<button> Membuat tombol yang dapat diklik <button>Klik saya!</button>
<fieldset> Mengelompokkan elemen borang yang terkait <fieldset><legend>Informasi Personal</legend></fieldset>
<datalist> Menentukan daftar opsi yang sudah ditentukan <datalist id="browsers"><option value="Chrome"></datalist>

Setiap elemen ini memiliki properti dan kasus penggunaan unik. Saat Anda maju dalam perjalanan pengembangan web Anda, Anda akan menemukan diri Anda menggunakan elemen ini dalam kombinasi kreatif untuk membuat borang yang kompleks dan pengguna ramah.

Atribut Borang HTML

Atribut adalah seperti petunjuk khusus yang kita berikan kepada elemen borang kita. Mereka membantu mengawasi perilaku borang dan bagaimana ia berinteraksi dengan pengguna. Berikut adalah beberapa atribut penting yang Anda perlu ketahui:

Atribut Keterangan Contoh
action Menentukan di mana mengirimkan data borang <form action="/submit-form">
method Menentukan bagaimana mengirimkan data borang <form method="post">
name Menentukan nama untuk borang <form name="login">
target Menentukan di mana menampilkan tanggapan <form target="_blank">
autocomplete Menentukan apakah borang memilikifitur otomatis <form autocomplete="on">

Atribut ini bisa sangat kuat saat digunakan dengan benar. Misalnya, mengatur autocomplete="off" pada borang dengan informasi sensitif bisa meningkatkan keamanan dengan menghalangi browser menyimpan data input.

Contoh Borang HTML Dengan Kod

Sekarang, mari kita gabungkan semua ini dengan contoh borang yang lebih kompleks:

<form action="/register" method="post">
<fieldset>
<legend>Informasi Personal</legend>

<label for="fullname">Nama Lengkap:</label>
<input type="text" id="fullname" name="fullname" required>

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

<label for="birthdate">Tanggal Lahir:</label>
<input type="date" id="birthdate" name="birthdate">

<label for="gender">Jenis Kelamin:</label>
<select id="gender" name="gender">
<option value="">Pilih...</option>
<option value="male">Pria</option>
<option value="female">Wanita</option>
<option value="other">Lainnya</option>
</select>
</fieldset>

<fieldset>
<legend>Detil Akun</legend>

<label for="username">Nama Pengguna:</label>
<input type="text" id="username" name="username" required>

<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password" required>

<label for="confirmpassword">Konfirmasi Kata Sandi:</label>
<input type="password" id="confirmpassword" name="confirmpassword" required>
</fieldset>

<fieldset>
<legend>Preferensi</legend>

<label>
<input type="checkbox" name="newsletter" value="yes"> Berlangganan buletin
</label>

<p>Warna Kesukaan:</p>
<label>
<input type="radio" name="color" value="red"> Merah
</label>
<label>
<input type="radio" name="color" value="blue"> Biru
</label>
<label>
<input type="radio" name="color" value="green"> Hijau
</label>
</fieldset>

<input type="submit" value="Daftar">
</form>

Borang ini menunjukkan penggunaan berbagai elemen dan atribut borang yang kita diskusikan. Itu diorganisir menjadi tiga fieldset: Informasi Personal, Detil Akun, dan Preferensi. Setiap fieldset mengelompokkan input yang terkait bersama-sama, membuat borang lebih terstruktur dan mudah dipahami.

Bagaimana Borang HTML Bertindak?

Sekarang kita telah membuat borang kita, Anda mungkin berpikir, "Apa yang terjadi saat saya mengklik tombol submit itu?" Pertanyaan yang bagus! Mari kitauraikan proses ini:

  1. Input Pengguna: Pengguna mengisi field borang dengan informasinya.

  2. Validasi: Jika kita telah mengatur validasi client-side (gunakan atribut HTML5 seperti required atau JavaScript), browser memeriksa apakah input valid sebelum melanjutkan.

  3. Pengiriman: Saat pengguna mengklik tombol submit, browser mengumpulkan semua data borang.

  4. Permintaan: Browser membuat permintaan HTTP (GET atau POST, tergantung pada atribut method) dan mengirimkannya ke URL yang ditentukan dalam atribut action.

  5. Pemrosesan Pelayan: Pelayan menerima permintaan dan memroses data (bagian ini melibatkan pemrograman sisi pelayan, yang diluar cakupan panduan ini tentang HTML).

  6. Tanggapan: Pelayan mengirim tanggapan kembali ke browser, yang bisa berupa halaman baru, pengalihan, atau pesan sukses/kesalahan.

  7. Aksi Browser: Browser kemudian bertindak atas tanggapan, biasanya dengan memuat halaman baru atau memperbarui halaman saat ini.

Ingat, borang HTML hanya permulaan. Untuk membuat mereka benar-benar fungsional, Anda akan perlu menggabungkannya dengan pemrograman sisi pelayan dan mungkin juga JavaScript untuk interaktivitas tambahan. Tetapi jangan khawatir tentang itu untuk sekarang — Anda telah mengambil langkah pertama besar ke dalam dunia pengembangan web interaktif!

Dan itu adalah — panduan lengkap tentang borang HTML! Ingat, latihan membuat Anda sempurna. Cobalah membuat berbagai jenis borang, mainkan dengan berbagai elemen dan atribut, dan terutama, bersenang-senang dengannya! Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:
HTML - HSL
Tutorial Seterusnya:
HTML - Atribut Borang