Form, Input, dan Button

Elemen <form>

<form> digunakan sebagai wadah untuk mengumpulkan data dari pengguna. Data ini bisa dikirim ke server atau diproses dengan JavaScript.

Di dalam <form> biasanya terdapat:

• <input>: kolom isian.
• <textarea>: area teks.
• <button>: tombol aksi.
• <label>: label untuk memberi keterangan pada input.

Contoh struktur dasar form:

<form>
  <label for="nama">Nama:</label><br />
  <input type="text" id="nama" name="nama" /><br />
 
  <label for="email">Email:</label><br />
  <input type="email" id="email" name="email" /><br />
 
  <button type="submit">Kirim</button>
</form>

Elemen <input>

<input> adalah elemen serbaguna untuk berbagai jenis input.

Atribut umum:

• type: jenis input, contoh: text, email, password, number, checkbox, radio, submit.
• name: nama input, digunakan saat data dikirim ke server.
• placeholder: teks petunjuk di dalam kolom sebelum diisi.
• required: menandakan bahwa input wajib diisi.
• id: identitas unik untuk menghubungkan dengan <label>.

Contoh:

<input
  type="text"
  id="nama"
  name="nama"
  placeholder="Masukkan nama Anda"
  required
/>

Contoh input email:

<input
  type="email"
  id="email"
  name="email"
  placeholder="Masukkan email Anda"
  required
/>

Elemen <textarea>

Digunakan untuk isian teks yang lebih panjang.

<textarea
  id="pesan"
  name="pesan"
  placeholder="Tulis pesan Anda di sini..."
></textarea>

Elemen <button>

<button> digunakan untuk membuat tombol. Atribut type menentukan perilaku tombol:

• type="submit": mengirim form.
• type="button": tombol umum, biasanya digunakan dengan JavaScript.
• type="reset": mereset isi form.

Contoh:

<button type="submit">Kirim</button>

Contoh Form Kontak Lengkap

Contoh form seperti di kontak.html:

<form>
  <label for="nama">Nama:</label><br />
  <input
    type="text"
    id="nama"
    name="nama"
    placeholder="Masukkan nama Anda"
    required
  /><br /><br />
 
  <label for="email">Email:</label><br />
  <input
    type="email"
    id="email"
    name="email"
    placeholder="Masukkan email Anda"
    required
  /><br /><br />
 
  <label for="pesan">Pesan:</label><br />
  <textarea
    id="pesan"
    name="pesan"
    placeholder="Tulis pesan Anda di sini..."
  ></textarea
  ><br /><br />
 
  <button type="submit">Kirim</button>
</form>

Form ini sudah menggunakan:

• Label yang jelas.
• Input teks dan email dengan placeholder.
• Textarea untuk pesan.
• Tombol submit untuk mengirim form.