Mencipta Borang HTML

Mencipta Borang HTML

Selamat datang ke pelajaran seterusnya! Dalam pelajaran ini, anda akan mempelajari cara mencipta borang menggunakan HTML. Borang penting untuk mengumpulkan masukan pengguna, yang kemudiannya boleh diproses dengan PHP. Mari mulakan!

Borang HTML digunakan untuk mengumpulkan masukan pengguna. Borang membolehkan pengguna mengisi medan, membuat pilihan dan menghantar data kepada pelayan untuk diproses.

Contoh: Borang log masuk yang membolehkan pengguna memasukkan nama pengguna dan kata laluan.

Perkara Utama: Borang bertindak sebagai jambatan antara pengguna dengan skrip PHP anda.

Berikut ialah cara mencipta borang HTML asas:

Penerangan:

• action: Menentukan fail PHP yang mengendalikan data borang.
• method: Menentukan cara menghantar data (GET atau POST).
• required: Memastikan medan mesti diisi sebelum penghantaran.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Borang boleh mengandungi pelbagai jenis masukan untuk mengumpulkan pelbagai jenis data:

• text: Untuk masukan teks satu baris.
• email: Untuk alamat e-mel.
• password: Untuk masukan kata laluan.
• checkbox: Untuk pilihan berbilang.
• radio: Untuk pilihan tunggal.
• submit: Untuk menghantar borang.

Contoh:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Butang radio membolehkan pengguna memilih satu pilihan daripada sekumpulan pilihan. Contoh:

Petua: Gunakan atribut name yang sama untuk semua butang radio dalam satu kumpulan.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Kotak pilihan membolehkan pengguna memilih berbilang pilihan. Contoh:

Petua: Gunakan sintaks tatasusunan (hobbies[]) untuk mengumpulkan berbilang nilai.

<form action="submit.php" method="POST">
  <p>Select your 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>
  <button type="submit">Submit</button>
</form>

Menu lungsur membolehkan pengguna memilih satu pilihan daripada senarai. Contoh:

Petua: Gunakan selected untuk menetapkan pilihan lalai.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Pastikan borang anda boleh dicapai oleh semua pengguna:

• Gunakan teg label yang dipautkan kepada masukan dengan atribut for.
• Kumpulkan masukan berkaitan menggunakan fieldset dan legend.
• Uji kebolehgunaan borang pada peranti mudah alih.

Petua: Borang yang boleh dicapai meningkatkan pengalaman pengguna untuk semua orang!

Tahniah! Anda telah mempelajari cara mencipta borang HTML dengan pelbagai jenis masukan, termasuk medan teks, butang radio, kotak pilihan dan menu lungsur. Borang ialah asas masukan pengguna dalam pembangunan web. Dalam pelajaran seterusnya, kita akan mempelajari cara memproses data borang menggunakan PHP. Mari terus menulis kod!