Borang HTML (HTML Forms)

Selamat datang ke modul borang. Borang adalah penting untuk mengumpul input daripada pengguna.

Tag dan Atribut Borang

Elemen <form> adalah bekas untuk semua input borang. Atribut utamanya ialah action (ke mana data dihantar) dan method (cara data dihantar).

Atribut Utama Form:

  • <form>: Memulakan sebuah borang
  • action="/url": Menentukan destinasi data selepas borang dihantar
  • method="post": Menentukan kaedah penghantaran (POST atau GET)

Contoh:

<form action="/proses-data.php" method="post">
    <!-- Elemen-elemen borang akan diletakkan di sini -->
</form>

Latihan 1:

Bina satu borang asas dengan action="/daftar.php" dan method="post":

Paparan:

Kaedah GET & POST

GET menghantar data melalui URL, sesuai untuk carian. POST menghantar data dalam badan permintaan HTTP, lebih selamat untuk maklumat sensitif.

GET Method

✓ Data kelihatan di URL
✓ Sesuai untuk carian
✗ Terhad saiz data

POST Method

✓ Data tersembunyi
✓ Lebih selamat
✓ Tiada had saiz

Contoh:

<!-- Kaedah GET untuk carian -->
<form action="/cari" method="get">
    <input type="text" name="q">
    <button type="submit">Cari</button>
</form>

<!-- Kaedah POST untuk pendaftaran -->
<form action="/daftar" method="post">
    <input type="text" name="nama">
    <input type="password" name="kata_laluan">
    <button type="submit">Daftar</button>
</form>

Latihan 2:

Paparan:

a. Text Box (Kotak Teks)

Elemen input yang paling asas untuk membenarkan pengguna memasukkan teks satu baris seperti nama, e-mel, atau tajuk.

Sintaks:

<label for="nama">Nama Penuh:</label>
<input type="text" id="nama" name="nama_penuh">

ℹī¸ Nota: Atribut name adalah penting untuk mengenal pasti data di pelayan.

Latihan 3:

Cipta borang yang meminta "Nama Penuh" dan "Alamat E-mel":

Paparan:

b. Radio Button (Butang Radio)

Digunakan apabila pengguna perlu memilih satu pilihan sahaja daripada beberapa pilihan.

⚠ī¸ Penting: Semua butang dalam kumpulan yang sama mesti mempunyai atribut name yang sama.

Contoh:

<p>Jantina:</p>
<input type="radio" id="lelaki" name="jantina" value="L">
<label for="lelaki">Lelaki</label><br>
<input type="radio" id="perempuan" name="jantina" value="P">
<label for="perempuan">Perempuan</label>

Latihan 4:

Paparan:

c. Combo Box (Kotak Pilihan)

Juga dikenali sebagai dropdown list atau select box. Membolehkan pengguna memilih dari senarai pilihan yang tersembunyi sehingga diklik.

Sintaks:

<label for="negeri">Pilih Negeri:</label>
<select id="negeri" name="negeri">
    <option value="pahang">Pahang</option>
    <option value="selangor">Selangor</option>
    <option value="johor">Johor</option>
</select>

Latihan 5:

Paparan:

d. Text Area (Kawasan Teks)

Untuk input teks berbilang baris, seperti komen, ulasan, atau mesej panjang.

Sintaks:

<label for="komen">Komen Anda:</label>
<textarea id="komen" name="komen" rows="4" cols="50">
</textarea>

✅ Tips: Gunakan atribut rows dan cols untuk mengawal saiz kawasan teks.

Latihan 6:

Paparan:

e. Button (Butang)

Butang digunakan untuk menghantar borang (submit) atau untuk tindakan lain (button/reset).

Jenis-jenis Butang:

<!-- Submit Button - Hantar borang -->
<button type="submit">Hantar</button>
<input type="submit" value="Hantar">

<!-- Reset Button - Reset semua input -->
<button type="reset">Reset</button>

<!-- Regular Button - Untuk JavaScript -->
<button type="button">Klik Saya</button>

Latihan 7:

Paparan:

f. Password Field (Medan Kata Laluan)

Input khas untuk kata laluan di mana teks yang dimasukkan disembunyikan (ditunjukkan sebagai bulatan atau asterisk).

Sintaks:

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

🔒 Keselamatan: Sentiasa gunakan type="password" untuk input kata laluan. Jangan simpan kata laluan sebagai plain text!

Latihan 8:

Cipta borang login dengan username dan password:

Paparan:

đŸŽ¯ Contoh Borang Lengkap

Kombinasi semua elemen borang yang telah dipelajari:

Latihan Bonus:

Borang pendaftaran pelajar yang lengkap:

Paparan: