Membuat Form dengan HTML: Dari Input sampai Tombol Kirim

Form Itu Buat Apa?#

Coba bayangkan kita ingin membuat halaman kontak sederhana.

Kita ingin pengunjung mengisi:

1
Nama  : ____________
2

3
Email : ____________
4

5
Pesan :
6
____________________
7
____________________
8

9
        [ Kirim ]

Kita tentu tidak bisa menggunakan <p> untuk semuanya.

1
<p>Nama</p>
2
<p>Email</p>
3
<p>Pesan</p>

Itu hanya menampilkan tulisan.

Pengunjung belum punya tempat untuk mengetik.

Di HTML, kita bisa menggunakan elemen <form> sebagai wadah untuk bagian halaman yang digunakan mengumpulkan input dari pengguna.

Contohnya:

1
<form>
2
  ...
3
</form>

Untuk sekarang memang belum terlihat menarik.

Karena <form> hanyalah wadahnya.

Kita masih perlu memasukkan tempat untuk mengetik di dalamnya.

Tempat Mengetik Pertama Kita: input#

Mari mulai dari sesuatu yang sederhana.

Kita ingin meminta nama pengunjung.

1
<form>
2
  <input type="text">
3
</form>

Simpan lalu refresh browser.

Sekarang muncul sebuah kotak yang bisa kita isi.

Coba klik dan ketik nama Gabuters.

Selamat.

Untuk pertama kalinya halaman HTML kita tidak cuma menampilkan informasi.

Sekarang pengunjung bisa memasukkan sesuatu. 🎉

Perhatikan:

1
<input type="text">

Kita sudah pernah belajar atribut, jadi bagian ini seharusnya mulai terasa familiar.

input adalah elemennya.

Sedangkan:

1
type="text"

adalah atribut yang memberi tahu browser jenis input yang kita inginkan.

Dalam kasus ini:

1
text

berarti kita ingin pengguna memasukkan teks.

Tapi Kotak Ini Buat Apa?#

Sekarang bayangkan halaman kita punya dua input:

1
<form>
2
  <input type="text">
3
  <input type="text">
4
</form>

Kalau dibuka di browser, kita mendapatkan dua kotak.

Masalahnya…

Kotak pertama buat apa?

Kotak kedua buat apa?

Nama? Email? Alamat? Nama kucing?

Kita tahu karena kita yang membuatnya.

Pengunjung belum tentu tahu. 😄

Karena itu kita membutuhkan label.

1
<form>
2
  <label>Nama</label>
3
  <input type="text">
4
</form>

Sekarang pengunjung punya petunjuk bahwa input tersebut digunakan untuk mengisi nama.

Tapi kita bisa membuat hubungan antara label dan input menjadi lebih jelas bagi browser.

Caranya menggunakan atribut for dan id.

1
<form>
2
  <label for="nama">Nama</label>
3
  <input type="text" id="nama">
4
</form>

Perhatikan nilainya:

1
for="nama"
2
id="nama"

Keduanya sama.

Artinya label tersebut berhubungan dengan input yang memiliki id="nama".

Coba klik tulisan Nama di browser.

Browser akan memfokuskan input yang bersangkutan.

Hal kecil seperti ini membuat form lebih nyaman digunakan dan membantu aksesibilitas.

Sekarang Kita Tambahkan Email#

Nama sudah.

Sekarang kita ingin meminta email.

Kita sebenarnya bisa saja menulis:

1
<input type="text">

Tapi HTML menyediakan tipe input yang lebih sesuai:

1
<input type="email">

Jadi form kita bisa menjadi:

1
<form>
2
  <label for="nama">Nama</label>
3
  <input type="text" id="nama">
4

5
  <label for="email">Email</label>
6
  <input type="email" id="email">
7
</form>

Dengan type="email", kita memberi tahu browser bahwa nilai yang diharapkan adalah alamat email.

Pada kondisi tertentu browser juga bisa membantu melakukan validasi dasar terhadap format email.

Jadi atribut type bukan sekadar pajangan.

Ia membantu menjelaskan jenis data yang kita harapkan.

Beberapa Jenis input#

input tidak cuma digunakan untuk teks biasa.

Ada banyak nilai type yang tersedia.

Beberapa yang sering Gabuters temui misalnya:

1
<input type="text">
2
<input type="email">
3
<input type="password">
4
<input type="number">
5
<input type="date">
6
<input type="checkbox">
7
<input type="radio">

Masing-masing punya perilaku yang berbeda.

Tapi jangan buru-buru menghafalnya.

Kita akan menggunakan jenis input sesuai kebutuhan.

Kalau butuh nama, gunakan teks.

Kalau butuh email, gunakan email.

Kalau butuh tanggal, kita punya date.

HTML bukan ujian hafalan. 😄

Bagaimana Kalau Teksnya Panjang?#

input type="text" cocok untuk teks pendek seperti nama.

Tapi bagaimana kalau kita ingin meminta pesan seperti:

Halo BapakGabut, saya mau bertanya kenapa kode saya error padahal tadi malam masih jalan…

Pesannya bisa panjang.

Untuk itu kita punya <textarea>.

1
<label for="pesan">Pesan</label>
2

3
<textarea id="pesan"></textarea>

Berbeda dengan <input>, textarea memiliki tag pembuka dan penutup:

1
<textarea></textarea>

Sekarang pengguna punya area yang lebih nyaman untuk menulis teks panjang.

Kalau Pengguna Harus Memilih?#

Tidak semua informasi harus diketik sendiri.

Misalnya kita ingin bertanya:

Topik apa yang ingin ditanyakan?

Pilihan kita:

• HTML
• CSS
• JavaScript

Kita bisa menggunakan <select>.

1
<label for="topik">Topik</label>
2

3
<select id="topik">
4
  <option>HTML</option>
5
  <option>CSS</option>
6
  <option>JavaScript</option>
7
</select>

<select> membuat daftar pilihan.

Sedangkan setiap pilihan dibuat menggunakan:

1
<option>

Jadi strukturnya:

1
<select>
2
│
3
├── <option>HTML</option>
4
├── <option>CSS</option>
5
└── <option>JavaScript</option>

Nah, konsep nesting dari artikel sebelumnya mulai terpakai lagi.

Saatnya Membuat Tombol#

Form kita sudah punya:

• nama,
• email,
• pesan,
• pilihan topik.

Tapi masih ada yang kurang.

Pengunjung sudah capek-capek mengisi semuanya.

Lalu…

harus diapakan? 😄

Kita membutuhkan tombol.

1
<button type="submit">
2
  Kirim
3
</button>

Kalau kita gabungkan:

1
<form>
2
  <label for="nama">Nama</label>
3
  <input type="text" id="nama">
4

5
  <label for="email">Email</label>
6
  <input type="email" id="email">
7

8
  <label for="topik">Topik</label>
9
  <select id="topik">
10
    <option>HTML</option>
11
    <option>CSS</option>
12
    <option>JavaScript</option>
13
  </select>
14

15
  <label for="pesan">Pesan</label>
16
  <textarea id="pesan"></textarea>
17

18
  <button type="submit">
19
    Kirim
20
  </button>
21
</form>

Sekarang bentuk dasarnya sudah menyerupai sebuah form sungguhan.

Coba isi semua kolom lalu tekan Kirim.

Dan…

mungkin Gabuters mulai bertanya:

Datanya ke mana?

Nah.

Ini pertanyaan yang bagus.

Kita Belum Benar-Benar Mengirim Apa Pun#

Ini bagian penting.

Kita sudah membuat tampilan dan struktur form, tetapi itu belum otomatis berarti data tersimpan di suatu tempat.

HTML menyediakan mekanisme untuk menentukan ke mana dan bagaimana data form dikirim.

Misalnya kita akan sering menemukan atribut:

1
<form action="/kirim" method="post">

Secara sederhana:

action memberi tahu ke mana data form akan dikirim.

method memberi tahu bagaimana form mengirimkannya.

Tapi untuk benar-benar memproses data tersebut, biasanya kita membutuhkan sesuatu di sisi lain yang siap menerimanya.

Misalnya sebuah backend/server.

Dan itu belum perlu kita bahas sekarang.

Untuk sementara bayangkan seperti ini:

1
Pengguna
2
   │
3
   │ mengisi
4
   ▼
5
HTML Form
6
   │
7
   │ mengirim data
8
   ▼
9
???

Kita sudah membuat bagian HTML Form.

Bagian ??? akan kita kenal nanti ketika pembahasan kita sudah sampai ke cara aplikasi web bekerja dengan data.

Jadi kalau tombol Kirim kita sekarang belum menyimpan nama Gabuters ke database rahasia BapakGabut…

itu memang belum tugas HTML. 😄

Kalau Mau Dikirim, Input Perlu Punya Nama#

Ada satu atribut lagi yang penting ketika bekerja dengan form:

1
name

Misalnya:

1
<input
2
  type="text"
3
  id="nama"
4
  name="nama"
5
>

Sekarang kita punya:

1
id="nama"
2
name="nama"

Kelihatannya mirip, tetapi kegunaannya berbeda.

id membantu mengidentifikasi elemen di halaman dan tadi kita gunakan untuk menghubungkannya dengan <label>.

Sedangkan name digunakan sebagai nama data ketika form dikirim.

Misalnya:

1
<input type="email" id="email" name="email">

Secara sederhana kita bisa membayangkan data yang nantinya dikirim seperti:

1
nama  = BapakGabut
2
email = bapakgabut@example.com

Nama di sebelah kiri berasal dari atribut name.

Jadi kalau sebuah input nantinya ingin ikut dikirim sebagai data form, atribut name menjadi penting.

Placeholder Bukan Pengganti Label#

Gabuters mungkin pernah melihat:

1
<input
2
  type="text"
3
  placeholder="Masukkan nama"
4
>

placeholder menampilkan petunjuk di dalam input.

Kelihatannya praktis.

Tapi jangan buru-buru menghapus <label> lalu menggantinya dengan placeholder.

Contoh yang lebih baik:

1
<label for="nama">Nama</label>
2

3
<input
4
  type="text"
5
  id="nama"
6
  name="nama"
7
  placeholder="Contoh: Budi"
8
>

Label menjelaskan input ini apa.

Placeholder bisa membantu memberikan contoh atau petunjuk tambahan.

Begitu pengguna mulai mengetik, placeholder akan hilang.

Label tetap ada.

Jadi keduanya punya fungsi yang berbeda.

Kita Bisa Meminta Input Wajib Diisi#

Misalnya nama dan email tidak boleh kosong.

HTML punya atribut:

1
required

Contohnya:

1
<input
2
  type="text"
3
  id="nama"
4
  name="nama"
5
  required
6
>

Menariknya, required tidak perlu ditulis seperti:

1
required="true"

Cukup:

1
required

Ini disebut boolean attribute.

Keberadaan atribut tersebut sudah berarti fitur itu aktif.

Sekarang coba kosongkan input lalu tekan tombol submit.

Browser bisa membantu memberi validasi dasar sebelum form dikirim.

Tapi ingat: validasi HTML di browser bukan pengganti validasi di backend ketika nanti kita benar-benar memproses data.

Untuk sekarang cukup pahami bahwa HTML sudah menyediakan beberapa bantuan dasar untuk membuat form lebih nyaman digunakan.

Yuk, Buat Form Kontak Sederhana#

Sekarang kita gabungkan yang sudah dipelajari.

Di dalam <body>, coba buat:

1
<h1>Hubungi Saya</h1>
2

3
<p>
4
  Punya pertanyaan? Isi form berikut.
5
</p>
6

7
<form>
8
  <label for="nama">Nama</label>
9
  <input
10
    type="text"
11
    id="nama"
12
    name="nama"
13
    placeholder="Masukkan nama"
14
    required
15
  >
16

17
  <label for="email">Email</label>
18
  <input
19
    type="email"
20
    id="email"
21
    name="email"
22
    placeholder="nama@email.com"
23
    required
24
  >
25

26
  <label for="topik">Topik</label>
27
  <select id="topik" name="topik">
28
    <option value="html">HTML</option>
29
    <option value="css">CSS</option>
30
    <option value="javascript">JavaScript</option>
31
  </select>
32

33
  <label for="pesan">Pesan</label>
34
  <textarea
35
    id="pesan"
36
    name="pesan"
37
    placeholder="Tulis pesan di sini"
38
    required
39
  ></textarea>
40

41
  <button type="submit">
42
    Kirim
43
  </button>
44
</form>

Simpan lalu buka di browser.

Cobalah:

• mengetik nama;
• memasukkan email;
• memilih topik;
• menulis pesan;
• mengosongkan field yang required;
• kemudian menekan tombol Kirim.

Tidak masalah kalau tampilannya masih sangat sederhana.

Kita sedang belajar struktur dan perilakunya, bukan desainnya.

Nanti CSS yang bertugas membuatnya lebih enak dilihat.

Coba Modifikasi Sendiri#

Sekarang jangan berhenti di form yang saya buat.

Coba tambahkan field baru.

Misalnya:

1
<label for="umur">Umur</label>
2
<input type="number" id="umur" name="umur">

Atau tanggal:

1
<label for="tanggal">Tanggal</label>
2
<input type="date" id="tanggal" name="tanggal">

Gabuters juga bisa mengubah pilihan topiknya.

Misalnya:

1
<option value="game">Game</option>
2
<option value="manga">Manga</option>
3
<option value="lainnya">Gabut Lainnya</option>

Tidak perlu takut merusak halaman.

Kalau rusak, kita perbaiki.

Kalau masih rusak…

ya kita lihat lagi kodenya. 😄

Justru dari utak-atik seperti ini biasanya kita mulai benar-benar memahami HTML.

Apa yang Sudah Kita Pelajari?#

Sekarang halaman kita bukan hanya bisa menampilkan informasi.

Kita sudah bisa membuat tempat bagi pengguna untuk memberikan input.

Kita mengenal:

1
<form>
2
↓
3
wadah sebuah form
4

5
<input>
6
↓
7
input seperti teks, email, angka, tanggal, dan lainnya
8

9
<label>
10
↓
11
menjelaskan sebuah input
12

13
<textarea>
14
↓
15
input untuk teks yang lebih panjang
16

17
<select> + <option>
18
↓
19
memberikan daftar pilihan
20

21
<button>
22
↓
23
membuat tombol

Kita juga bertemu beberapa atribut penting:

1
type
2
id
3
for
4
name
5
placeholder
6
required

Dan yang tidak kalah penting, kita sekarang tahu bahwa:

1
HTML Form
2
    ↓
3
mengumpulkan data
4
    ↓
5
bukan berarti otomatis menyimpan data

Untuk benar-benar mengolah atau menyimpan data, kita membutuhkan bagian lain dari aplikasi web.

Tapi itu cerita untuk nanti.

Selanjutnya: Jangan Semua Dibungkus <div>#

Sekarang kita sudah punya cukup banyak elemen HTML.

Ada heading.

Ada paragraf.

Ada link.

Ada form.

Dan nanti halaman kita akan semakin besar.

Masalah berikutnya muncul ketika kita mulai ingin membagi halaman menjadi bagian-bagian seperti:

• header,
• navigasi,
• konten utama,
• artikel,
• sidebar,
• footer.

Kita memang bisa saja membungkus semuanya dengan <div>.

Tapi…

apakah sebaiknya begitu?

Di artikel berikutnya kita akan berkenalan dengan Semantic HTML dan melihat kenapa HTML bukan cuma soal membuat sesuatu tampil di browser, tetapi juga memberi arti pada struktur halaman.