close

Pengenalan kepada Form dalam HTML: Struktur, Jenis Input dan Contoh

HTML form adalah bahagian penting dalam pembangunan web yang membolehkan pengguna berinteraksi dengan tapak web dan menyerahkan data ke pelayan. Form digunakan untuk pelbagai tujuan, seperti mengumpul pengguna dalam form asi, memproses input pengguna dan membolehkan tindakan pengguna pada tapak web. Dalam artikel ini, kami akan meneroka atribut dan pelbagai jenis medan input, pilih elemen, kawasan teks dan butang yang biasa digunakan dalam HTML form.

Medan Input

  • <input type="text">: Mencipta medan input teks di mana pengguna boleh memasukkan aksara abjad angka.
  • <input type="password">: Memaparkan medan input kata laluan yang menutup aksara yang dimasukkan.
  • <input type="email">: Menyediakan pengesahan e-mel untuk medan input yang memerlukan alamat e-mel yang sah.
  • <input type="number">: Mengehadkan input kepada nilai angka sahaja.
  • <input type="checkbox">: Mewakili kotak pilihan yang pengguna boleh pilih atau nyahpilih.
  • <input type="radio">: Mewakili butang radio yang membenarkan pengguna memilih satu pilihan daripada sekumpulan pilihan.
  • <input type="file">: Membolehkan pengguna memilih dan memuat naik fail.
  • <input type="submit">: Memaparkan butang yang menghantar form apabila diklik.
  • <input type="reset">: Memaparkan butang yang menetapkan semula form kepada keadaan asalnya.
  • <input type="date">: Menyediakan pemilih tarikh untuk memilih tarikh.
  • <input type="time">: Membolehkan pengguna memasukkan nilai masa.

Pilih Elemen

  • <select>: Mencipta menu lungsur turun dengan pilihan yang boleh dipilih.
  • <option>: Mentakrifkan pilihan dalam menu lungsur turun, diletakkan di dalam <select> teg.
  • <optgroup>: Kumpulan pilihan berkaitan bersama dalam menu lungsur turun.
  • <select multiple>: Membenarkan pengguna memilih berbilang pilihan serentak dengan menahan kekunci Ctrl(atau kekunci Perintah pada Mac) sambil mengklik.

Textareas

<textarea>: Mencipta medan input teks berbilang baris di mana pengguna boleh memasukkan dan mengedit blok teks yang lebih panjang. Ia boleh diubah saiz dan dikonfigurasikan dengan atribut seperti rows dan cols untuk menentukan dimensinya.

Butang

<button>: Mewakili butang yang boleh mencetuskan pelbagai tindakan dalam form. Ia boleh digunakan untuk menyerahkan form, setiap form fungsi JavaScript, atau menavigasi ke halaman lain.

Contoh penggunaan:

<form action="/submit-form" method="post">  
  <label for="name">Name:</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">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Contoh ini mempamerkan penggunaan pelbagai form elemen, termasuk input medan, textarea, dan butang. Jangan ragu untuk menyesuaikan elemen dan atribut berdasarkan keperluan khusus anda. checkbox select dropdown submit form