Tutorial HTML / Menggunakan textarea, select, option, dan button

Gunakan textarea untuk teks beberapa baris, select dengan option untuk daftar pilihan yang sudah disiapkan, dan button untuk tindakan eksplisit. Elemen-elemen ini memiliki cara berbeda dalam mempertahankan nilai dan mengirimkan formulir.

Masukkan beberapa baris dengan textarea

Nilai awal dari textarea ditempatkan di antara tag pembuka dan penutupnya, alih-alih dalam atribut value. Bandingkan konten awal dengan petunjuk yang menghilang dengan menggunakan contoh kotak teks dalam menambahkan teks placeholder ke bidang formulir.

<label for="message">Pesan Anda</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows dan cols memengaruhi ukuran yang awalnya ditampilkan; CSS dapat menyesuaikan kontrol dengan lebar yang tersedia. name diperlukan jika isinya perlu dikirim. Teks di antara tag menjadi nilai awal yang sebenarnya. Jika Anda hanya ingin menampilkan contoh, gunakan placeholder sebagai petunjuk tambahan dan pertahankan labelnya. Gunakan textarea alih-alih input baris tunggal jika pembaca perlu mengerjakan jawaban yang lebih panjang.

Sediakan pilihan dengan select dan option

<label for="topic">Subjek</label>
<select id="topic" name="topic">
  <option value="order">Pesanan</option>
  <option value="delivery">Pengiriman</option>
  <option value="other">Lainnya</option>
</select>

Layar menampilkan "Pesanan", tetapi nilai yang dikirim adalah order. id="topic" menghubungkan kontrol dengan labelnya, sementara name="topic" menamai data yang dikirim. Pilih nilai value dari opsi yang sesuai dengan yang diharapkan server. Tanpa interaksi, opsi pertama dipilih. Jika pengguna harus memilih dengan sengaja, mulailah dengan <option value="">Pilih subjek</option> dan tambahkan required ke select. Jika ada nilai default yang masuk akal, opsi pertama yang sebenarnya bisa lebih disukai.

Uji kontrol bersama dalam satu formulir

Simpan dokumen ini dengan nama controls.html. Opsi kosong pertama dan atribut required berarti bahwa subjek yang sebenarnya harus dipilih sebelum mengirim. Tombol reset disertakan untuk latihan perbandingan ini.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan untuk Kontrol Formulir</title>
  <style>
    textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
    textarea { width: 24rem; }
  </style>
</head>
<body>
  <h1>Berlatih dengan bidang kontak</h1>
  <form id="controls-form" method="get">
    <p><label for="topic-choice">Subjek</label>
      <select id="topic-choice" name="topic" required>
        <option value="">Pilih subjek</option>
        <option value="order">Pesanan</option>
        <option value="delivery">Pengiriman</option>
      </select></p>
    <p><label for="message-text">Pesan</label>
      <textarea id="message-text" name="message" rows="4">Pertanyaan uji</textarea></p>
    <button type="submit">Periksa nilai yang dimasukkan</button>
    <button type="reset">Pulihkan nilai asli</button>
  </form>
</body>
</html>

1. Kirim tanpa memilih subjek untuk menguji pemilihan yang wajib.
2. Pilih pengiriman, ubah pesannya, dan kirim. Nilai yang dikirim adalah delivery, sementara label yang terlihat adalah „Pengiriman“.
3. Ubah lagi dan lakukan reset. Subjek kembali ke opsi pertama dan pesannya kembali ke teks aslinya.

Sebuah elemen kontrol tanpa teks awal muncul kosong setelah direset; sebuah elemen kontrol dengan nilai awal kembali ke nilai tersebut. Buka file lagi untuk membandingkan dengan kondisi awalnya.

Referensi ke textarea di MDN · Referensi ke select di MDN · Referensi ke button di MDN

Tentukan tipe setiap tombol

Dalam sebuah formulir, button secara default ditujukan untuk pengiriman. Gunakan type="button" untuk aksi lain yang dikendalikan skrip, agar formulir tidak terkirim secara tidak sengaja. Amati bagaimana nama dan nilai dikirim di struktur formulir dan GET vs. POST.

<form method="get">
  <label for="note">Catatan</label>
  <textarea id="note" name="note" rows="4"></textarea>
  <button type="submit">Kirim</button>
  <button type="reset">Setel ulang</button>
</form>

Formulir menggunakan GET dan mengirimkan ke URL saat ini. Pada halaman yang disajikan melalui HTTP atau HTTPS, Anda akan melihat nilai-nilai setelah pengiriman dalam URL. Pada file file:// yang dibuka secara lokal, pemrosesan tergantung pada browser; ini tidak membuktikan pemrosesan sisi server yang berhasil. Setel ulang mengembalikan kontrol ke nilai aslinya; ini tidak selalu membuatnya kosong. Jika sebuah textarea dimulai dengan teks, setel ulang akan mengembalikan teks itu. Tombol setel ulang dapat menghapus pekerjaan seseorang, oleh karena itu sebaiknya hanya dimasukkan dalam formulir sebenarnya jika memiliki tujuan dan penempatan yang jelas. Lihat referensi elemen HTML MDN untuk atribut individu.

type="button" mencegah pengiriman formulir, namun tidak membuat tindakan baru dengan sendirinya. Tanpa skrip yang terhubung, mengklik tombol ini tidak akan berpengaruh apa-apa. Bedakan tindakan kirim dan reset bawaan HTML dari tindakan yang memerlukan skrip.