Tiga halaman sudah terhubung; satu halaman tersisa dan sekaligus satu elemen belum terpakai di situs ini: form. Halaman kontak menjadi tempat seluruh pola Section Forms mendarat dalam satu wadah — label terikat, isian wajib ber-required, bantuan pengisian autocomplete, topik dalam select, dan pesan dalam textarea — ditutup address berisi telepon dan email.

Pengantar Halaman Kontak #

Buat src/kontak.html dengan kerangka yang sama — title “Kontak — Kopi.dev” beserta meta description versinya, header salinan beranda, lalu buka elemen main dengan judul dan pengantar — sama persis dengan baris 23-24 berkas final:

html 
    <h1>Hubungi Kami</h1>
    <p>Pesan anggota baru, tawaran kolaborasi, atau pertanyaan materi — semuanya sampai ke pengurus lewat satu form di bawah ini, atau lewat kanal pada bagian akhir halaman.</p>

Bedah potongan ini:

  1. h1 dan dua jalur (baris 1-2): pengantar menyebut dua kanal sekaligus — form dan alamat — karena tidak semua pengunjung mau mengisi form; sebagian cukup menelpon.
  2. Janji tujuan (baris 2): “semuanya sampai ke pengurus” — satu kalimat yang meyakinkan pengunjung pesannya memang dibaca.

Form Pesan #

Section pertama memuat seluruh form. Ketik blok berikut — sama persis dengan baris 25-52 berkas final:

html 
    <!-- Form pesan -->
    <section id="form-pesan">
      <h2>Kirim Pesan</h2>
      <form action="https://www.example.com/kirim-pesan" method="post">
        <p>
          <label for="nama">Nama lengkap</label>
          <input type="text" id="nama" name="nama" required autocomplete="name">
        </p>
        <p>
          <label for="email">Alamat email</label>
          <input type="email" id="email" name="email" required autocomplete="email">
        </p>
        <p>
          <label for="topik">Topik pesan</label>
          <select id="topik" name="topik">
            <option value="umum">Pertanyaan umum</option>
            <option value="materi">Pertanyaan materi</option>
            <option value="kolaborasi">Kolaborasi</option>
            <option value="lainnya">Lainnya</option>
          </select>
        </p>
        <p>
          <label for="pesan">Isi pesan</label>
          <textarea id="pesan" name="pesan" rows="6" cols="40"></textarea>
        </p>
        <button type="submit">Kirim Pesan</button>
      </form>
    </section>

Mari kita bedah baris demi baris:

  1. action dan method (baris 4): alamat tujuan pengiriman dan caranya — data dikirim sebagai post ke server, materi chapter Action dan Method; alamat example.com kita bahas di catatan akhir bagian ini.
  2. Label terikat for-id (baris 6, 12, 18, 26): klik label memfokuskan kolomnya, pembaca layar mengumumkan nama kolom sebelum mengetik — pola pengikatan dari chapter Label dipakai seragam.
  3. required pada nama dan email (baris 7, 13): dua identitas pengirim wajib terisi — submit dengan kolom kosong ditahan browser lengkap dengan pesan bawaan, chapter Atribut required.
  4. autocomplete="name" dan autocomplete="email" (baris 7, 13): token baku dari spesifikasi — browser menawarkan isian identitas yang tersimpan, satu ketukan mengisi nama dan email, chapter Autocomplete.
  5. type="email" (baris 13): papan ketik ponsel menyesuaikan dan pemeriksaan format aktif tanpa JavaScript — dua hasil satu atribut, chapter Validasi Berdasarkan Type.
  6. select topik (baris 18-24): kategori dibatasi empat pilihan — pengirim memilih, pengurus tidak menebak dari isi bebas. Tanpa atribut tambahan, opsi pertama tampil sebagai pilihan awal; keempatnya memang pilihan sah, chapter Select dan Option.
  7. textarea dengan rows dan cols (baris 27): rows="6" cols="40" menyiapkan ruang ketik yang layak sebelum CSS mengambil alih ukurannya, chapter Textarea.
  8. button type="submit" (baris 29): nilainya sama dengan bawaan, tetapi niatnya terbaca begitu form bertambah tombol lain kelak, chapter Button.
  9. Tiap pasangan label-kontrol dalam p (baris 5-9, 11-15, dst.): paragraf mengelompokkan label dan kolomnya — tanpa pembungkus, keduanya mudah tercampur visualnya begitu halaman memanjang.

Address dan Kanal Kontak Lain #

Section kedua menampung kanal yang tidak memakai form — cukup tautan langsung:

html 
    <!-- Alamat dan kanal kontak lain -->
    <section id="alamat">
      <h2>Alamat dan Kanal Lain</h2>
      <address>
        <p>Kopi.dev — Komunitas Belajar Web<br>Jalan Kenari No. 12, Jakarta Selatan 12130</p>
        <p>Telepon: <a href="tel:+622187654321">(021) 876-5432</a>, Senin–Sabtu, 09.00–17.00 WIB.</p>
        <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
      </address>
    </section>

Bedah potongan ini:

  1. address kanal kontak (baris 4-8): alamat fisik, telepon, dan email dalam satu wadah — elemen kontak untuk bagian ini, persis pola address lokasi acara di halaman kegiatan.
  2. Tautan tel: (baris 6): nilai tel:+622187654321 memakai format internasional tanpa spasi — ponsel menyiapkan panggilan dengan satu ketukan, chapter Link Email dan Telepon. Jam layanan ditulis di teks karena hanya dibaca manusia.
  3. Tautan mailto: (baris 7): satu ketukan membuka aplikasi email dengan alamat tujuan terisi — pasangan tel: untuk pengunjung yang tidak menelpon.
  4. Teks dan angka tampil manusiawi (baris 6-7): layar menampilkan “(021) 876-5432”, nilai href memakai bentuk mesin — dua wajah satu tautan, sama seperti time yang memisahkan teks layar dan datetime.

Hasil pada Browser #

Simpan berkas dan muat halaman. Coba submit dengan kolom kosong — browser menahan pengiriman, memfokuskan kolom nama, dan menampilkan pesan bawaan; isi email dengan format salah — kolom ditahan sampai alamatnya ber-@. Tekan Tab dari atas — kursor melintasi label, kolom, pilihan topik, area pesan, dan tombol dalam urutan markup. Lalu klik tautan telepon dari ponsel — aplikasi panggilan menyiapkan nomor sekretariat.

Form-nya hidup penuh pada demo berikut — kirim kosong dan lihat penahannya, lalu isi email dengan format salah dan kirim lagi; tekan Tab dari kolom nama untuk merasakan urutan fokus yang mengikuti markup:

Pada demo, tautan menu dimatikan (diganti #) dan tautan tel:/mailto: biasanya ditahan browser di dalam iframe — keduanya bekerja penuh pada berkas tersimpan. Submit sah berpindah di dalam iframe: data terkirim ke https://www.example.com/kirim-pesan lalu iframe dikosongkan karena domain contoh menolak ditampilkan dalam frame; muat ulang halaman untuk mengulang. Menu masih salinan beranda dan footer belum termasuk — keduanya dirapikan pada Bagian 5.

Ringkasan Bagian 4 #

  • Form pesan memakai pola lengkap Section Forms: label for-id, required, autocomplete, type="email", select, textarea, dan button type="submit".
  • address menampung kanal non-form: alamat fisik, tautan tel:, dan mailto:.
  • Alamat action fiktif — HTML menyiapkan dan memeriksa data; pengolahan sungguhan adalah tugas server.

Empat halaman kini berdiri, tetapi menunya masih salinan beranda yang sama empat kali. Bagian berikutnya merapikan hal itu.